QuickBooks “Advanced” is the accounting software for the US and Canada small medium businesses and mid-market companies. The problem Advanced version of QuickBooks is trying to solve is to cater to the fluid nature of small medium businesses as they have to battle scarcity of resources.
Customer Problem
As the businesses grow, the teams get bigger and business owners are forced to delegate their work. As they delegate the work to the employees, the business owners still expect to retain the control over the business. When it comes to QuickBooks, 80% of the task for business is to create invoices and send to customers, which can become an overhead to the business owner as the business and customer grow in size and number, respectively, which in turn can stunt the business owner by submerging her into mundane task such as creating invoices. 70% of invoices are never sent to the customers.Out of the invoices that were sent to customers 25% of invoices were edited at least once before being sent to customers.
Design Challenge
Invoice approvals demanded a mobile design, because mobile allows the business owner to approve or disapprove the invoices from anywhere. The challenge in terms of design was that QuickBooks being a desktop and web heavy application had a very strong design system support for desktop or web design components, except for mobile. In fact, Invoice approval was the among the few pilot applications for mobile.
Design P̶r̶o̶c̶e̶s̶s̶ Tools
Since, no two design problems are same (can be similar), the design tools also are never the same (except it follows a certain guideline or principles).
FSM (Finite-state-machine)
In the case of Invoice approval, the crux of the problem was that invoices go through multiple stages (via actions performed by different personas) before it is finally sent to the customer. This asked for a finite-state-machine, to crystallise the different states of the invoice in the system. The value FSM provided in the design process was it brought down the number of design iterations and helped all the stakeholders(product managers, engineers) to come on same page. For more on the benefits and use of this amazing engineering methodology in UX read this.
Super low fidelity mocks
The other tool I often used during this project was focusing on bare minimum information that is required for the prototyping stage. I created box mocks on google slides and collaborated with the team to arrive at the right status and CTA buttons for the personas.
On the wall discussions
While feedbacks can be tricky when discussed on digital screens as the stakeholders gets to see only one screen at a time. Discussing the wireframes on the wall ensures we get maximum feedback by giving the stakeholders, both grass-root level details and 30,000 ft level details at the same time.
Final design
The hi-fidelity designs were made in sketch and handed over to development team via zeplin.
An example of fine detail reference taken from existing design patterns to ensure the correct design is implemented
Impact
The percentage of invoices that were discarded and never sent to customers came down by 8%, i.e. to 62%, over the next one year.
NOTE: Above post was only about a small part of much bigger project called workflows and task management. I was handling the mobile and the web version for the same. Below is the snapshot of the web project.
