Design & Engineering Lead · iOS · Android · Tablet · Web
I led design and wrote production code for a responsive sidebar help feature that lets QuickBooks users access help content and complete tasks simultaneously.
Problem
Unmoderated user tests revealed a major issue with the help experience. The help feature obstructed users' ability to view and complete tasks simultaneously.
Opening the help feature blocks key interface elements needed for tasks.
This means users can't actually do what the help articles are telling them to do to complete their task.
Intuit loses $125M annually because customers can't figure out how to use QuickBooks.
Research
During research, I discovered that QuickBooks users were wasting valuable time accessing the help feature. My unmoderated observational research showed business owners were repeatedly opening and closing the help window to understand new features which disrupted their workflow.
I presented these findings to the VP of Design, Director of Product, and PM of the help feature. Leadership realized the company had invested heavily in developing extensive help content, but users couldn't actually access it efficiently. This gap was preventing the expertly developed materials from achieving their intended impact.
Leadership quickly decided to prioritize the project and remove any red tape. They were committed to ensuring their investment succeeded in empowering users. Given my close involvement and background in software engineering, I was tasked with solving this problem as both a designer and engineer.
Design explorations & user testing
After sketching, brainstorming, and workshopping a dozen different design ideas with stakeholders to solve this problem, there were only 3 realistic options we narrowed to based on the project timeline and technical constraints of the software.
This solution introduced more usability issues. Users were confused about the minimize button, and those who minimized the help panel had difficulty navigating their tasks.
This new popout window design pattern was unfamiliar and frustrating for users. There was also technical risk as it required a complete re-architecture.
Users unanimously praised the sidebar option. It allowed them to read help content and complete tasks simultaneously. In real-world use, they appreciated the extra vertical space for help content, making step-by-step tutorials easier to follow.
Technical Challenges
Implementing the solution was far more difficult than expected. The QuickBooks product has hundreds of interface permutations. I had to methodically QA test and run multiple moderated user testing sessions of the beta version, fixing dozens of tiny edge cases during a 10% incremental rollout.
A major challenge was ensuring the help feature worked with the "Trowser" design pattern, a full-page interface required for certain tasks. When opened, the "Trowser" completely covered the help feature, breaking its visibility throughout the experience.
Shipped solution
The new version finally shipped with all bugs and edge cases resolved. The responsive sidebar help feature now worked perfectly with existing design patterns, ready for customers.
Impact & metrics
The fully responsive sidebar help experience reduced customer care calls by 22% in the first month, validating the solution's effectiveness.
Remarkably, there was zero negative feedback from customers after launch, showcasing the feature's effectiveness and matching the unanimous support received during user testing.
Retention rates for new subscribers increased by 2%, indicating a better user experience and easier learning curve for new users.
Due to the reduction in support costs, Intuit saved approximately $31 million annually across customer care calls and live chats.