Complex Feature Design: Credit Application
THE PROJECT
Credit notes are commonly used in accounting by vendors to provide credits to buyers for damaged, returned, or in correct goods and services and are often leveraged by our customers for future payments to vendors. Our customers had been managing credits in their enterprise resource planning (ERP) which was difficult because they had to use two systems to process and pay their invoices and the two systems wouldn’t always sync properly, leading to errors. Working alongside a product manager for this feature, we had a complex problem to solve for our customers that required a simple, intuitive solution. We needed to cultivate a design to enable credits to be managed within our application to help our users save time and effort, reduce errors, leverage our end-to-end experience. All of the work for this feature occurred in a fast-paced, agile environment.
*Please note these images do not include real company data or logos.
THE PROCESS
Working with the product manager for this feature, we created a feature deep dive, requirements, and use cases. We looked at the existing workflow, customer data (e.g. total number of customers using credits, top ERPS using credits, etc.) and related feature requests from customer support to better understand the current state and pain points. To gain awareness of the mental model our customers already had related to credit application, we did some competitive research to understand how other key players are handing credit application and analysis of the ERPs our customers have become accustomed to using.
I led a low-fidelity brainstorming session with a few members of the product team using the InVision Freehand tool. The product managers shared the feature requirements, and we experimented with different content formats that best met our customers’ mental models and remained consistent with design patterns already in our application.
This was a complex problem to solve because there were many ways for the user to apply credits. I spent some time sketching out ideas because there was auto-apply and manual apply and within both of those options there was also one invoice per vendor or multiple invoices per vendor. After exploring all four options, we decided to move forward with manual apply with multiple invoices per vendor because it provides the most insight and control for users when applying their credits. We also decided to create a new sheet component with the details that slides down from top to bottom over the original credit list because it allows users to keep in context and move freely to and from the list of vendors that have credits available.
Once the approach was solidified, I continued to brainstorm iterations of the design in Sketch and brought it to higher fidelity utilizing Material UI react component library and our in-progress design system. I also better defined the various details of this new feature including error handling states for the input fields, modals, and the credit application empty state by following patterns already existing within the application and creating new ones when necessary. At this time, I also worked closely with a UI developer to conduct an accessibility audit of this new feature. We collaborated on screen reader text using Apple’s VoiceOver as well as checked that our labels were clear, color contrast passed ratio standards, tabbing occurred in an intuitive order, and more. While our application is not mandated to be compliant with accessibility standards, we strive to achieve them whenever possible to provide an inclusive experience for our customers.
Error Handling Example
Modal Example
Empty State Example
I met with developers throughout this process to discuss the technical feasibility of the in-progress design and adjusted as necessary. Once I elevated the design to higher fidelity, I conducted internal feedback sessions with our product team, customer support, and finance team (the finance team was a very convenient internal resource of feedback as they are also users of our own product). Once design modifications were complete based on the internal feedback, I ran usability sessions with 5 customers. The product manager helped with the recruit and scheduled sessions while I prepared the script, moderated the sessions, analyzed the data, and made design recommendations based off of the feedback gathered.
Once the design was finalized, it was brought to development and released into a pilot with 5 customers that lasted for 45 days. The feedback from these customers was overall very positive, as they told us the design was “intuitive,” “responsive,” and “easy to use”. We had our pilot customers rate a list of attributes on a 5-star scale and their ratings averaged 4 out of 5 stars. We gathered various feedback on their experience applying credits, how it compares to using their ERPs, and requests for future feature functionality, including auto-apply, discounts, and un-apply.
With positive feedback from the pilot, we rolled out the new feature to the rest of our customers.
The Outcome
This solution successfully enables our customers to apply full or partial credits to invoices, view credits, and pay invoices with fully or partially applied credits in an intuitive manner. It has brought us to parity with the rest of the market and positioned us as an end-to-end automation software solution.
The design has adeptly led to:
Better management over credits
Reduced workflow time and effort
Less risk of sync issues
Next Steps
I continue to iterate on the design to include feature functionality requests and elevate the feature beyond the MVP version. The product manager and I are tracking key metrics for product adoption and product engagement (number of page visits, customers applying credits, etc.) using Pendo analytics and making adjustments to the design as needed. We’re also collecting user feedback through an in-app survey and live feedback sessions focusing on functionality, ease of use/intuitiveness, and design.