16. ATypography Color Iconography
VIEW
The Universe!
It’s the biggest place.
THE SOLAR SYSTEM
A slightly smaller place.
Space
UNIT: Space
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
17. ATypography Color Iconography
VIEW
The Universe!
It’s the biggest place.
THE SOLAR SYSTEM
A slightly smaller place.
EDIT
Space
UNIT: Space
My Earth!
It’s my biggest place.
MySpace
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
23. Framing a Design System’s Roadmap bit.ly/8s-system-roadmap
What We Could Do
What We Will Do, By When
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
28. CRITERIA
A DESIGN SYSTEM MISSION
Create efficient tooling
& collabora/ve connecBons
to support scaling & shipping
cohesive, high-quality experiences
PARTS
PEOPLE
PRODUCTS
WHY
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
30. A DESIGN SYSTEM’S REACH
∞ A World’s PlaUorm
100 An Enterprise’s Language
10 A PorUolio’s Guide
1 A Team’s Playbook
A Design System’s Reach bit.ly/8s-system-reach
http://foundation.zurb.comhttp://www.google.com/desharmony.intuit.comhttp://ux.mailchimp.com/patt
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
42. The demo convinced
anyone in 1 minute,
leaving me 59 minutes to
dig into heTier topics
@livlab
“
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
51. InformaAon architecture
InteracAon design
User experience
Visual design
WriAng
Front-end dev
Design research
Content strategy
Systems engineering
Product management
etc…
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
#3. ENSURE SKILLS REPRESENT PARTS
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
52. MODEL 3: FEDERATED
Team Models for Scaling a Design System bit.ly/8s-system-team-models
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
53. The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model
AT SALESFORCE, A “CYCLICAL” TEAM MODEL
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
55. @CAP’S SLIDING SCALE OF GIVING A F@#$
0 2 4 6 8 10
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
56. @CAP’S SLIDING SCALE OF GIVING A F@#$
Hold on a second. I’m like a two-out-of-
ten on this. How strongly do you feel?
I’m probably a six-out-of-ten.
Cool, then let’s do it your way.
0 2 4 6 8 10
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
58. #5. DESIGNATE “GO TO”S, NOT DECIDERS
C
Content
I
Interaction
V
Visual
X
user eXperience
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
59. #6. MIX DOERS WITH DELEGATORS
D = Director
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
61. Alignment work wasn't enjoyable.
This Project Rocked! That Project Sucked! bit.ly/8s-projects-rocked-sucked
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
62. Familiar role as…
• Maker (design & dev)
• Writer
• Collaborator
• Reviewer
#7. EMBRACE NEW RESPONSIBILITIES
New idenAty as…
• Product Manager
• Editor-in-chief
• Seller
• Evangelist
• Connector
• Aligner
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
64. First things first: You must have total
support from the top.
[A Google-wide design iniAaAve] required the vision
of a CEO who could rally the enAre company to
make it happen.
@jonwiley
“
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
65. A style guide is an ARTIFACT of design process.
A design system is a living, funded PRODUCT
with a roadmap & backlog, serving an ecosystem.
A Design System isn’t a Project. It’s a Product, Serving Products. bit.ly/8s-system-is-product
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016