30+
realized projects
<6
months
As a living system, a design system helps companies to deliver consistent, brand-appropriate experiences at scale and over time. With the digital design system for ETAS, we quickly and efficiently bring the corporate design to the entire product portfolio. Reusable components, basic layouts and clear specifications ensure high-quality GUIs, simple adaptations and a consistent brand presence.
The design system streamlines processes, increases efficiency in UI design and shortens time-to-market for digital products – while at the same time ensuring consistent user guidance and a better user experience. The alignment of brand values and central UX standards is guaranteed at all times. As a company with a strong focus on development, the design system supports designers and programmers alike.
Through product deep dives and stakeholder interviews, we developed a design system that is precisely tailored to the needs and use cases of ETAS. While the ETAS products were at the center of our considerations, we also placed a great deal of emphasis on functional and process requirements, which is reflected in the application layout and the use of the component library. Design explorations helped us to develop a shared understanding of how to apply the ETAS corporate design to applications. The design principles derived from this formed the basis for the further visual and experience design. This is how we ensure that our solutions are functional, aesthetically pleasing, brand-appropriate and consistent.
We provide users with everything they need for a brand-compliant and accessible design (WCAG 2.1 AA) of ETAS applications. Based on established design principles and the atomic design method, we have designed elements and components and integrated them into a GUI component framework. Basic layouts and application templates now provide a flexible toolbox for fast and brand-compliant implementations. All documentation is provided in an online style guide; the code is always available via workflows and pipelines. The result: a consistent user experience and a unified brand image – with accessibility that meets current guidelines.
Working together on the project never felt like a typical service provider-client relationship, but like that of a real team. Thanks to the ideas and expertise of our colleagues at Experience One, a comprehensive digital design system emerged from the original project goal of developing individual tools for GUI design.
Using Figma significantly improves collaboration within UI teams and makes it easier to quickly apply the design to different applications. Our basic layouts ensure a unified framework and responsive design. The comprehensive style guide covers all design principles and details, tailored to different target groups. This way, teams can now work together much more efficiently and quickly – with improved quality and user satisfaction.
Tokens in Figma allow designers to centrally define and manage design elements such as colors, fonts and spacing, and use them across projects and platforms in the entire design. As a single point of truth, they ensure consistency: changes are automatically applied to all instances. Translated into CSS variables, tokens also ensure consistency in the code and make updates easier. They thus ensure a uniform design, reduce working hours and enable quick, centralized adjustments. It's a win-win situation for everyone involved in the project.
As a developer, the ETAS Common UI saves me a lot of time because I no longer have to worry about colors or spacing. I can insert the finished components directly into my application and just take care of the logic behind them.
By establishing a dedicated DesignOps team of UX and UI designers and developers, we ensure the successful integration of the design system into the organization. Our approach ensures consistent and high-quality results by establishing clear processes and standards.
Comprehensive UX research at the beginning helps to understand customer requirements and pain points. We continuously integrate lighthouse projects to validate the design and optimize it based on feedback. This ensures that our design meets brand guidelines and specific product requirements.
Our work with Figma enables UI teams to take advantage of the latest features. Tokens reduce the workload for designers and programmers, who no longer have to manually transfer color values or fonts into their CSS. Centralized management maintains design quality and minimizes errors, allowing designers to focus on creating innovative and engaging designs.