The GE Design System and thoughts about craft at scale

DAVID CRONIN @davcron

I work at GE

I work at GE

I work at GE

I work at GE

I work at GE

I work at GE

GE Software & The Industrial Internet

The UX CoE (2012)

My idea of craft, at the time

Smithsonian Cooper-Hewitt, National Design Museum

We soon began to understand the reality of the mission

The origin story…

Design systems

Design Systems

C H A P T E R 4

Menus

Menu Behavior

57

4

Menus

Figure 4-7

A feedback technique

Keep in mind when you decide your timing issues that people have built-in expectations about how long they want to wait for an operation to be completed. Try to provide your users with feedback that lets them know that the computer is still working.

Sometimes people may switch to a different application to do something else while waiting for the current operation in your application to finish. In this case, the user wouldn’t see a cursor change, and it may be best to use a more visible form of feedback such as a status dialog box. The paragraphs that follow describe two situations in which different kinds of feedback were chosen based on the context and the users’ expectations in each situation.

When a Find operation lasts longer than approximately four seconds, the Finder displays a “Searching” message in a dialog box. For a Find operation, people typically want to do something with the target of the command, so they wait for its completion rather than go on to another task. If the search operation takes more than a few seconds, it’s good to provide additional feedback that the search is taking place.

When the user chooses Empty Trash, however, the Finder waits approximately eight seconds, about twice the amount of time for the Find operation, before displaying the “Emptying Trash” dialog box. The end result provides the user with a skinny receptacle and more disk space. Users may be willing to wait for a longer amount of time for the Trash to empty because they usually aren’t waiting to do something with the result of the command.

The previous paragraphs described typical behavior that occurs when a user chooses a menu item from a pull-down menu. In the case that a menu item displays a window that contains editable text, such as a modal dialog box, make the menu bar active and enable the Edit menu and other appropriate menus. Don’t continue to highlight the menu title of the item that displayed the dialog box—as long as the user can use at least one of the menus, you shouldn’t keep a title highlighted.

1. 2. 3.

Design systems

Design systems commonly include

A modular set of parts

Frameworks & patterns for structure, form, composition, appearance, behavior Standards of tone and character

Forming the vision

Design system hypothesis #1

Product teams could use it to be (somewhat) successful without some or no UX design help.

Design system hypothesis #2

It would accelerate software development & product definition.

Design system hypothesis #3

It would align the efforts of a decentralized community of UX designers across GE.

Design system hypothesis #4

It would allow designers to focus on the the interesting, novel stuff.

Design system hypothesis #5

It would allow us to evolve our product experiences in a unified way

The Industrial Internet Design System

= Visual Language

+ Interaction Patterns

+ Technology Framework

The Industrial Internet Design System 1.0

The Tearsheet

Navigation

Forms

Toggles & sliders

Time series plots

Time series calendar

Meters

Radar plot

RESPONSIVENESS

The Software Design Hub

DISTRIBUTION

PERSONAS

Design PrinciplesRespect your audience Understand who your users are and how they work.

Lead with information Content is king, but don't overload users.

Adapt to context Design and adapt appropriately to methods of user access.

Inspire through UX Instill confidence and optimism throughout the user experience.

Reference Applications

Stencils

Code enabled<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 javascripts should be included at the end of the page to improve load time. --> <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 Electric</span> My Application <small><i>powered by</i> GE Business</small></a> <button class="btn btn-collapse" data-toggle="collapse" data-target=".primary-navbar,.workspace-navbar"> <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </button>

Evangelism, Adoption, Impact

Web Analytics / First 6 Months

Go to this report

Aug 1, 2012 ­ Mar 1, 2013Audience Overview

Language Sessions % Sessions

1. en­us 2,757 96.10%

2. en­gb 63 2.20%

3. fr 11 0.38%

4. es 7 0.24%

5. hu 5 0.17%

6. ko 5 0.17%

7. pt­br 4 0.14%

8. de 3 0.10%

9. en 3 0.10%

10. it 2 0.07%

Overview

 Sessions

September 2012 October 2012 November 2012 December 2012 January 2013 February 2013

100100100

200200200

Sessions

2,869Users

1,341Pageviews

10,136

Pages / Session

3.53Avg. Session Duration

00:05:31Bounce Rate

33.57%

% New Sessions

42.45%

Returning Visitor New Visitor

42.6%

57.4%

© 2015 Google

All Sessions100.00%

Unique downloads: 936

Web Analytics / To date

Go to this report

Aug 1, 2012 ­ May 9, 2015Audience Overview

Language Sessions % Sessions

1. en­us 11,842 93.56%

2. en­gb 218 1.72%

3. fr 65 0.51%

4. zh­cn 58 0.46%

5. sv 57 0.45%

6. de 56 0.44%

7. ja 56 0.44%

8. es 36 0.28%

9. ko 35 0.28%

10. hu 29 0.23%

Overview

 Sessions

January 2013 July 2013 January 2014 July 2014 January 2015

200200200

400400400

Sessions

12,657Users

7,055Pageviews

47,421

Pages / Session

3.75Avg. Session Duration

00:04:40Bounce Rate

31.53%

% New Sessions

54.74%

New Visitor Returning Visitor

45.1%

54.9%

© 2015 Google

All Sessions100.00%

Unique downloads: 11,000Dist. w Predix: 8,152

Organizational Evolution, Design System Evolution

The GE Design System

The Healthcare Design System Extension

Patient list

Directional pad

The Communication Design System Extension

New widgets, a lighter looks

Product site templates

GE Oil & Gas dot com

IIDx Extension

Basic mapping

Pop-overs

Markers

Predix Go

TypefacesGE Sans Beta 03 overview / 20131002 / Bold Monday / page 2

GE Sans Beta 03 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 $ & @ . , : ; ‘ ’ “ ” ! ? ( [ { / | \ } ] ) - – — fi fl fb ff fh fk fl ffi ffl

GE Serif Beta 03 overview / 20131002 / Bold Monday / page 6

GE Serif Beta 03 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 $ & @ . , : ; ‘ ’ “ ” ! ? ( [ { / | \ } ] ) - – — fi fl fb ff fh fk fl ffi ffl

GE Inspira Sans GE Inspira Serif

GE Software 2015

We need a new design systemWe have a stronger perspective on what is good design

A good portion of the IIDx system isn’t used or used well, upgrades are expensive

Less capable engineers struggle to use properly

Difficulty extending, means we are still reinventing the wheel

Platform brand challenges

Starting to look and feel dated

The next generation design system

More informed & evolved product vision will allow us to reduce the quantity of components, while creating signature elements

“Full stack widgets”

Increased focus on extendability and contribution

Coming back to the idea of craft

Coming back to the idea of craft…

Coming back to the idea of craft

Coming back to the idea of craft

Thank you!

DAVID CRONIN @davcron