Our research on Wave Money led to a company-wide initiative to rebuild our mobile apps and reduce technical debt, resulting in a unified mobile experience that delivers higher quality and faster results for business owners.
With this in mind, after reviewing the current approach with the product manager, design, and engineering, across my team (banking), invoicing, and accounting, we determined it was adding more technical and design debt than anticipated. We would have to redo all the work in the mobile app rebuild which was underway.
I suggested that we build this feature in the new mobile design system that I was leading. This would give us momentum on delivering the new mobile app initiative and deliver a better experience to our users.
I began by looking at the current check deposit user flow. I mapped out where the match invoice feature would be. I collaborated with product, engineering, and design across my team (banking), the invoice team, accounting, as well as the in-house GAAP Compliance Lead to fully understand how the bookkeeping works and take all considerations into account.
The purple flows are the new invoice match screens.
I explored how the new mobile design system components could work in this context.
Explorations for the check details screen and the input pattern.
Using the principle from the Wave Money application work, having multiple steps on a single screen does not necessarily help with form completion or conversion.
I separated the amount field to it’s own screen. This screen would become a pattern in the new mobile design system language. There are many places to enter amounts across Wave and having a base pattern to use would help improve comprehension, input, and improve the user experience.
Using the mobile design system patterns to deliver a better user experience for form input.
This is where the magic happens! Having the user research evidence to understand how business owners identify their invoices, customer name and amount, I explored some ways this could be presented.