Consistency vs Flexibility in Design Systems : A GE Case Study

Consistency vs. Flexibility in Design Systems
A GE Case Study
Ken Skistimas
Director, User Experience, GE Digital
GE Digital

THE PREDIX DESIGN SYSTEM TEAM
• 5 designers, 7 design technologists, 1 PM, 1 QA
• Work with teams across GE around the world
• Support ~10,000 developers, hundreds of apps
• Located in San Ramon, CA
• Plan quarterly, ship daily
• Our code is open source on GitHub

Consistency and flexibility are often
seen at odds with each other.
For a successful design system,
you need to balance both.

Save
D o n e
Next
OK
Commit
Submit

FLEXIBLE
Works every time!
CONSISTENT

Predix Platform
Transportation
Asset Performance Power
Aviation Manufacturing
Field Service
BUSINESSES OUR DESIGN SYSTEM SUPPORTS
Renewables

FLEXIBLECONSISTENT
Is it still a system?

Use cases
Environments
Customers & personas
Legacy apps
Tech stacks
DIFFERENCES BETWEEN BUSINESS UNITS

FLEXIBLECONSISTENT
No one will use it.

• Configurability doesn’t always mean it’s flexible
• Be careful not to get lost in the minutia of a component
• Know the “why” behind requirements
• Don’t force consistency where it’s not required
DETERMINING FLEXIBILITY

Why doesn’t consistency always win?
A CRASH COURSE IN BRANDING

HOUSE OF BRANDSBRANDED HOUSE BLEND

Maintenance Parts InventoryFlight Planning Notifications
GE Aviation

Maintenance Parts InventoryFlight Planning Notifications
GE Aviation
CONSISTENCY WORKS FOR A BRANDED HOUSE

AviationAsset Performance TransportationPower
DESIGN SYSTEM

AviationAsset Performance TransportationPower
FLEXIBILITY IS REQUIRED FOR A BLEND
DESIGN SYSTEM

• Consistency is simpler for a branded house
• Blending use cases and brands requires flexibility
• Workflows will help you determine where to be flexible
DETERMINING CONSISTENCY

How do we pull it all together?

Powered byApplication Name
Item NameItem NameItem NameItem NameItem Name
Selected DKBreadcrumb DKBreadcrumb DKBreadcrumb DK
Production
Asset Status
SOLAR WIND BIOGAS TOTAL
%32 %24 %11 %67
ASSET PATH
United States of America/Colorado/Unit1/HRSG
METER
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
UNITS
psi
psi
m/s
m/s
psi
psi
psi
psi
m/s
m/s
psi
psi
psi
m/s
m/s
POINT
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
LAST OCCURANCE
2014-02-17, 19:33:51
2014-02-18, 19:33:51
2014-02-19, 19:33:51
2014-02-20, 19:33:51
2014-02-21, 19:33:51
2014-02-22, 19:33:51
2014-02-23, 19:33:51
2014-02-24, 19:33:51
2014-02-25, 19:33:51
2014-02-26, 19:33:51
2014-02-17, 19:33:51
2014-02-18, 19:33:51
2014-02-19, 19:33:51
2014-02-20, 19:33:51
2014-02-20, 19:33:51
1-10 of 80 321 54Rows per page 15
62%
LIFETIME
234.1
USAGE
B-Series
PLAN
2016
YEAR
GE90x Maintenance
WATCH LIST
Status Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
00%NAME
Status Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
00%NAME
Status Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
0.0%Label
00%NAME
ASSET STATUS
ASSET PATH
METER
UNITS
psi
psi
m/s
m/s
psi
psi
psi
psi
m/s
m/s
POINT
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
39VS11
LAST OCCURANCE
2014-02-17, 19:33:51
2014-02-18, 19:33:51
2014-02-19, 19:33:51
2014-02-20, 19:33:51
2014-02-21, 19:33:51
2014-02-22, 19:33:51
2014-02-23, 19:33:51
2014-02-24, 19:33:51
2014-02-25, 19:33:51
2014-02-26, 19:33:51
1-10 of 80 321 54Rows per page 10
C

TYPOGRAPHY
Page Header
SECTION HEADER
Body Copy
LABELS
SUBSECTION HEADER
Inspira Sans
30px
20px Uppercase
15px, 20px Line Spacing
12px Uppercase
15px Uppercase
One font. CSS styles for hierarchy.

CORE COLORS
12
ORANGE
RED
2
1
YELLOW
3
YELLOW
GREEN
4
GREEN
5
TEAL
6
AQUA
7
CYAN
8
BLUE
9
VIOLET
10
PURPLE
11
PINK
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
123456789101 2 3 4 5 6 7 8 9 10
Combined themes and expanded data visualization palette

CORE COLORS
85%
Past 7 Days
Widget Label
CARD HEADER
Widget Label
4
Alerts Cases Dashboards Assets ∠Dashboards
29%
20%
15%
18%
8%
10%
No Action
Sensor Repair
Operational Change
Scheduled Maintenance
Unplanned Maintenance
Forced Outage
Past 7 Days
Widget Label
75%
75%Plants
4/6
OUTPUT
11006MW
CAPACITY
55600MW
CARD HEADER
Widget Label Widget Label Widget Label

CORE COLORS
Flexibility within a closed system

GRIDS & SPACING
Spacing built into components and stencils.

FORMS & INPUT
COUNTRY STATE
United States of America California
Borislav
FIRST NAME
b.schildkraut@gmail.com
E-MAIL ADDRESS
San Francisco
CITY
1230 Broadway Street
ADDRESS
Schildkraut
LAST NAME
(415) 555-7890
PHONE NUMBER
94123
ZIP CODE
SHIPPING INFORMATION
Same as billing address
SubmitCancel
Signature styling and interaction for form elements

ICONOGRAPHY
Extendable custom SVG icon set
Chat Comment Email Message Phone SMS
FEATURE
UNICATION
Orders Products Routes
Administration Alerts Analysis Analytic
Orchestration
Analytics Asset Ingestion Asset Attribute Bug/Issue Cases
Catalog Dashboard Digital Twin Log Tag Tag Group Templates Users Calendar
Spaces Data Sources Dev Ops Microservice Deployments Pipeline
KPI - General KPI - Output KPI - Efficiency KPI - Heat Rate
Version

IMPLEMENTATION
Web components provide flexibility in development. CSS modules allow for
graceful adoption of the design system.
Polymer CSS 3

IMPLEMENTATION
Web components provide flexibility in development. CSS modules allow for
graceful adoption of the design system.
Polymer
Angular ReactVue
or any other JavaScript framework…

54
GUIDANCE FOSTERS CONSISTENCY

REFERENCE IMPLEMENTATIONS & DESIGNS
Reduce onboarding friction by providing starting points

SKETCH STENCIL
Symbols maintain parity with functionality

• Create a path of least resistance
• It’s not a “thing” until it’s documented
• Give people a reference point
• Guidelines aren’t rules
MAINTAINING CONSISTENCY

Open the process to build trust in the system

59
TRANSPARENCY BUILDS TRUST
Include your customers in the process and invite them to contribute.

TRUST BUILDS CONSISTENCY
• Share in-progress work
• Allow contributions
• Encourage collaboration
• Share ownership of ideas

WRAPPING UP
• More options doesn’t always mean more flexibility
• To scale, consistency and flexibility need to work together
• User workflows are good signals for where to be flexible
• A path of least resistance encourages consistency & adoption
• Trust in the system builds consistency

/in/kskistimas
@kskistimas
medium.com/ge-design
DESIGN SYSTEM
predix-ui.com
Thanks!
GE Digital

Consistency vs Flexibility in Design Systems : A GE Case Study

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Consistency vs Flexibility in Design Systems : A GE Case Study

Semelhante a Consistency vs Flexibility in Design Systems : A GE Case Study (20)

Último

Último (20)

Consistency vs Flexibility in Design Systems : A GE Case Study