Evolution of design systems at GE

The evolution of design systems at GE Digital
Dave Cronin, VP UX, GE Digital
@davcron

GE’s mission:
To usher in the digital industrial era to build, move, power, and cure the world.

What we mean when we talk about design systems
A visual language or style
Patterns for structure, composition, behavior
Guidelines and usage documentation
Stencils or templates for design tools that contain the
visual language and patterns
Code for building UIs that utilize the visual language
and patterns

The value of a design system
Enables people to effectively learn and use products by
creating a sense of familiarity through consistency
Creates a singular, targeted brand experience; support a
perception of quality
Improves usability by focusing effort on refining a single set
of elements
Increases designer and developer productivity by providing
fundamentals that reduce duplication of effort
Improves product/market fit by accelerating iterative
prototyping efforts

4
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
1. 2. 3.
Apple HIG

The evolution of design systems at GE
Core Design
Industrial Internet
Design System
IIDS Mapping Predix  
Design System
PDS “Cirrus”
Communications 
Design System
Healthcare 
Design System
Generation 1 Generation 1.1 Generation 2 Generation 2.1

Generation 1
The Industrial Internet Design System (IIDS)
2012

1.0 The Industrial Internet Design System (IIDS)
THE SITUATION

Create a set of patterns that dev teams could use (somewhat)
successfully with little or no help from designers
Improve developer productivity, for its own sake and to drive
adoption
Accelerate product definition and delivery through rapid
prototyping
Align the efforts of a decentralized community of designers
across GE
Allow designers to focus on the interesting, novel stuff
OUR OBJECTIVES

We knew we wanted to deliver it in code; guidelines wouldn’t work
Started with visual language: wanted it to fit in industrial settings, but to have some
amount of grace. We also wanted a style that developers could extend without breaking
Wrestled with which patterns to focus on. Inventoried existing software and four
projects frog design was doing for us.
Debated how prescriptive to be, decided to allow for diversity to drive adoption:  
“Tools not rules”
Started with a team from frog, by the time we shipped, had built a team of designers
and design technologists
Designed and built on top of existing frameworks like Bootstrap, jQuery, Highcharts, d3
HOW WE CREATED IT

Heatmap calendar and other custom visualizations

Code enabled
<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>

Had to do a substantial publicity push at first, then it took off
Initially skeptical dev managers reported 100% productivity improvement
Saw a fairly high level of design consistency, mixed quality
Many developers new to Bootstrap and LESS. (Many developers new to web dev.)
Very useful in projects that involved customer collaboration;  
a team could get a functioning UI in days
~1000 unique downloads of code in first 6 months  
~20k unique downloads 2012-2015 
Used in over 100 projects in the first year 
Used in 50+ commercial products, and for internal tools
RESULTS & WHAT WE LEARNED

Generation 1.1
The Communications Design System (CDS)
The Healthcare Design System (HDS)
Industrial Internet Mapping (IIDS Geo)
2013

The Communication Design System (CDS)
IIDS Mapping
THE SITUATION

The Communication Design System (CDS) 
IIDS Mapping
Create a unified design system for GE with versions
(or “extensions”) for healthcare and marketing
applications, as well as industrial internet
Add geolocation and mapping capabilities to the IIDx
OUR OBJECTIVES

IIDS Mapping
Implemented theming capabilities in IIDS to enable us to
use that as the foundation for Healthcare and Comms
Created new patterns for healthcare and marketing
Work was largely done by centralized design system team
Built mapping features in collaboration with GE GIS experts
HOW WE CREATED IT

CDS: New widgets, a lighter look

New typefaces
GE 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

IIDS Mapping
Monolithic distributions built were expensive to maintain,  
and were difficult for other teams to contribute to
CDS has been used extensively for internal tools, e.g. OneHR portal.
Also was heavily used for external marketing sites.
CDS eventually taken over by our IT design team
Difficult to manage user & customer perception of quality  
(or lack thereof) due to heterogeneity of app backends
RESULTS AND LESSONS

Generation 2
The Predix Design System (Px)
2015

The Predix Design System (PDS)
THE SITUATION

Provide new UI primitives for the new Predix platform
Quickly create an interaction framework and visual language for
APM product
Get customers and stakeholders excited about the vision for APM
Engage users in conversations about APM product design
Enable developers to go quickly, with minimal fuss
Create a uniquely “industrial” feel
Decrease the amount of effort we had to put into bug fixes,
upgrading libraries, distributing patches
OUR OBJECTIVES

Joined the APM and Predix teams together for  
initial sprints
Quickly created concept car prototype of APM to test
and refine initial design ideas
Decided to adopt web components standard to enable
modular development and distribution
Started investing in CI/CD automation to reduce
maintenance costs over time
HOW WE CREATED IT

OVERVIEW
View Selector
Shows the current view name.
Selector opens a list of available views for
this asset context.
PREDIX
™
OVERVIEWGT2
SOUTHERN FLEET > BLACK HAWK POWER > BLOCK 2
Dashboards
Cases
Alerts 6
1
Analysis
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
Advanced Gas Path with AutoTune
Ammonia Injection System
Emissions 3.1ppm N, 9ppm CO
EXAMPLE 2
98%
Reliability
97%
Availability
680MW
Capacity
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Anatomy of a
Predix Application
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Card
Are self-contained composable UI modules.
Has state based on context, work ow, etc.
Resides in a view.
Shareable.
Example code:
<px-card header-text="Example 1">
</px-card>
<px-ts-chart id="tsChart">
<px-ts-chart-controls data-controls></px-ts-chart-controls>
</px-ts-chart>
GT2
Asset Browser
Shows the current asset context.
Selector opens asset browser.
Example code:
<px-context-browser
</px-context-browser>
nav-items='[
style="height: 240px"
label-field="name"
parent-id-field="category"
id-field="identifier"
tree-display-levels="3"
child-key="children">
View
A layout container in which card(s) reside.
May include UI elements not in cards.
Shareable.
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
EXAMPLE 2
98%
Reliability
97%
Availability
680MW
Capacity
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
680MW
CapacityWidget
A widget that visualizes data or information.
Can reside inside or outside of a card.
Communicates through the view or card that contains it.
Example code:
<px-ts-chart>
</px-ts-chart>
<px-ts-chart-controls data-controls show-export=“false” zoom-buttons="[]">
</px-ts-chart-controls>
<px-chart-series id="plant-capacity"></px-chart-series>
Dashboards
Cases
Alerts 6
1
Analysis
Navigation
A list of primary spaces within the application.
Spaces may have secondary navigation that
are independent of context or view.
Example code:
<px-app-nav
</px-app-nav>
nav-items='[
{"path": "", "icon": "fa-warning", "eventName": "firstItem", "label":"Alerts"},
{"path": "tab2", "icon": "fa-briefcase", "label": "Cases"},
{"path": "tab3", "icon": "fa-bar-chart", "label": "Analysis"},
{"path": "tab4", "icon": "fa-dashboard", "label": "Dashboards"}]'>

Time Series
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Why Cards?
Composable
Allows reuse of composed
modules across screens,
platforms, and applications.
Stateful
Have con gurable state that can
be passed to other cards.
Shareable
Cards can be packaged and
shared with their con gured state
and information intact.
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Time Series
Customer
Company
SSO
Bob Sinclaire
RasGas
RG3877-9983
Running
Claimed
Gas Valve Replacement
Turbine Optimization
2%
Completed
2883 Dukhan Highway
Dukhan, Qatar
Turbine 9HA Gas Turbine
22%2:37PMiPad
PREDIX ™
OVERVIEWGT2
Dashboards
Cases
Alerts 6
1
Analysis
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
EXAMPLE 1
-3
-1
1
3
2
5
-2
0
4
CURRENT
342
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
DATA GRID
Date IS 13:12:08Filters +03/23/2015 TO 04/02/2015
…
Date Time Raw SOS (Ft/Sec) FluidTemperature (F) 1h Avg Water Cut (%) 1hr Avg Flow (BPD) Output_Flow Output_WLR_Std Yest
8/12/13 0:00:00 5887.6 197.69 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:01 5886.6 197.69 82.5 2278 5287.9 87.655 85.879
8/12/13 0:00:02 5885.7 197.69 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:03 5885.7 197.6 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:0 5885.7 197.55 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:05 5885.6 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:06 5885.5 197.6 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:07 5886.3 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:08 5885.8 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:09 5885.9 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:10 5886 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:11 5885.6 197.58 82.5 2278 1726.1 87.655 85.879

A reduced set of elements kept our efforts focused, but eventually failed to
accommodate emerging diversity of apps being created on Predix.
Designers often “riffed off” of existing patterns without considering
implications for development teams. This caused some developers to
resist adopting.
Our minimal, “industrial” visual language was perceived as
unsophisticated or boring by some stakeholders and customers.
Effective use of the design system required substantial time investment in
office hours and other support venues for both designers and developers.
continued…
RESULTS & WHAT WE LEARNED

Modularity provided by web components along with CI/CD automation
reduced cost of maintaining, patching and extending the system
Interoperability in the ever-changing UI tech landscape is an  
ongoing battle
Contributions can be very labor intensive if not aligned from a design
and code perspective from the start
Customizing off-the-shelf charting packages was fragile, labor intensive
and didn’t meet our users’ needs
Using d3 as the foundation of our own modular visualization framework
proved to be a better approach to adding features and chart types
RESULTS & WHAT WE LEARNED continued

Generation 2.1
Core Design
2016

Generation 2.2
The “Cirrus” Predix Design System refresh
2017

THE SITUATION

Create a richer, more visually sophisticated visual language
Increase the diversity of patterns and possibilities for
designers, while maintaining a unified brand experience
Support the integration of acquired products
Create stronger relationships and engagement within the
growing design community
OUR OBJECTIVES

Started from the design elements and code base from previous generation
Ran design workshops to explore, discuss, and co-create design elements
with community
Shared in-progress work with design community and stakeholders,
provided early stencil so designers could try out new visual language and
patterns with their products
Limited scope to what we could design in Q1 and implement in ~Q2
Used as an opportunity to clean up tech debt, simplify and slim down
code base, improve performance, and further increase use of automation
HOW WE CREATED IT

Flexibility and diversity within a closed system

Sketch overrides allow designers to quickly work within the system

The workshops were very productive and fun. We’ve continued
them as a standard practice for major new topics.
Crisp decision-making about when design for a component is done
is critical to stay on plan. You really have to think the order of
operations.
A major design refresh can’t be adopted instantaneously; this leads
to conundrums about feature requests by important customers
With a more open-ended system, some designers surprise us with
what they do with it, others make us wonder how to better convey
the spirit of the design language.
RESULTS & LESSONS

As part of this effort, the team focused on their CI/CD game, and
released as often as multiple times a week, often in close support of
product development.
Some fun stats about the release:
• 117 GitHub repos included in the release
• 3,578 commits to those repos
• 116 days development time, for an average of 31 commits per day
• 3484 automated unit tests for our Web Components, which we
run against 6 browsers
DEV STATS

Lessons from the journey
Design systems can make it tempting to bypass a healthy human-centered design
process.
“Tools not rules” has been an effective strategy…
…but not everyone believes in avoiding duplication of effort and creating economies
of scale
If you ship code, you’re a development organization.
(Some) developers don’t like it when they feel that the design team is prescribing
technology decisions.
Contribution and extension is hard.
Designers and developers make assumptions and don’t like to read documentation.
Design systems attempt to provide generalized solutions to a range of problems, but
are still very much constrained by the necessary assumptions made during creation.

Evolution of design systems at GE

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Evolution of design systems at GE (20)

Recently uploaded (20)

Evolution of design systems at GE