The power of innovation: How the symbiosis of Hawa's new design system and optimized user experience sets new standards for configurators.
For more than 50 years, Hawa Sliding Solutions has been at the forefront of the industry as a globally recognized Swiss supplier of sliding door systems. The company's success story is characterized by continuous innovation and the provision of high-quality solutions. With a deep understanding of its customers' needs, Hawa has built up an impressive track record and a first-class reputation for its products and services.
50
years of experience
350
+
Patents
240
employees
The challenge
Together with Hawa, we faced the challenging task of developing a design system based on IBM's proven Carbon Design System. Our goal was to lay the foundation for a consistent user experience across all touchpoints. The Hawa Concepta III product configurator was selected as a pilot project for the implementation of the design system.
Our design initiative had two main goals. Firstly, the user interface of the new design system was to be subtly modernized to improve aesthetics and usability. Second, to use the new configurator as a blueprint for seamlessly integrating future configurators into the site. We paid special attention to optimizing the user flow and significantly improving the usability on different viewports, from desktop to mobile.
The starting signal: an insight into the world of Hawa and the design system
At our first on-site meeting at Hawa, we immersed ourselves in the world of the company. In this two-day workshop, we gained insights into the extensive product world, the building and production on site, as well as valuable insights into the target groups, personas and user journeys.
On the first day, we analyzed the current state of the existing configurators and made initial strategic considerations for the new configurator. The goal was to ensure that the future configurator would meet the diverse needs of the users. Day 2 laid the foundation for the design system: this included setting up the figma space and scoping the roadmap.
Efficient integration: the design system based on the Carbon Design System
We began the process by aligning basic elements such as colors and fonts to create a consistent foundation. We then consistently applied this customization to the existing components, paying particular attention to the needs of the product configurator. Components that did not yet have a use case were marked accordingly and left out for the time being.
At the same time, we introduced new components specifically tailored to the configurator. To ensure clarity and to separate universal components from touchpoint-specific components, we created a new library. This ensured that our design system remained flexible and scalable, while perfectly meeting the configurator's individual requirements.
A configurator that sets standards: from the idea to the working prototype.
In close cooperation with the Hawa team, we laid the foundation for a product configurator that impresses with a revised user experience. Our first step was to develop a detailed user flow, which ensured that the different approaches of the various target groups were brought into focus. Future features such as project management were also included in the planning.
At the same time, we started creating the look and feel of the configurator. We used this to iteratively harmonize the components of the design system with the customer. This approach ensured that the resulting system would be both flexible and scalable to meet ever-changing needs.
In addition, we created an adaptable system that allows future configurators to seamlessly build on the developed user experience. This enables the efficient development and implementation of future configurators and ensures that they are consistent in usability and visual appearance.
Optimal usability on any device
The customer's requirement was clear: the configurator had to work smoothly on all devices. We created a generously dimensioned input panel that also allows users to check their customizations in real time on the configuration screen, thanks to the layout. This flexibility and ease of use ensures that the configurator works on every device and meets the user's expectations.
The prototype as the basis for direct user testing
The highlight of the project is the development of a working prototype, which is then tested with real Hawa customers. The findings and feedback from these tests are then consistently incorporated into the design. Through user testing, we hope to gain valuable insights into operation, wishes and other features. In this way, we focus on continuing to offer an outstanding user experience that meets the demands of Hawa's discerning customers.
The outlook
The next steps in this exciting journey include the implementation of project management and the addition of more products to the configurator, taking into account the findings from user testing. The design system will continue to serve as a solid foundation for harmonizing the user experience across Hawa's platforms and further enhancing the brand.
This project for Hawa Sliding Solutions has not only given us the opportunity to demonstrate our expertise in UX/UI design and the creation of design systems, but also to work with a world-class partner on innovative solutions. We look forward to the next steps and to continuing to work with Hawa to realize their vision.
The results at a glance
Over the course of the project, we were able to achieve a wealth of quantitative and qualitative results:
🚀
Design System Structure
Successful integration of the design system based on Carbon Design.
⚙️
Configurator optimization
A user-friendly, inclusive design that works on all devices.
💻
Creation of a functional prototype
Creation of a prototype for the "Hawa Concepta III" product configurator, which is already available to real users.
Do you want to know more about this project?