Our documentation for designs in perfection
Digital design system for Siemens Healthineers
Consistency and efficiency across all channels
How does Siemens Healthineers manage to display its corporate design consistently and in line with its brand across all devices, from the header to the call-to-action? The key to this is our comprehensive documentation of digital design system elements. It provides fundamental concepts and components as an essential basis for all digital marketing projects and saves a lot of time and effort in their implementation.
One library. One level.
Siemens Healthineers expanded its corporate design—and we developed the new website based on this. But to ensure that the rebrand was also reflected in all other digital touchpoints, we implemented a digital design system for all marketing applications in parallel with the website. To do this, we analyzed and optimized all elements of the user interface, checked it for consistency in design, code, and usability, and defined clear rules for the rapid development of new components.
Clear rules for implementation and updating
What is the right font, color, or proportion? When does which condition apply, and how do we regulate interaction? Our digital design system offers comprehensive concepts that we have also codified as a basis in the code. This means that changes automatically affect all connected elements. And if parts of the branding change, updates can be easily integrated into the design system—for quick updating of all projects implemented with it. On this basis, we have already implemented a wide variety of web apps, landing pages, online services, trade fair applications, and diverse event platforms for Healthineers.
Easy operation without barriers
An important requirement for every element: high usability combined with optimal accessibility – largely based on the highest WCAG 2.0 standard. This means, for example, that all digital solutions created on the basis of the design system can be read via screen readers and operated using a keyboard. In addition to numerous technical optimizations, we ensured particularly high contrast values and tested these in numerous accessibility checks. To this end, we developed the color “accessible orange” and integrated it into the existing corporate design of Siemens Healthineers.
Retrieve. Apply. Check off.
Whether for internal developers or external agencies, the entire design system is available worldwide and at any time. Every detail has been checked and is brand-compliant and uniformly prepared, so that future digital projects can be implemented easily, quickly, and without any initial hurdles.
The project in a nutshell
40-50
different components
> 20
Large projects have already been implemented
25+%
Time savings in design and development