I was the lead Interaction Designer on the project for Intuit, working with a team of developers and a product manager. I was in charge of defining the user experience through mockups and prototypes, testing with users, and the final production designs.
About the project
One of the major benefits of QuickBooks Online (QBO) is being able to send invoices online and receive online payments from customers. This way, QBO helps users by avoiding duplicate work of transferring all your invoicing data into your accounting. This project’s goal was to create an engaging experience to help users understand the benefits of invoicing through QBO.
What better way to know a product, than to try it?
We knew that small business owners who use QBO for invoicing have a better experience in our product, but our data showed that only about half of all possible invoice users were actually using QBO for invoicing. Our team came up with an idea to actually let users send a real invoice to Intuit and for us to pay it. This would allow our users to see it in action, with no risk of sending invoices to their own customers.
early Concepts and approach
A few questions that I started with:
- Do we catch the user at the beginning of QBO setup? Or only when we are sure they needed invoicing?
- Do we lead with the money being the main draw or do we lead with how invoicing works with accounting?
- The user needs to actually apply for a payments account - is there a way we can postpone that part of the flow?
We started the process with going broad and sketching out ideas on what the experience could be like. We also needed to explore the content design because we wanted to make sure that users could grasp the workflow and how invoicing integrates with QBO. This wasn't a 1-click experience, so how could we simplify things down?
Exploring interactions and content
After the initial sketched ideas, I worked on bringing more fidelity to the designs to see where things worked well and where there were still gaps. For example, initially I introduced the sample invoice to the user through a tooltip on the Customer Name filed. However, as I got internal feedback from the team, we ended up going with an interstitial modal that would give us more room to work with.
Does this make sense to users?
After some refinement internally, the next step was to test the designs with users. We went through several iterations, testing the interaction, visual, and content design to make sure we were communicating and engaging with the users through the workflow.
My initial vision for the project was to really tackle the end to end experience for users who wanted to try out invoicing. The old experience basically passed the user from screen to screen with no real cohesive story to bring the user along in this journey. For example, in order to actually receive payments in QBO, a user must apply for a payments account. This process can seem very random and abrupt in a flow where we were guiding the user to send an invoice to us. I pursued a design where we altered the payments application flow to give more context to the user, which the team was bought into. However, due to prioritization among other projects, we weren't able to touch the application flow for the V1 launch of this project. It will be a fast follow as we improve upon it and launch V2.
Below is final end to end experience was launched to the entire QBO user base. Users that checked out invoicing were prompted to try out the special experience we set up. There, we would help them fill out an invoice made out to the Quickbooks team. Then, for this V1 experience, they had to set up a payments account. Once they were approved, we deposited $10 into their account.