Product designers need to zoom out and focus on the product, not the pixels.

Recently, as our design team has worked through the most recent updates of our software and user interface, I have been thinking about the role of product designers within tech organizations. I have come to realize that product designers have very little to do with making a product pretty and polished, and much to do more with making a product that works and delivers value to those who use it every day. 

Being able to differentiate between form and function is what allows digital designers to move their focus from the pixel to the product, respectively. It’s akin to when a designer using Photoshop to carefully apply an effect to a very small section of a design - sometimes down to single pixels - and when they zoom out, they suddenly realize that the outcome is not what they had expected to be. This is what I mean when I say that product designers need to move their focus “away from the pixels.”

Effective product designers need to understand the big picture, and they need to understand how to prioritize functionality, business requirements, and the value of a product to its end users. While this concept might seem relatively simple, the reality is that it can be difficult for a designer to balance their innate desire for simplicity and elegance with effectively communicating functionality to the end-user. A product designer who can master this approach, while keeping the user in mind for all of their design choices, will deliver products that are not only beautiful but also intuitive and easy to use.

Designing the New Helcim UI

While designing the new user interface at Helcim, we had to balance the demands of building a complicated software product, while still adhering to best practices of design. As a financial technology company, we have the challenging task of building products that address complex business needs by giving business owners tools that are easy to use.

New Commerce UI

To add to the complexity, we offer a complete suite of products that address all types of payment actions a business may need to perform. All of these tools need to function similarly and communicate with one another.

A year and a half ago, we were tasked with delivering a new user interface with improved functionality to all aspects of the suite.

It has been a long and intricate process, that at times seemed never-ending, but eventually, we were able to build a strong product that delivers a solid and consistent user experience. Looking back on the process, I want to share two of the major challenges we faced while working on this project in hopes that other product designers who are about to embark on a major redesign can learn from our journey. The first lesson refers to the technical challenges associated with keeping product usability in mind at all times, and the second challenge involves product uniformity and consolidation. 

Multi-Level Navigation

The size and complexity of the Helcim product suite naturally makes mapping out the navigation of the platform a challenge. Navigating through the platform can seem daunting, and at times, users may feel like they are trying to work their way through a maze, without understanding where they are in the platform and how to get to where they need to be. 

Many large platforms struggle with this problem to some degree, and we knew it was one of many items we needed to address when designing the new user interface. Anytime a company develops software that provides multiple layers of functionality, shortcuts to related sections, and access to other products, the application becomes more comprehensive for users, but also more complex to learn.

This is when product designers need to work within their wider teams and discuss how to deliver a functional piece of software while balancing what we would like to provide to our end users with what makes sense. 

Keeping these goals in mind, our struggle was: How can we build deep navigation within different sections of the platform, without the user losing track of where they are?

To address this challenge, I imagined each app as a box that contains different layers. Each layer represents a subsequent section in this three-dimensional box, with each layer overlapping the other. So at any given time, you are always able to see your starting point, know where you currently are, and also where you can go. 

Navigation levels

I then applied this thinking to our products, so whenever a user needs to jump between different apps, it would be clear to them what was going to happen, and where they were going to go before the click occurred. This allowed us to build out the complex navigational routes needed to offer all of the different functions we have while keeping the navigation clear to the user. So the user is always aware when clicking on an actionable item is going to take them to another app. 

Product Consistency

The second big challenge that we faced as a design team was providing seamless navigation across all of our products, and unifying our interfaces so it all felt like one, cohesive experience. 

Because of the nature and timing of how Helcim has been built over the years, the platform was divided into two different pieces of UI, serving two different sections of the same application. If you were to ask a user how many products it felt like they were using, they would likely say two, even though the two sections were a part of the same product. This difference in the user's perception and the reality of the product reiterates the importance of understanding what your product is to be used for and by whom. A product’s market fit has more to do with business strategy than it does with product design. 

We knew we wanted to deliver a product to our merchants that communicated consistency and coherence, no matter what feature or section the merchant was using. If we surveyed any of our merchants on the product, it needed to be clear to them that they were using one product with multiple connected functionalities. With this UI release, we aimed to remedy any discrepancies in the perception of the product for the end-users. 

This might seem like it should be an obvious concept, but sometimes when you are so deep into designing your product, getting “caught up in the pixels,” you may lose sight of the bigger picture, which is ultimately how your customers perceive and use the software. 

  

In tackling this project, I have taken breaks and checked-in with different team members across multiple disciplines to ensure what we were building was designed with our users in mind. We touch base with our data analysts, our team of Helcim Gurus, and our marketing department to ensure we understand what the real needs of our users are and how to build a visually beautiful product without compromising on functionality. 

If your company is tackling a similar project, I would highly recommend establishing strong communication channels between the design team with the other departments in your organization in order to regularly collect and share feedback. 

What We’ve Learned 

In September, we were able to release the new UI to our merchants, but our job is not over. Big pieces of software, like the Helcim product suite, are living creatures that are constantly evolving and changing to better meet customer needs and adapt to changing business requirements. 

A design team should constantly be testing the effectiveness and usability of its design to find new ways to adjust and improve it over time. In many ways the launch date is only the beginning, once your product is in the hands of your users, it is time to listen to feedback on what is working for them and what could be better. We are always listening to our users, and we have already begun work on addressing some of the feedback we’ve already received since the release. Delivering a beautiful product to your customers is only step one, you need to focus on the product as a whole by looking at in its entirety and how it impacts users, and move away from focusing on the pixels.