Intuit — 2020

Crafting a world-class design system

The QuickBooks product recently underwent a redesign with a new design language and an overhaul of technology. I had the opportunity to lead the Intuit QuickBooks Design System team through a successful rollout of our new library across our 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 successful 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 just 6 months, we achieved 90% adoption of the new design language, shipped 41 net-new components, and restored organizational trust.

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 operate under a hybrid design system governance model. The open contribution system allows our team to bring in outside contributions to help build the design system while we own and maintain the central library.
The Background: QuickBooks underwent a major overhaul of its technology and visual design language. The initial redesign was led by brand and product design teams, supported by the design system team, to establish foundational, intuitive UI elements.
My role: QuickBooks underwent a technology overhaul and introduced a new visual design language led by our brand and product design teams. As Lead Designer for QuickBooks Design Systems, my role was to ensure the end-to-end success of this new language and roll it out via a scalable toolkit.

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 operate under a hybrid design system governance model. The open contribution system allows our team to bring in outside contributions to help build the design system while we own and maintain the central library.
The Background: QuickBooks underwent a major overhaul of its technology and visual design language. The initial redesign was led by brand and product design teams, supported by the design system team, to establish foundational, intuitive UI elements.
My role: QuickBooks underwent a technology overhaul and introduced a new visual design language led by our brand and product design teams. As Lead Designer for QuickBooks Design Systems, my role was to ensure the end-to-end success of this new language and roll it out via a scalable toolkit.

The problem

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

Pain-points:

No clear single source of truth for the 250+ design community.
Two conflicting visual design languages live simultaneously (one new, one old)
Discrepancies across resource channels (Zeplin, Lingo, Abstract, website), making it hard for designers and developers to determine what was correct.

Pain-points:

No clear single source of truth for the 250+ design community.
Two conflicting visual design languages live simultaneously (one new, one old)
Discrepancies across resource channels (Zeplin, Lingo, Abstract, website), making it hard for designers and developers to determine what was correct.

Discovery & Research

To focus our energy on the most critical issues, 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 severe 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 massive product dependencies.
Defining Critical Mass: We audited key user flows to identify the essential patterns our customers interact with daily, aiming to create the least amount of friction and keep the product intuitive.

To focus our energy on the most critical issues, 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 severe 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 massive product dependencies.
Defining Critical Mass: We audited key user flows to identify the essential patterns our 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

To stay focused, 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/existing hires on collaboration and toolkit usage.
- Office Hours: Gave us visibility into upcoming production pipelines and allowed us to 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 at least the minimum AA contrast ratio (3:1) of WCAG 2.1, be keyboard accessible, and 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.

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 successfully bridged the gap between the new visual design language and our product teams, delivering massive quantitative and qualitative results:

High Product Adoption: Achieved a remarkable 90% adoption rate of the new visual design language across the organization.
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: Drastically improved accessibility compliance to meet strict 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 successfully bridged the gap between the new visual design language and our product teams, delivering massive quantitative and qualitative results:

High Product Adoption: Achieved a remarkable 90% adoption rate of the new visual design language across the organization.
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: Drastically improved accessibility compliance to meet strict WCAG 2.1 AA standards for our core user base (median product age of 51), resolving a major customer pain point at scale.

KEY IMPACT & SCALE

6 Months

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

90% Adoption

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

41 Net-New Components

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

Unified Accessibility

Elevated compliance to meet strict WCAG 2.1 AA standards for a user base with a median age of 51

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