QuickBooks Design Systems Strategy
How much did it cost to code a data table?
- For
- Intuit QuickBooks
- Role
- Staff Visual Designer
- Team
- UX Researcher
- Content Strategist
Overview
The cost of one inconsistent component:
$2,611,200
in developer labor to build one table 85 different ways
Estimated 320 hours × $96/hr (average developer rate)
= $30,720 per table. Our developers checked the math.
Problem
QuickBooks had a messy design system. It confused hundreds of designers and developers, slowed them down, and cost money.
Why it mattered
When the design system works, designers and developers spend their time building for customers, not rebuilding the same component over and over.
Goal
Find out how healthy the design system really was, and what to fix first.
Outcome
Our research showed leadership where the system was breaking. The head of QuickBooks Design approved people to fix it. That led to new projects and one standard table to replace all 85.
The problem
A design system that hundreds of people rely on has to be strong, consistent, and scalable.
We had 85 versions of the same data table. Not a typo.
The obvious fix was one table instead of 85. The real problem went deeper.
What we found
In about two weeks, we interviewed 6 developers and 7 designers across 3 teams. Some lead developers had been keeping their own logs, and that data fell right into our lap.
50–100
custom designs per team
8,000
outdated components still in use
43%
of designs used outdated components
We had too many custom components. They took longer to build and made the product look inconsistent.
Designers and developers didn't know which design system to use. Onboarding and training were inconsistent, or didn't exist at all.
Missing documentation slowed everything down. Designers and developers often spent weeks hunting for answers and agreeing on designs. Meanwhile, customers waited.
What we did
Our research showed the design system needed real attention, not occasional updates. That led to several new projects. Here are four I worked on.
Feature discovery components
Tooltips and other messages that help customers find features looked and worked differently depending on who built them: marketing or product. My team and I reviewed the existing patterns for performance, visual style, accessibility, and usability. Then we worked with the Intuit Design System team to build one shared component library, with design tokens for theming and guidelines for each component.
Design token linter
Designers needed a way to catch token mistakes in their Figma files. During a one-week Engineering Days event, I joined my developer teammates to build a Figma plugin that checked every token on a page and flagged mistakes. I designed how it looked and worked.
Design token cheat sheet
Designers kept asking the same questions about which tokens to use. I worked with my team to make a Figma cheat sheet of the most-used tokens. It made the right choice the easy choice.
Monthly design system update
Design system changes got lost in Slack threads and emails. So my team and I replaced them with a monthly Figma gallery that showed every change to patterns, components, and tokens in one place.
Results
We showed our research to the head of QuickBooks Design and opened with the $2.6 million figure, on purpose. It horrified the whole room. He put people on the problem, and that's where the four projects above came from.
Oh, and about that data table...
A team redesigned and built a new data grid with design tokens that replaced all 85 tables. I wasn't part of that work, but I'll take a little credit: our research is what got it approved.
One table to rule them all.
Reflections
If I could do it over, I'd send designers and developers a survey every quarter. It would have shown whether our work was improving the design system, and given us real numbers to prove it.
Priorities shift and new projects pull me away, but that's no excuse. Next time, the survey is part of the project from day one.
One thing I'd do exactly the same: lead with the number that makes the problem impossible to ignore.