Intuit Design System Journey to Beautifully Seamed Experiences
•Download as PPTX, PDF•
4 likes•2,918 views
You'll learn: - How to create a consistent design language across product lines - When and where to allow for exceptions to the design language - How to create the infrastructure to support coherent design
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Intuit Design System Journey to Beautifully Seamed Experiences
Similar to Intuit Design System Journey to Beautifully Seamed Experiences (20)
More from uxpin
More from uxpin (20)
Recently uploaded
Recently uploaded (20)
Intuit Design System Journey to Beautifully Seamed Experiences
- 1. February 15, 2017 Beautiful Seams: the origin of the Intuit Design System
- 2. Our Journey, so far…
- 3. Intuit Confidential and Proprietary 3 Deliver beautifully seamed ecosystem experiences across all Intuit products... So that, together, we can simplify the ‘business’ of life. The Vision
- 4. Intuit Confidential and Proprietary 4 The Vision
- 5. Intuit Confidential and Proprietary 5 Where we started…just a year ago
- 6. Intuit Confidential and Proprietary 6
- 7. Intuit Confidential and Proprietary 7 Intuit, a shared last name
- 8. Intuit Confidential and Proprietary 8 the Intuit Design System has Five Tracks STRUCTURAL ELEMENTS COMMON BRAND ELEMENTS ALIGNED ECOSYSTEM FLOWS UI COMPONENTS WIDGETS Logos, Typeface, Color Palette … Mint to Tax, QuickBooks Self-Employed to Tax … Intuit Identity, Bank Connect, Bill Pay … Checkboxes, Buttons, Tables, Loading graphics … Atomic & Responsive Grids, Typescale …
- 9. Intuit Confidential and Proprietary 9 FROM TO Many product design systems across Intuit, with unintentional differences A unified system across Intuit, with intentional and meaningful differences made explicit Duplication of design & engineering effort Unified design and engineering efforts across the ecosystem, with design patterns built in code that integrates with all our products Awkward transitions between products Beautiful seams Out of date design documentation Design always up to date in production code A suite of products unrecognizable as all being from Intuit A suite of products that feel like a family, with each member having its own personality, and all are recognizable as coming from Intuit Intuit Wins with IDS
- 11. Intuit Confidential and Proprietary 11 the basics Color Palette Typography AvenirNext Brand Identities Mobile Icons Responsive & Atomic Grid 4PX GRID UI Components
- 12. Intuit Confidential and Proprietary 12 Intuit Confidential and Proprietary12 Color Palette
- 13. Intuit Confidential and Proprietary 13 Intuit Confidential and Proprietary13 Shared Foundations: Typeface
- 14. Intuit Confidential and Proprietary 14 Intuit Confidential and Proprietary14 Our Identities, Familial & Familiar
- 15. Intuit Confidential and Proprietary 15 Atomic & Responsive Grid 4px atomic grid 12 column responsive grid
- 16. Our ‘Canary in the Coal Mine’: the Sign-in button
- 17. Intuit Confidential and Proprietary 17 Not ‘Meaningfully Different’
- 18. Intuit Confidential and Proprietary 18 The IDS Sign In Button
- 19. Our first Beautiful Seam: Turbo Tax to QuickBooks, Self-Employed
- 20. Intuit Confidential and Proprietary 20 Approach
- 21. Intuit Confidential and Proprietary 21 Usage Guidelines For use when QuickBooks Self- Employed is mentioned in headline or body copy For use when QuickBooks Self-Employed is not mentioned, or unable to be included, in headline or body copy For use in product and when promoting the combined offerings of both TurboTax and QuickBooks
- 22. Intuit Confidential and Proprietary 22 Usage: TurboTax experience flow
- 23. Intuit Confidential and Proprietary 23 Usage: Cornerstone to Cornerstone
- 24. Intuit Confidential and Proprietary 24
- 25. How we’re set up to evolve & grow
- 26. Intuit Confidential and Proprietary 26 Mission-Based Teams: • Common assets are designed and built by a mission-based cross-functional crew composed of Business Unit & Functional Group team members Benefits: • Tight coupling between production and consumption • BU ownership and buy-in, more flexible contribution Goal: Reuse, Cohesion, Productivity Mission based staffing model
- 27. Intuit Confidential and Proprietary 27 Operating Rhythm IDS Sponsors meeting Monthly Working Team Interactions Daily through Slack channel IDS Core Team meeting Twice a week IDS Design review Bi-weekly
- 28. Intuit Confidential and Proprietary 28 Tayloe Stansbury, CTO Sponsors James Helms Mike Tschudy Business Unit leads (IDS) Kurt Walecki, Driver X-Team DRIVER Eric Knudtsen, Prototyper Lisa Towell, PMO Michelle SarkoHugh Macdonald Joe Preston Dawn Ressel, Designer Business Unit leads (App Fabric) Elangovan Shanmugam Brian LewisJay Yu Anshu Verma Ray Chan Approvers Kurt Walecki, VP Design TurboTax Lucas Watson, CMO Leslie Witt, VP Design QuickBooks App Fabric Stewards Nedda Cox Steve Lin
- 29. Thanks.
Editor's Notes
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- This is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.
- XD
- Joe PThis is a sample INTRODUCTION using the 1-Column layout. Placeholder text boxes that appear as part of the selected layout have predefined fonts, sizes and colors. To change the appearance of any line of text, on the Home tab, in the Paragraph group, click Increase Indent or Decrease Indent. The selected text will reformat to the predefined size according to its indent level. Note: Any changes to the color, size, spacing or font in the placeholder text box will break its connection to the Master style. It will no longer automatically conform when switching between layouts or when imported into another presentation.