29
February 15, 2017 Beautiful Seams: the origin of the Intuit Design System

Beautiful Seams: The Intuit Design System

  • Upload
    uxpin

  • View
    252

  • Download
    2

Embed Size (px)

Citation preview

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#