An INTERACTIVE setup guide for QuickBooks 

The challenge: Deliver a delightful new way to guide users through setup of a complex accounting product.
The timeline: Ten weeks. This work was done in parallel with the the responsive dashboard for QuickBooks.
My role: Lead interaction designer, with product manager and visual design partners.

CUSTOMER PROBLEM

STAYING IN SYNC & THINKING END TO END

This project faced some challenges, the first of which was the timeline. We had less than ten weeks to design, test and build a new setup experience and dashboard. 

The release had high visibility, all the way to executive leadership. This meant that as a design team we had to synthesize and iterate on passionate feedback during every step of our process. The final designs would be localized for our seven international regions, so they had to be flexible and scalable. 

CUSTOMER INSIGHTS & DESIGN PRINCIPLES

Based on prior research, A/B tests and experimentation, we kicked off the project armed with the following insights:

Guidance is critical for new users. We knew that QuickBooks can be overwhelming, and that our users needed a clear place to start and tasks to complete.

Users love seeing the data visualizations. These charts are one of the unique things users get from QuickBooks that Excel and pen and paper can't provide.

The prior dashboard had interactive cards that increased engagement and feature discovery, but not task completion.

We had a strong hypothesis that showing relevant jobs to our users, based on their business type or interests, would result in higher task completion.

We also developed some dashboard guidance principles:

Help users understand where and how to get started. Provide guidance and show progress.

Use clear language to teach users how to accomplish the jobs that customers hired us to solve.

On first viewing, provide a preview of how the product looks once the user has added their data.

Don’t be overwhelming. Keep things simple and friendly.

Leveraging the insights above, we did a couple early team brainstorms. These are some examples of sketches on a mobile-first version of the setup experience, tailored to one of our user types.

Through these sketching sessions we generated some early ideas and thoughts that we wanted to get feedback on from customers right away. 

PROTOTYPES & TESTING, ROUND 1

Our goals for the first round of testing were to make customers comfortable jumping in, and to help them grasp the benefits the product could provide. We needed to show between four and six multistep guides without overwhelming users.

Given our timeline, I needed this research to do double duty. I wanted to hear how users reacted to the new dashboard in addition to the guidance, so I mocked the designs at medium visual fidelity.

I had hypotheses that numbers would help users understand where to start if they felt lost, and that checklists were an approachable, recognizable way to show multi-step content and progress. 

I built three prototypes in Axure, then launched a test on Usertesting.com. We wanted to see how each concept made our users feel and whether they would be able to jump in. Their first impression of the product was crucial, so we had users land on the dashboard and share their reactions. We observed how they explored each concept.

Concept C was the qualitative favorite. Based on this round of testing, we confirmed that all of our concepts were on the right track. Users reacted positively to all of them. The idea of showing 'jobs to do' and the steps to get there was resonating with customers. We generated some new questions for the next round of testing.

What kind of visual treatment for the tasks was easier to understand? Illustrated workflows or checklists?
Did users grasp that they had several 'jobs' to set up?
Did users understand that the setup guides would 'turn on' the product and activate the dashboard?
What structure would be most motivating to new users?

USER FEEDBACK, ROUND 2

Based on the learnings from the first test, I iterated on the setup guides.

This time, for one concept, I tried hiding most of the setup guides by collapsing all but the first widget (Concept A). Users could click to open the other widgets. This added some layout complexity, given we'd decided our widgets would be squares.

I also iterated on the single checklist idea to make it more prominent and visually engaging.

We shared both these concepts in both mobile and desktop views with our design community and leaders. The idea of a job-based setup guide was still new, and while we were confident it was the right direction, it was imperative that we evangelized the concepts and share where we were headed as early as possible. 

We also needed to figure out which visual style was more effective, checklists, or illustrated workflow diagrams?

The learnings from this test continued to inform the new dashboard design we were working on in parallel. Users continued to react positively to the new look and feel and loved the widgets. 

PROTOTYPES & FEEDBACK, ROUND 3

By our last round of testing, we knew we were on the right track, and we had to make a data-backed decision on our final design. To do this, we increased the rigor of the test and the realism of the prototype. Our prior tests had artificially limited users to interacting mostly with the dashboard. 

I made two prototypes, which included the setup flow and the zero states of the other pages. The test was intended to give us a better sense of how users would explore the product.

My research partner and I documented and shared the top insights we gathered, the implications of those insights, and the 'say/do' behaviors from this test. Because these prototypes were more complex, we ran two separate tests. In addition to qualitative feedback, we had each user rate the design for clarity and for their confidence level that they could continue setup.

Based on the three rounds of user feedback, the ratings in clarity and confidence, and the high engagement we observed, we decided to move forward with the design of the setup list. The setup widgets had also presented some animation and layout complexity as their open-close behaviors would cause the widgets to move around the page.

VISUAL DESIGN EXPLORATION

We had aligned on our interaction design solution, so it was time to iterate on the visual design of the guide. The setup guidance had to be discoverable, friendly, and engaging. It's also the first thing users see when they land in the product for the first time, so it was important that it was visually polished and felt great to interact with. We looked at different ways to differentiate the setup content from the rest of the dashboard, and explored on numbers, typography, and structural layouts. We tried tabs on the left, tabs across the top, 'buttonizing' the links, circles, bold colors, minimal colors, and more. 

We moved through several rounds of visual design explorations, incorporating lots of feedback from our team, product and design leadership, and all the stakeholder teams. Here are a few of the later-round explorations that led to the final design. 

We ran our final visual recommendation through 3M's Visual Attention Software (VAS) simulator to make sure that within the first three-to-five seconds of viewing the page, users would notice the setup guide. This pre-attentive processing is considered predictive of results from eye-tracking studies. 

Based on the test, we were confident in the discoverability of the setup guide, but knew we needed to iterate on the design to reduce the impact of the widgets below, which drew a lot of attention. 

FINAL DESIGNS FOR DESKTOP & MOBILE

The last steps before handing the designs to our developer team were to design and deliver setup guides for all the use cases, also known as jobs, that the widget needed to support. In total we created and launched five different setup guides in support of several teams' initiatives, including an online banking setup guide, invoicing setup guide, accountant connection tool, and compliance setup. We worked with each team to define the requirements, design the content and create the visual states for each use case. Several scrum teams collaborated to build each one. We met with our developer team regularly to support and provide feedback through several rounds of visual and interaction QA. 

In addition to the visual and interaction design, we partnered with our design content team to make sure the content was clear, straightforward, and encouraging. 

The setup guide was designed to flexibly accommodate three to six jobs, a personalized sequence, and had four responsive views so that it would fit in the new dashboard grid. Based on user-indicated preferences, we would re-order the jobs in the guide to make sure the jobs most relevant to them would be what they at the top of the list. 

ANIMATION & MICROINTERACTIONS

To maximize the effectiveness of the setup guide, we built in purposeful animations and microinteractions. I partnered with our motion designer to add ambient animations that would encourage users to take action and create visual focus on one task at a time. We also made sure that the transitions between tabs, link states, and task completion animations were smooth and well-timed. 

HOW TO HAND OFF AND QA A DYNAMIC, ANIMATED WIDGET

To make the handoff of the setup guide specs to our developer team and their QA engineers as smooth as possible, I created three visual maps of the visual states of each access point in the guide, which varied by use case and workflow. I also knew that in future months, other designers and teams would be contributing setup widgets of their own, and I wanted to make the interactions and intended states of each access point in each layout extremely clear. 

THE RESULTS

As I mentioned on the responsive dashboard project, the dashboard and setup guide was released as an A/B test for new users. It beat the control experience by a significant margin across all our key metrics, and after the test period it was rolled out to all users, including to our global regions.

Within a week or two of the test launch, we saw double-digit increases in engagement with all of our key task metrics. Users were taking action, accomplishing tasks, and most importantly, they were coming back more often to do more. A full 10% more users came back to use the product again after logging in for the first time. More users were adding their data, connecting their accounts, and signing up for for our QuickBooks attach products like payroll and online payments – which meant they were getting value from the product. 

We also saw double-digit reductions in the time it took users to get to the benefits we'd emphasized in the setup guide.

As a result, the setup guide was an integral part of the single largest increase in user growth in QuickBooks history, and one of the biggest increases in conversion the product has ever had. I'm happy to share more about the results in person.

The setup guide was shipped at the end of 2016, and is still live in the QuickBooks product in fall of 2020.