Intuit Design System
The Intuit Design System program started around the beginning of 2016 as a response to Intuit's change in direction from a house of brands (e.g., QuickBooks, Turbotax, and Mint) to a branded house in pursuit of better Intuit brand recognition. Intuit recognized that not only did the products need to be branded Intuit, but the product experiences were disparate and needed to become cohesive to achieve the recognition they belonged to a family.
The program comprised a couple of full-time resources supplemented by part-time volunteer designers from each business unit. About 18 months after its inception, I began working on the program full-time to lead component design efforts and introduce mobile design expertise.
Challenge
We needed to reach a critical mass of components (80%). The web components alone would take another four years at the previous rate.
Products have been designed and developed within their business silos and reflect different approaches to visual representation, interactions, and behaviors.
Design teams don't leverage standard components and patterns as a matter of practice.
Many components and patterns are not accessibility compliant.
Components implemented in product UIs don't always match designs.
Role
Strategist collaborating with design, development, and executive leadership to set goals, priorities, and roadmaps.
Design Lead forming project teams, providing design guidance and project oversight in creating components and patterns.
Provide mobile expertise, guidance, and direction that hadn't existed.
Principles
Balance COHESION with meaningful differences.
Don’t let PERFECT get in the way of GOOD.
Elevate design QUALITY; don’t average it.
Prioritize USABILITY over aesthetic purity.
One Intuit community MINDSET.
I worked with designers, developers, and business leaders to identify and prioritize components across platforms. The customer platform of choice for most of Intuit's products is the web, so we initially prioritized it based on web needs. We designed for all platforms so that we could make deliberate decisions when designs needed to be platform-specific.
I would run workshops to accelerate delivery to address less complicated and product-proven components in groups. We ran complete projects for complex components and patterns that had divergent product approaches or required additional research to arrive at the best solution.
Approach
Co-creation: Every project team consists of representative designers from each business unit.
Stakeholders: Stakeholders from each product team are consulted throughout the project and have input into the final solution.
Leadership: Business unit and executive-level design leadership provide approvals for solutions.
Internal and external best practices
Projects begin with internal research on how product teams used the component or pattern within their products. We also researched best practices within the industry to compare and contrast Intuit practices with industry best practices and research. When there were questions about how changes within our products would perform, we did usability research before presenting our proposed solutions. We would then ask our early adopters to measure performance and gather feedback to assess the performance of the released solutions.
Guidance
We found that it wasn't enough to provide the components for consumption. In some cases, designers and developers misused components, and they regularly had questions about how to use them best. In response, we created guidance on proper usage, alignment, placement patterns, and do's and don't examples providing clarity for our internal customers.
Accessibility
Our components had to comply with WCAG guidelines and OS accessibility functionality, so we worked with our internal accessibility expert and development teams to ensure we delivered on this requirement. Accessibility considerations include:
Color contrast
Visual hierarchy
Aria labels for web
Expected behaviors and focal order
Consideration and compliance with browser and OS accessibility settings
Fixed and Flexible attributes
The design system represented the Intuit visual language by default. We also needed to allow the various products to express their personalities while remaining part of the Intuit family. Accomplishing this meant identifying which attributes were necessary to communicate the Intuit family and which characteristics could be flexible for products to reflect their variations of visual language.
Solution
I have shared a sampling of web components from our solution. The Android and iOS components are a mix of native components to follow platform expectations and customized components to better follow the Intuit language.
Buttons
Inputs
Controls
Containers
Navigation
Communication
Data
Page Layout
Outcomes
In less than two years, we reached our goal of critical mass (80% of identified components) for all web, responsive web, Android, and iOS.
All of Intuit's cornerstone products adopt product-themed versions of components and brand elements from the design system.
The program received recognition as a vanguard within Intuit for a cross-functional, cross-business unit, collaborative working model, and is participating in significant ecosystem projects to facilitate and influence processes and outcomes.