Beautiful Seams: The Intuit Design System
Transcript of Beautiful Seams: The Intuit Design System
Intuit v02
February 15, 2017
Beautiful Seams:the origin of the Intuit Design System
Intuit Confidential and Proprietary#Our Journey, so far
Intuit Confidential and Proprietary#Deliver beautifully seamed ecosystem experiences across all Intuit products...So that, together, we can simplify the business of life.
The Vision
Intuit Confidential and Proprietary#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.
3
The Vision
Intuit Confidential and Proprietary#
4
Where we startedjust a year ago
Intuit Confidential and Proprietary#
Intuit Confidential and Proprietary#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.
6
Intuit, a shared last name
Intuit Confidential and Proprietary#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.
7
the Intuit Design System has Five Tracks
STRUCTURALELEMENTSCOMMONBRANDELEMENTSALIGNEDECOSYSTEMFLOWSUI COMPONENTSWIDGETS
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
Intuit Confidential and Proprietary#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.
8
FROMTOMany product design systems across Intuit, with unintentional differencesA unified system across Intuit, with intentional and meaningful differences made explicitDuplication of design & engineering effortUnified design and engineering efforts across the ecosystem, with design patterns built in code that integrates with all our productsAwkward transitions between productsBeautiful seamsOut of date design documentationDesign always up to date in production codeA suite of products unrecognizable as all being from IntuitA 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
Intuit Confidential and Proprietary#A Shared Foundation
Intuit Confidential and Proprietary#the basics
Color PaletteTypographyAvenirNextBrand Identities
Mobile Icons
Responsive & Atomic Grid
4PXGRIDUI Components
Intuit Confidential and Proprietary#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.
11
Color Palette
Intuit Confidential and Proprietary#
Intuit Confidential and Proprietary#
Intuit Confidential and Proprietary13
Shared Foundations: Typeface
Intuit Confidential and Proprietary#
13
Intuit Confidential and Proprietary14
Our Identities, Familial & Familiar
Intuit Confidential and Proprietary#
14
Atomic & Responsive Grid4px atomic grid12 column responsive grid
Intuit Confidential and Proprietary#Our Canary in the Coal Mine:the Sign-in button
Intuit Confidential and Proprietary#
Not Meaningfully Different
Intuit Confidential and Proprietary#The IDS Sign In Button
Intuit Confidential and Proprietary#
18
Our first Beautiful Seam:Turbo Tax to QuickBooks, Self-Employed
Intuit Confidential and Proprietary#Approach
Intuit Confidential and Proprietary#
20
Usage GuidelinesFor use when QuickBooks Self-Employed is mentioned in headline or body copyFor use when QuickBooks Self-Employedis not mentioned, or unable to be included, in headline or body copyFor use in product and when promoting the combined offerings of both TurboTax and QuickBooks
Intuit Confidential and Proprietary#
21
Usage: TurboTax experience flow
Intuit Confidential and Proprietary#Usage: Cornerstone to Cornerstone
Intuit Confidential and Proprietary#
Intuit Confidential and Proprietary#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.
24
How were set up to evolve & grow
Intuit Confidential and Proprietary#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 consumptionBU ownership and buy-in, more flexible contribution
Goal: Reuse, Cohesion, ProductivityMission based staffing model
Intuit Confidential and Proprietary#Operating Rhythm
IDS Sponsors meetingMonthly
Working Team InteractionsDaily through Slack channel
IDS Core TeammeetingTwice a weekIDS Design reviewBi-weekly
Intuit Confidential and Proprietary#XD27
Tayloe Stansbury, CTO
Sponsors
James HelmsMike Tschudy
Business Unit leads (IDS)
Kurt Walecki, Driver
X-Team
DRIVER
Eric Knudtsen, PrototyperLisa Towell, PMOMichelle SarkoHugh MacdonaldJoe PrestonDawn Ressel, DesignerBusiness Unit leads (App Fabric)Elangovan Shanmugam
Brian Lewis
Jay Yu
Anshu Verma
Ray Chan
Approvers
Kurt Walecki, VP DesignTurboTaxLucas Watson, CMOLeslie Witt, VP DesignQuickBooksApp Fabric Stewards
Nedda CoxSteve Lin
Intuit Confidential and Proprietary#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.
28
Thanks.
Intuit Confidential and Proprietary#