A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.

1. NOVAUX, Tysons Corner, VA • December 2015
SYSTEMS:
PARTS, PRODUCTS,
& PEOPLE
Nathan Curtis
@nathanacurtis

2. HELLO!
Nathan Curtis
@nathanacurtis
@nathanacurtis
linkedin.com/in/nathancurtis

3. @components

4. NOT COHESIVE
.com Investors Shop Android

6. COHESIVE?

7. www.google.com/design/spec/material-design/

8. http://www.ibm.com/design/language http://harmony.intuit.com/http://style.codeforamerica.org/
http://solid.buzzfeed.com/https://www.lightningdesignsystem.com/ playbook.cio.gov/designstandards/
LIVING STYLE GUIDES AND SYSTEMS ARE EVERYWHERE!

9. MISSION ACCOMPLISHED
We just launched our living style guide!

10. REMEMBER THE REAL MISSION
Create efficient tooling &
collaborative connections that ship
cohesive, high-quality products

11. A DESIGN SYSTEM IS…

12. Our system is (ultimately) an HTML/CSS playbook
for 1 product team to build a consistent design.
http://ux.mailchimp.com/patterns

13. Our system is a design spec, asset library and/or
(maybe) supporting HTML/CSS for our 10 product
teams to share a consistent design.
harmony.intuit.com

14. http://www.google.com/design/
Our system is a design spec, asset library, and
structured collaborative activity across 100
products to spread a cohesive design.

15. http://www.google.com/design/
The system is a toolkit (often, HTML/CSS)
customized by independent teams on ∞ products
to produce effective design efficiently.
http://foundation.zurb.com/

16. DESIGN SYSTEMS, SCALED
1
Our system is (ultimately) an HTML/CSS
playbook for 1 product team to build a
consistent design.
So many of my own
projects over the years
10
Our system is a design spec, asset library and/
or (maybe) supporting HTML/CSS for our 10
product teams to share a consistent design.
Red Gate, Intuit
Harmony, Marriott (my
time in 2013-14)
100
Our system is a design spec, asset library, and
structured collaborative activity across 100
products to spread a cohesive design.
IBM, Google, GE,
big orgs across many
platforms
∞
The system is a toolkit (often, HTML/CSS)
customized by independent teams on ∞
products to produce effective design efficiently.
Bootstrap, Mac OSX,
Google Material (&
Lite), Code for America

17. A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.
WHAT IS A DESIGN SYSTEM?
PRACTICES
PARTS PEOPLE
PRODUCTS

18. PARTS

19. CHALLENGE
“What parts go in it?”

20. A

21. A

22. ATypography Color Iconography

23. ATypography Color Iconography
Space Motion Imagery Logo Writing tone What else
A DESIGN LANGUAGE’S MOST COMMON THREE:
…AND THE REST:

24. UI ELEMENTS

25. UI COMPONENTS

26. PAGE TEMPLATES
http://www.getmdl.io/templates/index.html

27. LAYOUT SYSTEMS
http://purecss.io/grids/

28. PATTERNS: SIGN IN

29. EDITORIAL

30. CODE http://www.getmdl.io/components/index.html#cards-section

31. BRANDING RESEARCH/USERS
like personas, mental models
PRACTICES
like accessibility, SEO
VS
DESIGN TEMPLATES
like swatches, layouts
GOVERNANCE
like reviews, audits
PROCESS
like requests, contributing
UTILITIES
like mixing, helpers
MORE AND MORE PARTS…

32. PARTS, BY TIME ON SITE
DESIGN LANGUAGE
UI ELEMENTS
UI COMPONENTS
LAYOUTS
BRANDING
EDITORIAL
BEST PRACTICES
ASSETS
ABOUT THE PROGRAM
GLOBAL
Online style guide with broad coverage, much spec (280 articles), & little code.
ICONS COLOR TYPE
BUTTON
SITE NAV
PUNCUTATION/
FORMATS
ACCESSIBILITY

33. DESIGN LANGUAGE
Color
Palettes, by category
Contrast
Meaning
Swatches
UI ELEMENTS
Paragraph
Lead paragraph
Block quote
Headers (H1 - H6)
Lists
Links
Code
Typography
Hierarchy
Weights / types
Web fonts
Baseline grid
Buttons
Primary
Secondary
Button groups
Menu buttons
Split buttons
FAB (floating action)
Iconography
Pictograms
Illustration
Icon fonts
Alignment
Form controls
Text
Variants (email, etc)
Text area
Radio
Checkbox
Select
Motion
Principles
Timing
Types
Transitions
Form controls, cont’d
File upload
Labels
Floating labels
Microcopy
Required
Validation
Space
Units / measurments
Metrics and keylines
Structure
Photography
Divider / rule
Switch
Slider
Image
Block
Full bleed
Inline with positions
UI COMPONENTS
Action bar/sheet
Back to top
Badges
Breadcrumbs
Calendar picker
Caption
Cards
Chat (live)
Code block
Comments
Contact us
Cookie notification
Data tables
Dialog
Drawer/accordion
Filters
Footer
Footnotes
Header
Hero billboard
Hero carousel
Legend
Loading / spinner
Local navigation
Maps
Menu
Messaging
Toast
Block
Inline error
Modal
Nav Megamenu
Pagination
Progress bar
Pull quote
Ratings
Reviews
Rich text editor
Search
Sidebar
Site/App navigation
Social networking
Status (alpha, beta,...)
Tabs
Tags / chips / pills
Thumbnails / #-ups
Tips / tutorial
Toolbar
Tooltips
Video & media
UI PATTERNS
Authentication
Create account
Database connection
Form structure
Launch
EDITORIAL
Voice & tone
Writing for the web
Word list
Capitalization
Punctuation
DOWNLOADS
Templates (PSD,...)
Swatch palettes
Fonts
Icons
Code
Permissions
Purchase/checkout
Settings
Site / app structure
Swipe to refresh
BRANDING
Identity
Logo(s)
Tagline(s)
Partnerships
Themes
GETTING INVOLVED
Request New Parts
Give Feedback
Request Audit
Present at a Share
Contribute
PAGE TEMPLATES
Home
Category
Product
Dashboard
Article
RESEARCH & USERS
User needs
Personas
Research techniques
Surveys
A/B, multivar. testing
ABOUT THE PROGRAM
Home page
Principles / pillars
Getting started
FAQ
Version history
Search results
Contact us
Getting started
Discussion
Gallery
PRACTICES
Accessibility
Prototyping
Performance
SEO
Design thinking
ABOUT THE TEAM
Team
Recruiting / jobs
LAYOUT SYSTEMS
Grids for sites
Grids for apps
Paneling/transitions
Responsive/breakpoints
Screen sizes
CODING
Style
Browsers & devices
Environments
Prog. enhancement
Version control
UTILITIES
Mixins
Helpers
Customize
Variables / tokens
YOUR NAME
OTHER?
DATEPARTS
PARTS WORKSHEET

34. 1. Irrelevant Categories: Draw a strong
line / X through categories irrelevant
to your system.
2. Relevant Categories: Circle the labels
of up to 5 categories most relevant to
your system.
3. Relevant Parts: Check up to 25 parts
most relevant to your system, across
any category.
4. Important Parts: Circle the checks of
the top 10 most important parts.
PARTS WORKSHEET
Color
Color

36. PRODUCTS

37. CHALLENGE
“What products is it for?”

38. Home
Account
Hotel Search Book
“Content” iPhoneiPad
Android

39. WEB APPS
.com
Web App 1 Web App 2
ADDITIONAL APPS
Win App 1
Win App 2 Win App 3
WEB SITES

40. Community Site
Community Site
Brochures
Events
MARKETING
Win App 1
Win App 2 Win App 3
SITES
WEB APPS
ADDITIONAL APPS
.com
Web App 1 Web App 2

41. WWGD?
(What would Google do?)

42. Search Mail Maps Chrome Calendar

43. Flagship Secondary Long Tail?

45. DO
Identify core flagship products
you bond together the most
Prioritize other products that matter
less to tier engagement
DO
Search Mail
Maps Chrome
Calendar News
Santa TrackerRemote
TERTIARY?
SERIOUSLY?REMOTE?
SECONDARY?

46. KNOW YOUR PRODUCTS? CAN YOU PRIORITIZE?

48. PEOPLE

49. PEOPLE CHALLENGE
“Who’s gonna do the work?”

50. MODEL 1: SOLITARY

51. OVERLORDS
DON’T SCALE

52. MODEL 2: CENTRALIZED

53. https://vimeo.com/121037431

54. MODEL 2: CENTRALIZED
PROS
• spread system broadly
• free(er) from bias
• watching for opps
• solicit & manage requests
CONS
• lacks context & visibility
• lacks power to foster participation
• lower influence

55. https://twitter.com/jina/status/661589501395861504

56. SKILLS
Information architecture
Interaction design
User experience
Visual design
Writing
Front-end dev
Design research
Content strategy
Systems engineering
Product management
etc…

57. ROLES
One person as…
• Product owner
• Editor-in-chief
• Curator
Many people as…
• “Maker”
(design & dev, usually)
• Writer
• Influencer
(director+, usually)

58. MODEL 3: FEDERATED

59. CORE TEAM WITH LEADS BY DISCIPLINE
C
Content
I
Interaction
V
Visual
X
eXperience

60. DRIVING
INFLUENCING
FACILITATING
WATCHING
IGNORING

61. First things first: You must have
total support from the top.
[A Google-wide design initiative] required the
vision of a CEO who could rally the entire
company to make it happen.
@jonwiley
“

62. CORPORATE HIERARCHY = ALIGNMENT!
DIGITAL? BRANDPRODUCT TECH
DOING SYSTEM WORK ALIGNING

63. Team Models for Scaling a
Design System
Evolving Past Overlords to Centralize or Federate
Design Decision-Making Across Platforms
http://bit.do/scaled-team-models

64. https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b

66. Discussion

67. DESIGN SYSTEMS
@EIGHTSHAPES
WORKSHOPS
Intro to Systems
Modular Web Design
Component Cut Up
Designing Living Guides
COACHING PROJECTS
Assess
Discover & Plan
Design & Build
System Management

68. THANKS!
Nathan Curtis
@nathanacurtis
@nathanacurtis
linkedin.com/in/nathancurtis