A case study from the Predix Design System at GE on how balance consistency and flexibility in a large scale design system. You'll learn: Where design systems should be consistent or flexible How GE Digital handles consistency vs. flexibility in the Predix design system How to adapt tools and technology to balance both.

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

2. 2

6. 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

7. FLEXIBLECONSISTENT

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

9. FLEXIBLECONSISTENT

10. Save
D o n e
Next
OK
Commit
Submit

11. Done

12. React VueAngular

13. React

16. 15

17. FLEXIBLE
Works every time!
CONSISTENT

18. 17

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

25. 23

26. 23

27. 24

28. 25
Consistency

29. FLEXIBLECONSISTENT
Is it still a system?

30. FLEXIBLECONSISTENT

31. 27

32. We need more flexibility!

33. 29

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

38. FLEXIBLECONSISTENT
No one will use it.

39. • 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

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

41. HOUSE OF BRANDSBRANDED HOUSE

42. HOUSE OF BRANDSBRANDED HOUSE BLEND

43. HOUSE OF BRANDSBRANDED HOUSE BLEND

44. Maintenance Parts InventoryFlight Planning Notifications
GE Aviation

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

46. AviationAsset Performance TransportationPower
DESIGN SYSTEM

47. AviationAsset Performance TransportationPower
DESIGN SYSTEM

48. AviationAsset Performance TransportationPower
DESIGN SYSTEM

49. AviationAsset Performance TransportationPower
FLEXIBILITY IS REQUIRED FOR A BLEND
DESIGN SYSTEM

50. • 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

51. FLEXIBLECONSISTENT

52. How do we pull it all together?

53. 45

54. 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
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
METER
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
crank-frame-compressionratio
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
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
United States of America/Colorado/Unit1/HRSG
METER
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
crank-frame-compressionratio
crank-frame-dischargepressure
crank-frame-suctionpressure
crank-frame-velocity
crank-frame-compressionratio
crank-frame-dischargepressure
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
Powered byApplication Name
C

55. 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.

56. 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

57. CORE COLORS
85%
Past 7 Days
Widget Label
CARD HEADER
Widget Label
Powered byApplication Name
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

58. CORE COLORS
Flexibility within a closed system

59. GRIDS & SPACING
Spacing built into components and stencils.

60. GRIDS & SPACING
Spacing built into components and stencils.

61. 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

62. 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

63. CIRRU S DE SIGN L ANG UAG E

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

65. 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…

66. 54
GUIDANCE FOSTERS CONSISTENCY

67. 54
GUIDANCE FOSTERS CONSISTENCY

68. REFERENCE IMPLEMENTATIONS & DESIGNS
Reduce onboarding friction by providing starting points

69. REFERENCE IMPLEMENTATIONS & DESIGNS
Reduce onboarding friction by providing starting points

70. REFERENCE IMPLEMENTATIONS & DESIGNS
Reduce onboarding friction by providing starting points

71. SKETCH STENCIL
Symbols maintain parity with functionality

72. • 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

73. Open the process to build trust in the system

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

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

76. 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

77. http://bit.ly/ge-cirrus

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