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

Imagine trying to run a marathon with a sprained ankle. That is what our users felt when trying to generate invoices using ordr’s invoicing module. It was slow and painful.

In May 2023, Ordr was launched, and within just three months, its invoicing module became a hit among users. The popularity, however, brought a number of requests for enhancements and fixes, which we addressed in a patchy manner through updates from different developers. Over time, this piecemeal approach led to significant performance and design issues, causing the invoicing module to deteriorate over time with use.

Data doesn’t lie, neither does dozens of complaints and requests from your customers.

I recognized early on that the existing bento-box styled design of the invoicing module was not scalable, as it was getting harder and harder to introduce the requested features. Each patch update exposed its weaknesses further. It was clear that a comprehensive redesign was necessary to restore and enhance its functionality and user experience.

I decided to address this module’s flaws.

I began by building a strong case to present to our Product Managers (PMs) and Team Leads (TLs), using data from Mixpanel. I illustrated the inefficiencies in the current invoicing process, highlighting the average time it took users to build an invoice and the confusing, unintuitive interaction flows.

I also cataloged user feedback, capturing quotes that underscored their frustrations with the module’s performance and design flaws. Armed with solid rationale and the backing of the engineering team - who were eager for an opportunity to refactor the code - I pitched the need for a holistic redesign.

1. Enhance Scalability and Performance: Address the deteriorating performance and scalability issues caused by the initial bento-box styled design and adhoc patch updates.
‍
‍2. Improve User Experience: Create a more intuitive and efficient invoicing process by incorporating user feedback and aligning with industry best practices.
‍
‍3. Streamline Workflow: Design a step-by-step, user-friendly interface that accommodates the workflows of the majority of users, making it easy to add more features in the future.

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.

The redesigned invoicing module was met with overwhelmingly positive feedback from customers. Daily invoice generation numbers skyrocketed by 120%, and the average time to create an invoice dropped by 50%, now taking around 3.5 minutes. The revamped module not only resolved the performance issues but also positioned Ordr’s invoicing experience as one of the best on the market.

The attention to detail and intentional design didn’t go unnoticed and the new redesign was very well received by our users and my managers at work.

This project demonstrated how a data-driven approach, combined with user-centric design principles and thorough market research, can lead to significant improvements in both functionality and user satisfaction.
‍
1. Examining constraints from various angles inspires fresh approaches to address other limitations.
‍
2. To ensure sustainable progress for the project involve cross functional stakeholders from the start. This allows us to effectively consider business viability, content strategy, and technical feasibility from the outset.
‍
3. If an additional step results in a more seamless and easy to use experience, it is justified and is not adding to complexity but rather to simplicity.