An INTERACTIVE setup guide for QuickBooks
The challenge: Deliver a delightful new way to guide users through setup of a complex accounting product. This work was done in parallel with the the responsive dashboard for QuickBooks, during the same ten weeks.
My role: lead interaction designer, with product manager and visual design partners
The onboarding experience for the prior version of QuickBooks featured illustrated, interactive cards that linked users to recommended tasks. We learned from A/B testing that the cards increased engagement, but didn't produce the followthrough required to get value from the product. The cards were based on logic that mixed user preference with tasks we recommended for everyone. There was little guidance beyond these access points, and no indication of progress through setup. It was hard to tell exactly where to start, and how to keep going.
We had a hypothesis that a more guided experience on the homepage, combined with flows through crucial first tasks would increase engagement, and as a result, increase confidence and followthrough during a our users' first experiences with the product.
My team researched and developed a new way to describe the jobs QuickBooks could do. This job framework allowed us to speak in our customers' own language. This helped us reframe onboarding in a way that spoke more directly to our customers' expectations and their accounting needs.
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 setup guide was part of a release with many moving parts. Several teams were developing new designs at the same time, and all of them relied on the dashboard and setup guide as their access point. Supporting their use cases required coordination as all of the designs evolved.
To stay in sync across initiatives and teams, we actively maintained a living end-to-end experience wall of the latest designs, and an Invision prototype of the experiences being developed.
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.
The first view of the dashboard provides 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 A: Widget-by-widget Checklists
Concept B: Widgets with Workflow/Data viz Toggles
Concept C: Setup Checklist
Usertesting.com, remote test
15 small business owners who don't use QuickBooks
Three concepts, in random order
We asked users to imagine they had just signed up and to explore. We wanted to find out whether it was clear how and where to start, and how useful they felt the product would be to their business. We also probed on their expectations and feelings. Which design inspired confidence? What felt most helpful?
The jobs framework worked. Users understood the setup guidance.
Users liked the numbers and understood they were suggested, not required.
There were negative reactions to wasted space and having to click around to find information.
Workflow illustrations appealed to accounting newbies, highlighting the need for education in first use.
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?
Concept A: Expandable modules + Checklists with data visualizations as the motivator to take action (distributed setup)
Concept B: A single job checklist (consolidated setup)
10 participants, Usertesting.com
3 in-person interviews
Two concepts, in random order
We had users go through a similar test to round 1, but with two new prototypes. I mocked both versions and built in some of the interactions in Invision.
The checklist kept the actions at the top of the homepage at all times. In the widget model, setup wasn't always visible on first landing, which caused confusion.
The checklist was a stronger solution for people with less clear goals, because it felt less focused on any single job or widget.
Seeing all the widgets at once in Concept B generated a lot of positive reactions.
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.
Concept A: Setup widgets + full product navigation, zero states
Concept B: Setup checklist + full product navigation, zero states
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.
Two tests, seven users each, Usertesting.com
Six user interviews
Concept B: Setup list - Clarity: 6 of 7 users rated 5/5, Confidence: 4 of 7 rated 5/5
Concept A: Widget setup - Clarity rating: 3 of 7 users rated 5/5, Confidence: 3 of 7 rated 5/5
Navigating the product and viewing each page is how users learn what QuickBooks can do for their business.
Users loved the dashboard and seeing all the widgets.
All users clicked on checklist's tasks.
Users sought the content in the checklist and navigation that they were most interested in.
Users did not click green ‘Get started’ buttons on the widgets to reveal the setup guides
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.
Because the setup guide was a part of the new, mobile-responsive dashboard, it had to flex across device sizes and not rely on colorful hover states on mobile.
We designed several views, including a small vertical accordion-style layout for mobile devices. We made sure that the mobile views maintained the functionality and guidance of the full desktop version of the widget, but reduced their visual complexity.
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.
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.