Evolving design systems for flexibility and scale – Dawn Ressel

Talk at From Business to Buttons 2017 in Stockholm. #fbtb17

Transcript

1. Dawn Ressel | Design Strategist 27 April 2017 Evolving design systems for flexibility and scale
2. Introduction
3. 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
4. “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
5. 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.
6. Intuit Design System
7. Intuit Confidential and Proprietary 7 Powering Prosperity Around the World
8. 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.
9. Intuit Confidential and Proprietary 9 ONE ECOSYSTEM One Intuit Ecosystem
10. Intuit Confidential and Proprietary 10 BEFORE: Sign In Buttons
11. Intuit Confidential and Proprietary 11 AFTER: Sign In Button
12. 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 …
13. Intuit Confidential and Proprietary 13 Design System Elements Color Palette Typography & Spacing AvenirNext Brand Logos Mobile Icons Responsive & Atomic Grid 4PX GRID
14. 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
15. Evolving for Flexibility
16. In order to be a true design system, it must have a single source of truth. In code.
17. Intuit Confidential and Proprietary 17 One Intuit Continuum 10% FAMILY 40% FAMILY 80% FAMILY 100% FAMILY HOUSE OF BRANDS BRANDED HOUSE
18. 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
19. Intuit Confidential and Proprietary 19 Example Spec: Fixed/Flexible
20. Evolving for Scale
21. Intuit Confidential and Proprietary 21 What is a widget? Example: Google Maps - Core to businesses - Familiar experience - Best practices baked in - Configurable
22. 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
23. Account recovery: dramatically increased user success rates
24. Substantial Benefits: Widgets improve productivity & decrease time to market
25. Intuit Confidential and Proprietary 25 1 widget Minutes to adopt One Intuit Identity One widget orchestrates complex interactions
26. 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.
27. Designer + Technologist Partnership
28. Design (system) intent is manifested through code. - Eric Knudtson
29. 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
30. Component libraries + widgets + theming allow you to scale the intent of both visual and interaction design.
31. Intuit Confidential and Proprietary 31 CSS Guidelines
32. Intuit Confidential and Proprietary 32 Propagating design values globally
33. THANK YOU @uxdawn