Dawn Ressel | Design Strategist 27 April 2017 Evolving design systems for flexibility and scale

Introduction

Intuit Confidential and Proprietary 3 What is a design system? “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” - Nathan Curtis Lightning Material Airbnb IBM

“Boring” Design Systems Enable Inventive Designs. When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to. - Josh Clark

Intuit Confidential and Proprietary 5 Flexibility • Organizations will test the limits of a design system • Design systems need to flex or they will break Scale • Buy-in & scale require participation • Design systems are a living, breathing product that needs to evolve Truths of Design Systems To deliver both flexibility and scale, a design system requires extensive partnership between designers and technologists.

Intuit Design System

Intuit Confidential and Proprietary 7 Powering Prosperity Around the World

Intuit Confidential and Proprietary 8 Where we start Where We Started Intuit’s journey began over 30 years ago when our founder Scott Cook sat at his kitchen table and watched his wife as she balanced their checkbook and thought there must be a better way.

Intuit Confidential and Proprietary 9 ONE ECOSYSTEM One Intuit Ecosystem

Intuit Confidential and Proprietary 10 BEFORE: Sign In Buttons

Intuit Confidential and Proprietary 11 AFTER: Sign In Button

Intuit Confidential and Proprietary 12 Intuit Design System has Five Tracks STRUCTURAL ELEMENTS BRAND ELEMENTS ECOSYSTEM FLOWS UI COMPONENTS WIDGETS Logos, Typeface, Color Palette … Mint to TurboTax… One Intuit Identity … Checkboxes, Buttons, Tables … Atomic & Responsive Grids, Typescales, Spacing …

Intuit Confidential and Proprietary 13 Design System Elements Color Palette Typography & Spacing AvenirNext Brand Logos Mobile Icons Responsive & Atomic Grid 4PX GRID

Intuit Confidential and Proprietary 14 UI Components Select One Design System Elements Indeterminate long Determinate short Determinate long Determinate progress bar Indeterminate short Loading Graphics System Hyperlink

Evolving for Flexibility

In order to be a true design system, it must have a single source of truth. In code.

Intuit Confidential and Proprietary 17 One Intuit Continuum 10% FAMILY 40% FAMILY 80% FAMILY 100% FAMILY HOUSE OF BRANDS BRANDED HOUSE

Intuit Confidential and Proprietary 18 IDS Default Design AL c Default Hover Inactive Menu On Click Selected Focused Selected Hover ; ; Hover Clicked Selected Focused Default Error State AL c AL c AL c AL c Select One c Example Configuration Menu AL c Default Hover Inactive On Click Selected Focused Selected Hover ; ; Hover Clicked Selected Focused Default Error State AL c AL c AL c AL c Select One c AL c AL AK AZ ; AL c AL AK AZ ; IDS Dropdown Fixed vs. Flexible Recommendation

Intuit Confidential and Proprietary 19 Example Spec: Fixed/Flexible

Evolving for Scale

Intuit Confidential and Proprietary 21 What is a widget? Example: Google Maps - Core to businesses - Familiar experience - Best practices baked in - Configurable

Intuit Confidential and Proprietary 22 TurboTax Sign in screen QuickBooks Sign in screen Mint Sign in screen The genesis of our Widget journey One Intuit Identity

Account recovery: dramatically increased user success rates

Substantial Benefits: Widgets improve productivity & decrease time to market

Intuit Confidential and Proprietary 25 1 widget Minutes to adopt One Intuit Identity One widget orchestrates complex interactions

Intuit Confidential and Proprietary 26 BENEFITS • Best practices • Familiar experience • Productivity • Speed to market • Learn at scale • Reduce risk • Subject matter experts Designing full stack has many advantages Benefits of widgets KEY TAKEAWAY: Widgets are a great investment and create a better user experience.

Designer + Technologist Partnership

Design (system) intent is manifested through code. - Eric Knudtson

Intuit Confidential and Proprietary 29 Widgets and component libraries share theming Intuit Component Library turbotax qb mint pcg intuit … Intuit Widget Collection x x x x x x x x x x x x x x x x My Product x x x x configure Fixed Attributes

Component libraries + widgets + theming allow you to scale the intent of both visual and interaction design.

Intuit Confidential and Proprietary 31 CSS Guidelines

Intuit Confidential and Proprietary 32 Propagating design values globally

THANK YOU @uxdawn