Post on 18-Jan-2017
Enterprise UX — San Antonio, TX — Thursday June 9, 2016
Nathan Curtis @nathanacurtis
BEYOND THE TOOLKIT
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
DAY 1: ALL-HANDS DESIGN LEADERSHIP MEETING
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Account Hub
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Web Site
Account Setup
Account Hub
“I WANT A SYSTEM FOR THIS. ALL OF THIS.”
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
IS THIS COHESIVE?
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
NEW
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
NEW
Bu#ons in Design Systems bit.ly/8s-bu6ons-in-design-systems
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
NEW
Color in Design Systems bit.ly/8s-color-in-design-systems
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
AEnterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
AEnterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
ATypography Color Iconography
A DESIGN LANGUAGE’S BIG 3
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
ATypography Color Iconography
Space MoAon Imagery Logo WriAng tone
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
VIEW
ATypography Color Iconography
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
ATypography Color Iconography
VIEW
The Universe!
It’s the biggest place.
Space
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
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
CHALLENGE
“What PARTS are in it?”
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Picking Parts, Products & People bit.ly/8s-parts-products-people
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Component Cut-Up Workshop bit.ly/8s-component-cut-up
1. Cut 2. Group 3. Label Groups
4. Tape 5. PrioriOze 6. Label Components
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
http://www.behance.net/gallery/Google-Product-Redesign/4315369
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
BEFORE
AFTER
EARLY CONCEPTS ON PUBLIC WALL
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
www.google.com/design/spec/material-design/ h6ps://getmdl.io/index.html
DESIGN SPEC CODE LIBRARY
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
MISSION ACCOMPLISHED We just launched our living style guide!
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
CHALLENGE
“What PRODUCTS does it reach?”
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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.com/http://www.google.com/design/harmony.intuit.comhttp://ux.mailchimp.com/patterns
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Web Site
Account Setup
Account Hub
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Web Site
Account Setup
Account Hub
#1. CHOOSE FLAGSHIPS THAT’LL COMMIT TO YOU, TOO
icons: all-silhouettes.com
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
#2. CHOOSE BETWEEN 3 AND 5
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
#3. USE THEIR LAUNCH DATE(S), OR MAKE YOUR OWN
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Home
ProductsTraining
Services
About Us
SoluAons
#4. WHAT’S YOUR GET?
SupportSupport
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
#5. AVOID DISTRACTIONS
Products
Support
Training
Services
About Us
SoluAons
HomeHome
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Products
Support
Training
Services
About Us
SoluAons
Home
#6. HOOK THE SYSTEM WITH CODE THEY USE
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Home
Account
Hotel
Search Book
“Content”
iPhone iPad Android
WEB APPS
WEB “SITES”
NATIVE APPS
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
Home
Account
Hotel
Search Book
“Content”
iPhone iPad Android
WEB APPS
WEB “SITES”
NATIVE APPS
#7. RADIATE INFLUENCE FROM WEB APPS
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
SBtching Prototypes bit.ly/8s-sAtching-prototypes
#8. DEMO VALUE ACROSS THE JOURNEY
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
CHALLENGE
“What PEOPLE are involved?”
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
sun.com/webdesign (now defunct)
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
#1. OVERLORDS DON’T SCALE
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
MODEL 1: SOLITARY
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
MODEL 2: CENTRALIZED
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
MODEL 2: CENTRALIZED
PROS
• Spread broadly
• Free from bias
• Pay attention for opportunities
• Solicit & manage requests
CONS
• Lack context & visibility
• Lack power to foster participation
• Lower influence
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
https://vimeo.com/121037431
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
h6ps://twi6er.com/jina/status/661589501395861504
#2. IT’S A JOB THAT PAYS. DEFINE IT THAT WAY.
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
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
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
DRIVING
INFLUENCING
CONNECTING
WATCHING
IGNORING
#4. FIND YOUR CONNECTOR
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
@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
@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
I Interaction
V Visual
U User experience
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
#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
#6. MIX DOERS WITH DELEGATORS
D = Director
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
MAKING ALIGNING
DESIGN? BRANDPRODUCT DEV OPS
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
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
h6p://www.slideshare.net/kleinerperkins/design-in-tech-report-2016/26-OverviewGoogles_Products_Are_Perceived_as
Top two ways to improve the design of a company’s products:
1. Have a CEO who makes product design a priority
2. Have an execuOve team that makes product design a priority
#8. GET ENDORSED
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
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
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
THANKS!
Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016