Design at Scale
Faster, Better UX via Design Systems
Dane Petersen
@thegreatsunra
Karel Barnoski
@karelbarnoski
Lean Day W...
HOUSEKEEPING
Install a text editor
Sublime Text is great on PC and Mac
Download the zip file
http://tr.im/4dkrc
Introduce ...
Introductions
Dane Petersen
Lead Interaction Designer
GE Aviation
Karel Barnoski
Lead Interaction Designer
GE Energy☼
OUR PLAN FOR TODAY
Learn about design systems
Moving quickly from concept to creation
Sketch an app for your smart home
Us...
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...
Go for it!
Questions?
Our Perspective
We are GE
GE is huge
121 years old
300,000 employees
14,000 developers
$147 billion revenue
$13 billion income
GE is huge
121 years old
300,000 employees
14,000 developers
$147 billion revenue
$13 billion income
machines
machines
analytics
machines
analyticspeople
machines
analyticspeople
The Industrial Internet
Help people create elegant, powerful
and extensible experiences for the
Industrial Internet
OUR MISSION
Lean UX + Design Systems + Agile
LEAN UX CASE STUDY
5 intense days of cross-functional collaboration
Worked side-by-side with several energy customers
Sket...
Overview!
Sketching
GE HAS A SKETCHING CULTURE
Externalizing Your Work
Making Over Analysis
Shared Understanding
Permission to Fail
FOUR LEAN UX PRINCIPLES
Sketching is all about getting
ideas out of your head.
SKETCHING IS EXTERNALIZING YOUR WORK
Sketching is all about getting
ideas out of your head.
Thinking only exercises one
part of your brain. Looking
engages mor...
Make to think!
Over-analyzing a problem
can lead to fear that you’re
missing something, which
leads to analysis paralysis....
Sketching minimizes
competition between
different ideas.
SKETCHING HELPS SHARED UNDERSTANDING
Sketching minimizes
competition between
different ideas.
It turns the idea into a
third party that everyone
is free to cri...
Your first solution probably
won’t be your best one.
Use paper to make your
mistakes cheaply and quickly.
And then make so...
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remem...
Anybody can sketch. This isn’t about art!
Ugly is fine! And expected!
Speed is more appropriate than perfection.
And remem...
Activity #1: Sketching
Blank paper
Sticky notes
Sharpies!
YOUR TOOLS, YOUR FRIENDS
Theme: The Smart Home Manager
ACTIVITY #1: SKETCHING
Theme: The Smart Home Manager
Think of all the connected things in your home
Imagine a system that lets you view and
manag...
Sketch as an individual (15 min)
Share your sketches with your team (1 min per person)
Establish a design direction as a t...
Feeling stuck?
Start with words
One idea per sticky
Quantity over quality
Cluster and iterate
ACTIVITY #1: SKETCHING
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...
Nice work!
Break
15 minutes
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...
Design Systems
A design system is a collection of visual and
interaction elements that embodies the brand
The system is often expressed a...
Logo. A visual metaphor and often the most recognizable part of a design system.
COMPONENTS OF A DESIGN SYSTEM
Color. A co...
DIETER RAMS - BRAUN 1955-1995
PHYSICAL WORLD
DESIGN SYSTEMS ARE NOTHING NEW
HARDWARE & SOFTWARE
GE Design Systems
SHARING DESIGN SYSTEMS WITH OTHERS
MARKETING DESIGN SYSTEM
HEALTHCARE DESIGN SYSTEM
MOBILE DESIGN SYSTEM
TABLET DESIGN SYSTEM
INDUSTRIAL INTERNET DESIGN SYSTEM
INDUSTRIAL INTERNET DESIGN SYSTEM
Speed application development
Improve software UI quality
Enable extension and reuse
Support additional verticals & extern...
DESIGN TEMPLATES
DESIGN TEMPLATES
DESIGN TEMPLATES
DESIGN TEMPLATES
Prototyping in Code
The Industrial Internet Design System (IIDS)
A code-based design framework that
establishes visual and interactive pattern...
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
<!DOCTYPE html>
<title>Dashboard View</title>
<meta name="viewport" content="width=device-width">
<link href="./css/themes/iids/iids.min.c...
♥ Bootstrap
♥
♥
♥
♥ D3.js
♥
♥
♥
Bootstrap
DataTables
express
{D3.js
Font Awesome
Activity #2: Coding
Install a text editor:
Sublime Text is great on PC and Mac
Download the zip file:
http://tr.im/4dkrc
OPEN SOURCE DESIGN SYSTEMS
BOOTSTRAP_LDW.ZIP
FLUID.HTML
FLUID.HTML
BOOTSTRAP_LDW/DOCS
BASE-CSS.HTML
BASE-CSS.HTML#BUTTONS
SCAFFOLDING.HTML#GRIDSYSTEM
Turn your sketches into an interactive prototype
for your Smart Home Manager
ACTIVITY #2: CODING
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...
EXTRA CREDIT
Create a GitHub repository to collaborate with your team
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
EXTRA CREDIT
Add a data visualization component (Highcharts, D3, etc.)
Nice work!
Thank you!
Dane Petersen
@thegreatsunra
Karel Barnoski
@karelbarnoski
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Design At Scale Workshop
Upcoming SlideShare
Loading in...5
×

Design At Scale Workshop

1,915

Published on

Lean Day West
Portland, OR
September 16, 2013

At Neo’s Lean Day West conference, Karel Barnoski and I conducted a half-day workshop where we taught UX professionals how to achieve better, faster UX in the enterprise by using design systems, sketching, and prototyping techniques.

Published in: Design, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,915
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Design At Scale Workshop

  1. 1. Design at Scale Faster, Better UX via Design Systems Dane Petersen @thegreatsunra Karel Barnoski @karelbarnoski Lean Day West Portland, OR | September 16, 2013
  2. 2. 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!
  3. 3. Introductions
  4. 4. Dane Petersen Lead Interaction Designer GE Aviation Karel Barnoski Lead Interaction Designer GE Energy☼
  5. 5. 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
  6. 6. 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
  7. 7. Go for it!
  8. 8. Questions?
  9. 9. Our Perspective
  10. 10. We are GE
  11. 11. GE is huge 121 years old 300,000 employees 14,000 developers $147 billion revenue $13 billion income
  12. 12. GE is huge 121 years old 300,000 employees 14,000 developers $147 billion revenue $13 billion income
  13. 13. machines
  14. 14. machines analytics
  15. 15. machines analyticspeople
  16. 16. machines analyticspeople The Industrial Internet
  17. 17. Help people create elegant, powerful and extensible experiences for the Industrial Internet OUR MISSION
  18. 18. Lean UX + Design Systems + Agile
  19. 19. 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
  20. 20. Overview!
  21. 21. Sketching
  22. 22. GE HAS A SKETCHING CULTURE
  23. 23. Externalizing Your Work Making Over Analysis Shared Understanding Permission to Fail FOUR LEAN UX PRINCIPLES
  24. 24. Sketching is all about getting ideas out of your head. SKETCHING IS EXTERNALIZING YOUR WORK
  25. 25. 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
  26. 26. 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
  27. 27. Sketching minimizes competition between different ideas. SKETCHING HELPS SHARED UNDERSTANDING
  28. 28. Sketching minimizes competition between different ideas. It turns the idea into a third party that everyone is free to critique. SKETCHING HELPS SHARED UNDERSTANDING
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Activity #1: Sketching
  33. 33. Blank paper Sticky notes Sharpies! YOUR TOOLS, YOUR FRIENDS
  34. 34. Theme: The Smart Home Manager ACTIVITY #1: SKETCHING
  35. 35. 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
  36. 36. 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
  37. 37. Feeling stuck? Start with words One idea per sticky Quantity over quality Cluster and iterate ACTIVITY #1: SKETCHING
  38. 38. 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
  39. 39. Nice work!
  40. 40. Break 15 minutes
  41. 41. 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
  42. 42. Design Systems
  43. 43. 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
  44. 44. 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.
  45. 45. DIETER RAMS - BRAUN 1955-1995
  46. 46. PHYSICAL WORLD
  47. 47. DESIGN SYSTEMS ARE NOTHING NEW
  48. 48. HARDWARE & SOFTWARE
  49. 49. GE Design Systems
  50. 50. SHARING DESIGN SYSTEMS WITH OTHERS
  51. 51. MARKETING DESIGN SYSTEM
  52. 52. HEALTHCARE DESIGN SYSTEM
  53. 53. MOBILE DESIGN SYSTEM
  54. 54. TABLET DESIGN SYSTEM
  55. 55. INDUSTRIAL INTERNET DESIGN SYSTEM
  56. 56. INDUSTRIAL INTERNET DESIGN SYSTEM
  57. 57. Speed application development Improve software UI quality Enable extension and reuse Support additional verticals & external partners Minimize ongoing support needs INDUSTRIAL INTERNET DESIGN GOALS
  58. 58. DESIGN TEMPLATES
  59. 59. DESIGN TEMPLATES
  60. 60. DESIGN TEMPLATES
  61. 61. DESIGN TEMPLATES
  62. 62. Prototyping in Code
  63. 63. 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
  64. 64. IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
  65. 65. IIDS - INDUSTRIAL INTERNET DESIGN SYSTEM
  66. 66. <!DOCTYPE html>
  67. 67. <title>Dashboard View</title> <meta name="viewport" content="width=device-width"> <link href="./css/themes/iids/iids.min.css" rel="stylesheet"> <!-- Include modernizr and respond first so they can shim any elements which are missing in older browsers. Other javascrip should be included at the end of the page to improve load tim --> <script src="./js/vendor/modernizr-respond.js"></script> </head> <body> <div class="navbar"> <div class="masthead navbar-inner"> <div class="container"> <a class="brand" href="#"><span class="ge-logo">General <button class="btn btn-collapse" data-toggle="collapse" <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </button>
  68. 68. ♥ Bootstrap
  69. 69.
  70. 70.
  71. 71.
  72. 72. ♥ D3.js
  73. 73.
  74. 74.
  75. 75.
  76. 76. Bootstrap DataTables express {D3.js Font Awesome
  77. 77. Activity #2: Coding
  78. 78. Install a text editor: Sublime Text is great on PC and Mac Download the zip file: http://tr.im/4dkrc
  79. 79. OPEN SOURCE DESIGN SYSTEMS
  80. 80. BOOTSTRAP_LDW.ZIP
  81. 81. FLUID.HTML
  82. 82. FLUID.HTML
  83. 83. BOOTSTRAP_LDW/DOCS
  84. 84. BASE-CSS.HTML
  85. 85. BASE-CSS.HTML#BUTTONS
  86. 86. SCAFFOLDING.HTML#GRIDSYSTEM
  87. 87. Turn your sketches into an interactive prototype for your Smart Home Manager ACTIVITY #2: CODING
  88. 88. 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)
  89. 89. EXTRA CREDIT Create a GitHub repository to collaborate with your team
  90. 90. EXTRA CREDIT Add a data visualization component (Highcharts, D3, etc.)
  91. 91. EXTRA CREDIT Add a data visualization component (Highcharts, D3, etc.)
  92. 92. Nice work!
  93. 93. Thank you! Dane Petersen @thegreatsunra Karel Barnoski @karelbarnoski
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×