Successfully reported this slideshow.
Your SlideShare is downloading. ×

Consistency vs Flexibility in Design Systems : A GE Case Study

Ad

YouTube videos are no longer supported on SlideShare

View original on YouTube

Ad

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

Ad

2

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 79 Ad
1 of 79 Ad

Consistency vs Flexibility in Design Systems : A GE Case Study

  1. 1. Consistency vs. Flexibility in Design Systems A GE Case Study Ken Skistimas Director, User Experience, GE Digital GE Digital
  2. 2. 2
  3. 3. 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
  4. 4. FLEXIBLECONSISTENT
  5. 5. Consistency and flexibility are often seen at odds with each other. For a successful design system, you need to balance both.
  6. 6. FLEXIBLECONSISTENT
  7. 7. Save D o n e Next OK Commit Submit
  8. 8. Done
  9. 9. React VueAngular
  10. 10. React
  11. 11. 15
  12. 12. FLEXIBLE Works every time! CONSISTENT
  13. 13. 17
  14. 14. Predix Platform Transportation Asset Performance Power Aviation Manufacturing Field Service BUSINESSES OUR DESIGN SYSTEM SUPPORTS Renewables
  15. 15. 23
  16. 16. 23
  17. 17. 24
  18. 18. 25 Consistency
  19. 19. FLEXIBLECONSISTENT Is it still a system?
  20. 20. FLEXIBLECONSISTENT
  21. 21. 27
  22. 22. We need more flexibility!
  23. 23. 29
  24. 24. Use cases Environments Customers & personas Legacy apps Tech stacks DIFFERENCES BETWEEN BUSINESS UNITS
  25. 25. FLEXIBLECONSISTENT No one will use it.
  26. 26. • 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
  27. 27. Why doesn’t consistency always win? A CRASH COURSE IN BRANDING
  28. 28. HOUSE OF BRANDSBRANDED HOUSE
  29. 29. HOUSE OF BRANDSBRANDED HOUSE BLEND
  30. 30. HOUSE OF BRANDSBRANDED HOUSE BLEND
  31. 31. Maintenance Parts InventoryFlight Planning Notifications GE Aviation
  32. 32. Maintenance Parts InventoryFlight Planning Notifications GE Aviation CONSISTENCY WORKS FOR A BRANDED HOUSE
  33. 33. AviationAsset Performance TransportationPower DESIGN SYSTEM
  34. 34. AviationAsset Performance TransportationPower DESIGN SYSTEM
  35. 35. AviationAsset Performance TransportationPower DESIGN SYSTEM
  36. 36. AviationAsset Performance TransportationPower FLEXIBILITY IS REQUIRED FOR A BLEND DESIGN SYSTEM
  37. 37. • 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
  38. 38. FLEXIBLECONSISTENT
  39. 39. How do we pull it all together?
  40. 40. 45
  41. 41. 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
  42. 42. 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.
  43. 43. 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
  44. 44. 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
  45. 45. CORE COLORS Flexibility within a closed system
  46. 46. GRIDS & SPACING Spacing built into components and stencils.
  47. 47. GRIDS & SPACING Spacing built into components and stencils.
  48. 48. 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
  49. 49. 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
  50. 50. CIRRU S DE SIGN L ANG UAG E
  51. 51. IMPLEMENTATION Web components provide flexibility in development. CSS modules allow for graceful adoption of the design system. Polymer CSS 3
  52. 52. 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…
  53. 53. 54 GUIDANCE FOSTERS CONSISTENCY
  54. 54. 54 GUIDANCE FOSTERS CONSISTENCY
  55. 55. REFERENCE IMPLEMENTATIONS & DESIGNS Reduce onboarding friction by providing starting points
  56. 56. REFERENCE IMPLEMENTATIONS & DESIGNS Reduce onboarding friction by providing starting points
  57. 57. REFERENCE IMPLEMENTATIONS & DESIGNS Reduce onboarding friction by providing starting points
  58. 58. SKETCH STENCIL Symbols maintain parity with functionality
  59. 59. • 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
  60. 60. Open the process to build trust in the system
  61. 61. 59 TRANSPARENCY BUILDS TRUST Include your customers in the process and invite them to contribute.
  62. 62. TRUST BUILDS CONSISTENCY • Share in-progress work • Allow contributions • Encourage collaboration • Share ownership of ideas
  63. 63. 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
  64. 64. http://bit.ly/ge-cirrus
  65. 65. /in/kskistimas @kskistimas medium.com/ge-design DESIGN SYSTEM predix-ui.com Thanks! GE Digital

×