Intuit — 2020

Crafting a world-class design system

The QuickBooks product underwent a redesign with a new design language and an overhaul of technology. I led the Intuit QuickBooks Design System team through the rollout of our new library across a 250+ member community.

Role

Lead Product Designer

Tools

Figma, Sketch, Zeplin, Lingo, Abstract, Stark, JIRA

Image 1 — intuit 2020.

TL;DR

As Lead Product Designer for QuickBooks Design Systems, I led the rollout of a new visual design language and component library across a 250+ member community. Facing fragmented documentation and conflicting design standards, I partnered with cross-functional teams to streamline resources, build accessible components mapped to global tokens, and execute a phased rollout. In 6 months, we achieved 90% adoption of the new design language, shipped 41 net-new components, and restored organizational trust.

KEY IMPACT & SCALE

6 Months

From friction to a phased rollout across a 250+ member community.

90% Adoption

Achieved organization-wide adoption of the new visual design language.

41 Net-New Components

Built, documented, and shipped components integrated with global design tokens.

Unified Accessibility

Brought components up to WCAG 2.1 AA standards for a user base with a median age of 51.

Context

The Product Suite: QuickBooks is the leading accounting software for SMBs, delivered across cloud-based product lines including QuickBooks Online, QuickBooks Accountant, and QuickBooks Self-Employed.
The Environment: We operated under a hybrid design system governance model. With a lean core team of 3, I fostered an open contribution model, recruiting and training designers from other product areas to help build the design system while we owned and maintained the central library.

The Product Suite: QuickBooks is the leading accounting software for SMBs, delivered across cloud-based product lines including QuickBooks Online, QuickBooks Accountant, and QuickBooks Self-Employed.
The Environment: We operated under a hybrid design system governance model. With a lean core team of 3, I fostered an open contribution model, recruiting and training designers from other product areas to help build the design system while we owned and maintained the central library.

The problem

Product designers and engineers need a seamless, reliable way to find and implement the latest design system components. At the time, the assets and guidelines were difficult to access across the organization, causing workflow bottlenecks, design inconsistencies, and duplicated effort.

Pain-points:

Lack of a Centralized Hub: There was no clear single source of truth for the 250+ design community.
Conflicting Visual Systems: Two conflicting visual design languages lived simultaneously (one new, one old).
Resource Channel Inconsistencies: Discrepancies across Zeplin, Lingo, Abstract, and the website made it hard for designers and developers to know what was correct.

Pain-points:

Lack of a Centralized Hub: There was no clear single source of truth for the 250+ design community.
Conflicting Visual Systems: Two conflicting visual design languages lived simultaneously (one new, one old).
Resource Channel Inconsistencies: Discrepancies across Zeplin, Lingo, Abstract, and the website made it hard for designers and developers to know what was correct.

Discovery & Research

We needed to understand the everyday experience of our community and the status of our new visual language.

Methodology: Conducted 1-on-1 interviews, product audits, and empathy mapping.
Key Insights: Interviews revealed a lack of trust in the documentation. We needed to eventually sunset the old visual design language, but this required careful planning and communication due to major product dependencies.
Defining Critical Mass: We audited key user flows to identify the essential patterns customers interact with daily, aiming to create the least amount of friction and keep the product intuitive.

We needed to understand the everyday experience of our community and the status of our new visual language.

Methodology: Conducted 1-on-1 interviews, product audits, and empathy mapping.
Key Insights: Interviews revealed a lack of trust in the documentation. We needed to eventually sunset the old visual design language, but this required careful planning and communication due to major product dependencies.
Defining Critical Mass: We audited key user flows to identify the essential patterns customers interact with daily, aiming to create the least amount of friction and keep the product intuitive.

This user journey maturity map highlights critical friction points and tool fragmentation experienced across the product lifecycle.

Tap to view details

Strategy & Approach

We split our work into two key tracks: Improving Communication/Resources and Creating the New Component Library.

Track 1: Improving Communication & Resources (Building Autonomy) The goal was to provide clear, concise support across all channels so the community could function autonomously, freeing up our team to build components.

Consolidating Documentation: We prioritized cleaning up our fragmented tooling (Website, Zeplin, Lingo, Abstract) to remove inconsistent guidance.
Scaling Support Channels:
- Design System Training and Workshops: Tailored onboarding for new and existing hires on collaboration and toolkit usage.
- Office Hours: Gave us visibility into upcoming production pipelines and let us guide product teams directly.
- Slack & Feedback Forms: Centralized Q&A, polls, announcements, and categorized feedback.
- Community Design Council: Weekly meetings with volunteer members from different teams to share updates and bring pain points back to the core team.

Track 2: Creation of New Components

Aligning with Global Tokens: We took inventory of new visual attributes (spacing, color, typography) and aligned them with Intuit's global Design Tokens, ensuring continuity for customers moving between Intuit products (e.g., TurboTax, Mint).
Accessibility as a Core Pillar: Collaborated closely with the lead accessibility designer and engineer. All components had to meet WCAG 2.1 AA contrast ratios, be keyboard accessible, and be screen-reader friendly.

To stay focused, we split our work into two key tracks: Improving Communication/Resources and Creating the New Component Library.

Consolidating Documentation: We prioritized cleaning up our fragmented tooling (Website, Zeplin, Lingo, Abstract) to remove inconsistent guidance.
Scaling Support Channels: * Office Hours: Gave us visibility into upcoming production pipelines and allowed us to guide product teams directly.
- Design System Training: Tailored onboarding for new/existing hires on collaboration and toolkit usage.
- Slack & Feedback Forms: Centralized Q&A, polls, announcements, and categorized feedback.
- Community Design Council: Weekly meetings with volunteer members from different teams to share updates and bring pain points back to the core team.

Track 2: Creation of New Components

Aligning with Global Tokens: We took inventory of new visual attributes (spacing, color, typography) and aligned them with Intuit’s global Design Tokens, ensuring continuity for customers moving between Intuit products (e.g., TurboTax, Mint).
Accessibility as a Core Pillar: Collaborated closely with the lead accessibility designer and engineer. All components had to meet at least the minimum AA contrast ratio (3:1) of WCAG 2.1, be keyboard accessible, and screen-reader friendly.

Facilitating an accessibility workshop for our design community, focused on building empathy for users with impairments.

Co-facilitating an accessibility workshop for our design community, focused on building empathy for users with impairments.

Facilitating an accessibility workshop for our design community, focused on building empathy for users with impairments.

Hands-on empathy building! Audiences testing out simultation glasses to see how users with vision impairments like glaucoma, and other low vision illnesses experience our products.

Accessibility commitment board in action. Grounding ourselves in empathy and real commitments.

Accessibility cheat sheet cards giving designers and engineers a quick reference tool to build inclusive products everyday.

Tap to view details

The Solution & Development

Because of the scale of our community and the moving pieces, we opted for a phased rollout based on critical experiences (Banking, Invoices, Transactions).

Phase 1: Controls and Form elements (buttons, inputs, checkboxes).
Phase 2: Communication components (Modal dialogs, Page messages).
Phase 3: QuickBooks-specific patterns (Tables, Drawers).

Because of the scale of our community and the moving pieces, we opted for a phased rollout based on critical experiences (Banking, Invoices, Transactions).

Phase 1: Controls and Form elements (buttons, inputs, checkboxes).
Phase 2: Communication components (Modal dialogs, Page messages).
Phase 3: QuickBooks-specific patterns (Tables, Drawers).

To transition to the new component library across our products, we rolled it out in phases to align with different product teams and maintain quality standards. Phase 3 was the most challenging, as it targeted the core experiences unique to QuickBooks products.

To rebuild community trust and maintain cross-functional alignment, we published transparent, real-time release updates and component statuses directly on our design system website. This visibility empowered product teams to proactively plan and time their migration schedules.

Tap to view details

A before-and-after look at the QuickBooks dashboard redesign, featuring our modernized design language and component library

A before-and-after look at the Self-Employed product dashboard redesign, featuring our modernized design language and component library

Our central asset management tool, enabling designers to seamlessly import the newly redesigned component library into their workflows.

A preview of the sticker sheet for our tool redesign, showcasing the specifications of our design system library.

Tap to view details

The oucome

In just 6 months, we bridged the gap between the new visual design language and our product teams, delivering quantitative and qualitative results:

Component Scaling: Released 41 net-new components (with 11 more in active development), fully aligned with Intuit's global design tokens.
Restored Community Confidence: Fixed fragmented documentation discrepancies, centralized our Q&A support channels, and provided monthly release transparency for our 250+ member community.
Elevated Accessibility: Improved accessibility compliance to meet WCAG 2.1 AA standards for our core user base (median product age of 51), resolving a major customer pain point at scale.

In just 6 months, we bridged the gap between the new visual design language and our product teams, delivering quantitative and qualitative results:

Component Scaling: Released 41 net-new components (with 11 more in active development), fully aligned with Intuit's global design tokens.
Restored Community Confidence: Fixed fragmented documentation discrepancies, centralized our Q&A support channels, and provided monthly release transparency for our 250+ member community.
Elevated Accessibility: Improved accessibility compliance to meet WCAG 2.1 AA standards for our core user base (median product age of 51), resolving a major customer pain point at scale.

Next project

Crafting a world-class design system

Crafting a world-class design system

TL;DR

TL;DR

Context

Context

The problem

The problem

Discovery & Research

Discovery & Research

Strategy & Approach

Strategy & Approach

The Solution & Development

The Solution & Development

The oucome

The oucome

Redefining the job search experience

Redefining the job search experience