QuickBooks Navigation Redesign

2021–2022

CUSTOMER PROBLEM
Small business owners want to get things done and understand how their business is doing within QuickBooks. However, they often can’t find what they need because the left navigation has too many things, things they don’t need, and things in the wrong place, which leaves them feeling lost and annoyed.

THE CHALLENGE
Redefine the current QuickBooks left navigation information architecture in order to lay the foundation for a navigation that is personalized for our customers, is configurable for their unique needs, and can grow with their business.

ROLE
As the lead designer, I led the discovery stage, ran customer research, owned each design iteration, and delivered the final design specifications while working closely with product and engineering along the way.

Background

The old left navigation in QuickBooks was a long list of items that wasn’t always relevant to every type of customer. When they tried to understand how the product worked and navigate around it, customers were often overwhelmed and frustrated that they can’t find what they need. With all the new innovations and features being added to QuickBooks, the old left navigation structure was not scaling well to accommodate such growth.

Over 6 months, our team took on this massive challenge which touched almost all product areas of QuickBooks. We went through multiple rounds of user testing and design iterations to propose a new information architecture, which cut down the original length by 50%. In addition to reducing complexity for our users, we reorganized the new navigation to help our customers run all parts of their business, not just their bookkeeping. For those who want to customize their navigation further, we introduced the ability to bookmark important pages, hide items that aren’t relevant to them, and reorder the navigation to suit their needs.

Before

An overwhelming skyscraper of items that isn’t relevant to everyone

After

A simplified and customizable left navigation that can can meet anyone’s needs

Highlights

Deeper nesting within more intuitive categories

The old left navigation was a long list of over 20 items that was hard to scan. The new design moves away from the flat hierarchical organization, to a more scalable hub and spoke structure.

Bookmark the pages you use the most

For the pages that you want quick access to, you can add them to your primary menu as a bookmark. Then you can save yourself an extra click.

Hide what isn’t relevant to you

Drag items that you don’t want to see in your primary menu under More. It’ll still be there if you need it in the future.

Fine tune your preferences

In addition to customizing directly from the menu, you can also configure everything at once in the menu settings.

Process snapshot

  • Given all the challenges we were facing as a navigation team, I decided to put together an 8 day design sprint. The goal was to dive into QuickBooks’s key navigation challenges with a diverse team and create three design provocations for us to test with customers and share with leadership.

    We learned that navigation is much more complicated than we thought and that there was a big opportunity to improve it for our customers and business. I pitched this as a project idea to the head of design at QuickBooks, we got the green light to allocate resources to the project.

  • We did multiple rounds of card sorting with hundreds of participants to make sure to get as statistically significant results as we could get without having to test in product.

    First we did an open card sort where we learned about how participants group and associate our left nav items naturally without any prompted categories.

    We later did a closed card sort where we understood how customers associate different pages and features in QuickBooks with predefined level 1 “centers” across 4 different variants.

  • We did tree testing with 600+ participants

    For round 1, we tested 3 new information architecture variants to measure findability of features in the context of task completion. For round 2, we tested the winning variant with participants across multiple cohorts to confirm it’s scalability.

This is just a high level sneak peek of what my process was like during this project. I’m happy to dive into deeper detail upon request.

Metrics:

  • 50% reduction in L1 navigation items

  • No harm to task starts, despite deeper nesting

  • Improved engagement in QuickBooks Cash signups, Capital applications, and Payments signups

  • 3% increase in QuickBooks Online trial conversion

SKILLS TO HIGHLIGHT

Cross-functional communication

Since this was such a major project that had impact on almost all parts of the organization, we made sure to meet up with leaders regular and share our progress often. We created a whole program around the project since we wanted to minimize last-mile blockers as much as possible.

Having a win-together attitude

Instead of doing our work in a silo and dictating our decisions to other teams, we spent our time to listen to their needs, treat them as collaborators/ partners, and leverage their expertise. This posture helped us alleviate any potential political tensions.

Being customer obsessed

Throughout the whole process of the project, we made sure to test with customers at every step with multiple methods. For such a major change, it was crucial to make customer and data backed design decisions.

Want to learn more?