Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Evolution of design systems at GE

1,828 views

Published on

The story of multiple generations of design systems created to support UX design practices at GE. Video of narration here: https://www.youtube.com/watch?v=Ou3v7aiJQU0

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Evolution of design systems at GE

  1. 1. The evolution of design systems at GE Digital Dave Cronin, VP UX, GE Digital @davcron
  2. 2. GE’s mission: To usher in the digital industrial era to build, move, power, and cure the world. 
  3. 3. Intro / GE
  4. 4. The Industrial Internet
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. Generation 1 The Industrial Internet Design System (IIDS) 2012
  10. 10. 1.0 The Industrial Internet Design System (IIDS) THE SITUATION
  11. 11. The Industrial Internet Design System (IIDS) 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
  12. 12. The Industrial Internet Design System (IIDS) 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
  13. 13. The Tearsheet
  14. 14. Navigation
  15. 15. Forms
  16. 16. Toggles & sliders
  17. 17. Time series plots
  18. 18. Heatmap calendar and other custom visualizations
  19. 19. Meters
  20. 20. Radar plot
  21. 21. The Software Design Hub
  22. 22. PERSONAS
  23. 23. Reference Designs
  24. 24. Stencils
  25. 25. 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>
  26. 26. IIDS in the wild
  27. 27. The Industrial Internet Design System (IIDS) 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
  28. 28. Generation 1.1 The Communications Design System (CDS) The Healthcare Design System (HDS) Industrial Internet Mapping (IIDS Geo) 2013
  29. 29. The Communication Design System (CDS) The Healthcare Design System (HDS) IIDS Mapping THE SITUATION
  30. 30. The Communication Design System (CDS)
 The Healthcare Design System (HDS) 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
  31. 31. The Communication Design System (CDS)
 The Healthcare Design System (HDS) 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
  32. 32. HDS: Patient list
  33. 33. HDS: Directional pad
  34. 34. CDS: New widgets, a lighter look
  35. 35. CDS: Product site templates
  36. 36. CDS: GE Oil & Gas dot com
  37. 37. IIDS: Basic mapping
  38. 38. IIDS: Pop-overs
  39. 39. IIDS: Markers
  40. 40. 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
  41. 41. The Communication Design System (CDS)
 The Healthcare Design System (HDS) 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
  42. 42. Generation 2 The Predix Design System (Px) 2015
  43. 43. The Predix Design System (PDS) THE SITUATION
  44. 44. The Predix Design System (PDS) 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
  45. 45. The Predix Design System (PDS) 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
  46. 46. APM Concept Car
  47. 47. 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 SOUTHERN FLEET > BLACK HAWK POWER > BLOCK 2 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 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 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"}]'>
  48. 48. 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 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 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
  49. 49. Lights out mode
  50. 50. Predix design patterns site
  51. 51. Developer documentation site
  52. 52. Design community sharing site
  53. 53. Contribution process flow
  54. 54. The Predix Design System (PDS) 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
  55. 55. The Predix Design System (PDS) 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
  56. 56. Generation 2.1 Core Design 2016
  57. 57. Generation 2.2 The “Cirrus” Predix Design System refresh 2017
  58. 58. The “Cirrus” Predix Design System refresh THE SITUATION
  59. 59. The “Cirrus” Predix Design System refresh 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
  60. 60. The “Cirrus” Predix Design System refresh 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
  61. 61. Workshops
  62. 62. Flexibility and diversity within a closed system
  63. 63. New icon family
  64. 64. Sketch design starter kit
  65. 65. Sketch overrides allow designers to quickly work within the system
  66. 66. PX-SAMPLE-APP
  67. 67. The “Cirrus” Predix Design System refresh 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
  68. 68. The “Cirrus” Predix Design System refresh 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
  69. 69. Lessons
  70. 70. 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
  71. 71. 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.

×