Slide 1
Slide 1 text
Design at Scale
Faster, Better UX via Design Systems
Dane Petersen
@thegreatsunra
Karel Barnoski
@karelbarnoski
Lean Day West Portland, OR | September 16, 2013
Slide 2
Slide 2 text
HOUSEKEEPING
Install a text editor
Sublime Text is great on PC and Mac
Download the zip file
http://tr.im/4dkrc
Introduce yourself to the people at your table and
make sure at least one of you knows HTML/CSS
If everyone at your table knows
HTML/CSS, please consider sharing
your wisdom with another table!
Slide 3
Slide 3 text
Introductions
Slide 4
Slide 4 text
Dane Petersen
Lead Interaction Designer
GE Aviation
Karel Barnoski
Lead Interaction Designer
GE Energy
☼
Slide 5
Slide 5 text
OUR PLAN FOR TODAY
Learn about design systems
Moving quickly from concept to creation
Sketch an app for your smart home
Use a design system to convert that sketch into code
Slide 6
Slide 6 text
1:00–1:10 Settle In & Introductions (10min)
1:10–1:20 Our Perspective (10min)
1:20–1:30 Sketching (10min)
1:30–2:30 Sketch Activity (60 min)
2:30–2:45 Break (15 min)
2:45–3:00 Design Systems (15 min)
3:00–3:15 Coding (15 min)
3:15–4:15 Coding Activity (60 min)
4:15–4:30 Wrap Up (15 min)
TODAY’S SCHEDULE
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Go for it!
Slide 10
Slide 10 text
Questions?
Slide 11
Slide 11 text
Our Perspective
Slide 12
Slide 12 text
We are GE
Slide 13
Slide 13 text
GE is huge
121 years old
300,000 employees
14,000 developers
$147 billion revenue
$13 billion income
Slide 14
Slide 14 text
GE is huge
121 years old
300,000 employees
14,000 developers
$147 billion revenue
$13 billion income
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
machines
Slide 23
Slide 23 text
machines
analytics
Slide 24
Slide 24 text
machines
analytics
people
Slide 25
Slide 25 text
machines
analytics
people
The Industrial Internet
Slide 26
Slide 26 text
Help people create elegant, powerful
and extensible experiences for the
Industrial Internet
OUR MISSION
Slide 27
Slide 27 text
Lean UX + Design Systems + Agile
Slide 28
Slide 28 text
LEAN UX CASE STUDY
5 intense days of cross-functional collaboration
Worked side-by-side with several energy customers
Sketched and built a prototype to get user feedback
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Overview!
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Sketching
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
GE HAS A SKETCHING CULTURE
Slide 44
Slide 44 text
Externalizing Your Work
Making Over Analysis
Shared Understanding
Permission to Fail
FOUR LEAN UX PRINCIPLES
Slide 45
Slide 45 text
Sketching is all about getting
ideas out of your head.
SKETCHING IS EXTERNALIZING YOUR WORK
Slide 46
Slide 46 text
Sketching is all about getting
ideas out of your head.
Thinking only exercises one
part of your brain. Looking
engages more of your brain.
Getting sketches in front of
coworkers and users
engages their brains too.
SKETCHING IS EXTERNALIZING YOUR WORK
Slide 47
Slide 47 text
Make to think!
Over-analyzing a problem
can lead to fear that you’re
missing something, which
leads to analysis paralysis.
Making rough things helps
you get a direct response
from your target users.
SKETCHING IS MAKING OVER ANALYSIS
Slide 48
Slide 48 text
Sketching minimizes
competition between
different ideas.
SKETCHING HELPS SHARED UNDERSTANDING
Slide 49
Slide 49 text
Sketching minimizes
competition between
different ideas.
It turns the idea into a
third party that everyone
is free to critique.
SKETCHING HELPS SHARED UNDERSTANDING
Slide 50
Slide 50 text
Your first solution probably
won’t be your best one.
Use paper to make your
mistakes cheaply and quickly.
And then make some more!
SKETCHING IS ALL ABOUT RAPID FAILURE
Slide 51
Slide 51 text
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remember...
SKETCHING IS NOT DRAWING
Slide 52
Slide 52 text
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remember...
SKETCHING IS NOT DRAWING
Slide 53
Slide 53 text
Activity #1: Sketching
Slide 54
Slide 54 text
Blank paper
Sticky notes
Sharpies!
YOUR TOOLS, YOUR FRIENDS
Slide 55
Slide 55 text
Theme: The Smart Home Manager
ACTIVITY #1: SKETCHING
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Theme: The Smart Home Manager
Think of all the connected things in your home
Imagine a system that lets you view and
manage all of those things
ACTIVITY #1: SKETCHING
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Sketch as an individual (15 min)
Share your sketches with your team (1 min per person)
Establish a design direction as a team (5 min)
As a team, iterate on your shared design (15 min)
Present your design to the other teams (1 min per group)
ACTIVITY #1: SKETCHING
Slide 66
Slide 66 text
Feeling stuck?
Start with words
One idea per sticky
Quantity over quality
Cluster and iterate
ACTIVITY #1: SKETCHING
Slide 67
Slide 67 text
Feeling stuck?
Who uses it?
What does it do?
Where do they use it?
When do they use it?
How do they use it?
Why would they use it?
ACTIVITY #1: SKETCHING
Slide 68
Slide 68 text
Nice work!
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Break
15 minutes
Slide 71
Slide 71 text
1:00–1:10 Settle In & Introductions (10min)
1:10–1:20 Our Perspective (10min)
1:20–1:30 Sketching (10min)
1:30–2:30 Sketch Activity (60 min)
2:30–2:45 Break (15 min)
2:45–3:00 Design Systems (15 min)
3:00–3:15 Coding (15 min)
3:15–4:15 Coding Activity (60 min)
4:15–4:30 Wrap Up (15 min)
TODAY’S SCHEDULE
Slide 72
Slide 72 text
Design Systems
Slide 73
Slide 73 text
A design system is a collection of visual and
interaction elements that embodies the brand
The system is often expressed across many
channels including web, mobile, desktop, and
service so that a consistent user experience
is produced
Slide 74
Slide 74 text
Logo. A visual metaphor and often the most recognizable part of a design system.
COMPONENTS OF A DESIGN SYSTEM
Color. A consistent color palette supports the system by communicating brand tone.
Imagery. Enhances core qualities of the brand and provides recognizable anchors.
Structure. Organizes content and interface for software and hardware design.
Messaging. Expresses intangible emotional values and purpose or instruction.
Typography. A recognizable brand element that reinforces a unified experience.
Interaction. Patterns for interacting with UI elements creating a quality experience.
Slide 75
Slide 75 text
DIETER RAMS - BRAUN 1955-1995
Slide 76
Slide 76 text
PHYSICAL WORLD
Slide 77
Slide 77 text
DESIGN SYSTEMS ARE NOTHING NEW
Slide 78
Slide 78 text
HARDWARE & SOFTWARE
Slide 79
Slide 79 text
GE Design Systems
Slide 80
Slide 80 text
SHARING DESIGN SYSTEMS WITH OTHERS
Slide 81
Slide 81 text
MARKETING DESIGN SYSTEM
Slide 82
Slide 82 text
HEALTHCARE DESIGN SYSTEM
Slide 83
Slide 83 text
MOBILE DESIGN SYSTEM
Slide 84
Slide 84 text
TABLET DESIGN SYSTEM
Slide 85
Slide 85 text
INDUSTRIAL INTERNET DESIGN SYSTEM
Slide 86
Slide 86 text
INDUSTRIAL INTERNET DESIGN SYSTEM
Slide 87
Slide 87 text
Speed application development
Improve software UI quality
Enable extension and reuse
Support additional verticals & external partners
Minimize ongoing support needs
INDUSTRIAL INTERNET DESIGN GOALS
Slide 88
Slide 88 text
DESIGN TEMPLATES
Slide 89
Slide 89 text
DESIGN TEMPLATES
Slide 90
Slide 90 text
DESIGN TEMPLATES
Slide 91
Slide 91 text
DESIGN TEMPLATES
Slide 92
Slide 92 text
Prototyping in Code
Slide 93
Slide 93 text
The Industrial Internet Design System (IIDS)
A code-based design framework that
establishes visual and interactive patterns for
all of GE’s industrial internet software
Slide 94
Slide 94 text
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
Slide 95
Slide 95 text
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
Slide 96
Slide 96 text
Slide 98
Slide 98 text
— Bootstrap
Slide 99
Slide 99 text
—
Slide 100
Slide 100 text
—
Slide 101
Slide 101 text
—
Slide 102
Slide 102 text
— D3.js
Slide 103
Slide 103 text
—
Slide 104
Slide 104 text
—
Slide 105
Slide 105 text
—
Slide 106
Slide 106 text
Bootstrap
DataTables
express
{
D3.js
Font Awesome
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
Activity #2: Coding
Slide 114
Slide 114 text
Install a text editor:
Sublime Text is great on PC and Mac
Download the zip file:
http://tr.im/4dkrc
Slide 115
Slide 115 text
OPEN SOURCE DESIGN SYSTEMS
Slide 116
Slide 116 text
BOOTSTRAP_LDW.ZIP
Slide 117
Slide 117 text
FLUID.HTML
Slide 118
Slide 118 text
FLUID.HTML
Slide 119
Slide 119 text
BOOTSTRAP_LDW/DOCS
Slide 120
Slide 120 text
BASE-CSS.HTML
Slide 121
Slide 121 text
BASE-CSS.HTML#BUTTONS
Slide 122
Slide 122 text
SCAFFOLDING.HTML#GRIDSYSTEM
Slide 123
Slide 123 text
Turn your sketches into an interactive prototype
for your Smart Home Manager
ACTIVITY #2: CODING
Slide 124
Slide 124 text
ACTIVITY #2: CODING
As a team, figure out which part of your Smart Home
Manager each of you is going to work on (5 min)
As an individual, start prototyping your part (20 min)
Share your progress with your team (1 min per person)
Iterate on your part in response to team feedback (15 min)
Slide 125
Slide 125 text
EXTRA CREDIT
Create a GitHub repository to collaborate with your team
Slide 126
Slide 126 text
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
Slide 127
Slide 127 text
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
Slide 128
Slide 128 text
Nice work!
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
Thank you!
Dane Petersen
@thegreatsunra
Karel Barnoski
@karelbarnoski