Siemens Energy 
Design System

Siemens Energy faced challenges due to inconsistent branding and fragmented user experiences across its products. To simplify and unify their approach, they introduced a design system that offers clear guidelines, reusable code components, and thorough documentation. This solution aims to enhance consistency, user satisfaction, and cost-effectiveness.

Siemens Energy operates multiple apps, each with a different focus. However, resources were scattered and lacked cohesion, leading to inconsistencies in branding and user experience across their digital ecosystem. Maintaining Siemens Energy’s complex digital ecosystem was costly and resource-intensive, with inconsistent branding resulting in a fragmented user experience.

To address these challenges, we implemented a unified design system that simplified development, improved branding, and enhanced the user experience. This system provides a cohesive framework with clear guidelines, ready-to-use code components, and detailed documentation.

* I’ve also worked on various digital projects for Siemens Energy, including refining their website, defining motion principles, and creating their first mobile app design system.
In collaboration with MetaDesign
Team: Janosh Klein, Melanie & Siemens Energy Team

  • Define Design Principles and Guidelines
  • Create a Component Library
  • Establish a Visual Style Guide
  • Develop Interaction Patterns
  • Create Design System Documentation
  • Maintain and Update the Design System
  • Collaborate with Development Teams
  • Improving Accessibility

 

Overview of the Initial Status: Before the Design System was Created


Sneak Peek of the Design System

Examples Screens
Selected clients
Stanhope, Flexcon, Ortho Coffee, Cuisinart, Siemens AG, Siemens Energy, Beisheim Stiftung, Vectorworks, Mia & Ben, Marley Spoon, Dinnerly, AERA Bauwens, Pateron, Urban Nation, Linzerie, Universal Music, Porsche, Kölle Zoo, and many more

© Ran Park 2024