Beyond the Toolkit (Nathan Curtis at Enterprise UX 2016)

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


Account Hub


Web Site

Account Setup

Account Hub

“I WANT A SYSTEM FOR THIS. ALL OF THIS.”


IS THIS COHESIVE?


NEW


NEW

Bu#ons in Design Systems bit.ly/8s-bu6ons-in-design-systems


NEW

Color in Design Systems bit.ly/8s-color-in-design-systems


AEnterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016

ATypography Color Iconography

A DESIGN LANGUAGE’S BIG 3



Space MoAon Imagery Logo WriAng tone


VIEW




VIEW

The Universe!

It’s the biggest place.

Space



VIEW

The Universe!


THE SOLAR SYSTEM A slightly smaller place.

Space

UNIT: Space



VIEW

The Universe!


THE SOLAR SYSTEM A slightly smaller place.

EDIT

Space

UNIT: Space

My Earth! It’s my biggest place.

MySpace


CHALLENGE

“What PARTS are in it?”


Picking Parts, Products & People bit.ly/8s-parts-products-people


Component Cut-Up Workshop bit.ly/8s-component-cut-up

1. Cut 2. Group 3. Label Groups

4. Tape 5. PrioriOze 6. Label Components


http://www.behance.net/gallery/Google-Product-Redesign/4315369


BEFORE

AFTER

EARLY CONCEPTS ON PUBLIC WALL


Framing a Design System’s Roadmap bit.ly/8s-system-roadmap

What We Could Do

What We Will Do, By When


www.google.com/design/spec/material-design/ h6ps://getmdl.io/index.html

DESIGN SPEC CODE LIBRARY


MISSION ACCOMPLISHED We just launched our living style guide!


CRITERIA

A DESIGN SYSTEM MISSION

Create efficient tooling & collabora/ve connecBons to support scaling & shipping

cohesive, high-quality experiences

PARTS

PEOPLE

PRODUCTS

WHY


CHALLENGE

“What PRODUCTS does it reach?”


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


Web Site

Account Setup

Account Hub


Web Site

Account Setup

Account Hub

#1. CHOOSE FLAGSHIPS THAT’LL COMMIT TO YOU, TOO

icons: all-silhouettes.com


#2. CHOOSE BETWEEN 3 AND 5


#3. USE THEIR LAUNCH DATE(S), OR MAKE YOUR OWN


Home

ProductsTraining

Services

About Us

SoluAons

#4. WHAT’S YOUR GET?

SupportSupport


#5. AVOID DISTRACTIONS

Products

Support

Training

Services

About Us

SoluAons

HomeHome


Products

Support

Training

Services

About Us

SoluAons

Home

#6. HOOK THE SYSTEM WITH CODE THEY USE


Home

Account

Hotel

Search Book

“Content”

iPhone iPad Android

WEB APPS

WEB “SITES”

NATIVE APPS


Home

Account

Hotel

Search Book

“Content”

iPhone iPad Android

WEB APPS

WEB “SITES”

NATIVE APPS

#7. RADIATE INFLUENCE FROM WEB APPS


SBtching Prototypes bit.ly/8s-sAtching-prototypes

#8. DEMO VALUE ACROSS THE JOURNEY


The demo convinced anyone in 1 minute, leaving me 59 minutes to dig into heTier topics

@livlab

“


CHALLENGE

“What PEOPLE are involved?”


sun.com/webdesign (now defunct)


#1. OVERLORDS DON’T SCALE


MODEL 1: SOLITARY


MODEL 2: CENTRALIZED


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


https://vimeo.com/121037431


h6ps://twi6er.com/jina/status/661589501395861504

#2. IT’S A JOB THAT PAYS. DEFINE IT THAT WAY.


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


MODEL 3: FEDERATED

Team Models for Scaling a Design System bit.ly/8s-system-team-models


The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model

AT SALESFORCE, A “CYCLICAL” TEAM MODEL


DRIVING

INFLUENCING

CONNECTING

WATCHING

IGNORING

#4. FIND YOUR CONNECTOR


@CAP’S SLIDING SCALE OF GIVING A F@#$

0 2 4 6 8 10


@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


I Interaction

V Visual

U User experience


#5. DESIGNATE “GO TO”S, NOT DECIDERS

C Content

I Interaction

V Visual

X user eXperience


#6. MIX DOERS WITH DELEGATORS

D = Director


MAKING ALIGNING

DESIGN? BRANDPRODUCT DEV OPS


Alignment work wasn't enjoyable.

This Project Rocked! That Project Sucked! bit.ly/8s-projects-rocked-sucked


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


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


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

“


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


THANKS!


Beyond the Toolkit (Nathan Curtis at Enterprise UX 2016)

Design

Transcript of Beyond the Toolkit (Nathan Curtis at Enterprise UX 2016)