Consistency vs Flexibility in Design Systems : A GE Case Study
6 likes1,954 views
The document discusses the balance between consistency and flexibility in design systems using GE's Predix design system as a case study. It emphasizes the need for configurability to accommodate varying use cases while maintaining a cohesive user experience. The conclusion highlights the importance of collaboration, trust, and user workflows in achieving a successful design system.
Consistency vs Flexibility in Design Systems : A GE Case Study
- 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
- 8. Consistency and flexibility are often seen at odds with each other. For a successful design system, you need to balance both.
- 10. Save D o n e Next OK Commit Submit
- 11. Done
- 12. React VueAngular
- 13. React
- 16. 15
- 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?
- 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
- 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
- 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…
- 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