How to redesign a popular yet faltering feature into a seamless & powerful tool?

With these insights and understanding of the problem, I set out to design an experience that was simple yet powerful.

My goal was to create a layout that offered increasing functionality as the user progressed through their workflow. After four iterations, we reached a final design that addressed user problems, aligned with our business goals, and facilitated future feature additions.

I focused on improving the flow of interactions by laying out the different sections in a linear manner with clear labels. I was mainly driven by competitor studies and followed their patterns of information hierarchy e.g. placing Payment Terms at the beginning beside Invoice Date.

When I tested the first iteration with our design partners and other designers, I observed a default flow emerging where users first added a customer and then progressed. Based on my overall testing, I repositioned the invoice date and terms fields because almost all of the users skipped them signaling relative insignificance. This is where we started to part ways from our competitor insights.

With the second iteration, I de-emphasized the invoice date and terms inputs quite a lot. Interestingly the same users began looking for the date and terms inputs who previously skipped them. This taught me, even if they don’t want to change it, they want those fields to be visible and easily accessible. Another change I made was to introduce an element of gamification where as they progress, they unlock new features e.g. only after they add one item, do they see the summary card.

The layout and hierarchy was getting more and more stable. In this iteration I wanted to address the interactions of the flow more specifically selecting a customer and item. Previously to add each, a modal was opened where they could select their desired entity. I replaced this interaction with a powerful “search and select” input field. I retained the modal interaction for multi-selecting invoice items use case. I also refined the visual decisions around input field states and interactions.

The fourth iteration showed positive results in our usability studies but I observed how our users struggled to identify fields to click as the gray background region of the customer name made them assume it was disabled. They were also unable to determine if the cells of the table were clickable as the fields lacked borders. Hence in this iteration I addressed these design flaws and made the experience significantly clearer by adding border strokes and making a better use of the gray region for customer details.