A design system for GARDENA apps
For the GARDENA Digital Hub in Zurich, I designed and implemented a custom design system specifically for the GARDENA smart and Bluetooth apps. My goal was to create a system that benefits both designers and developers equally — and makes their work easier in the long term.
Through interviews with designers and developers, I was able to identify their specific needs and challenges. I then conducted extensive research and identified innovative tools to address the issues found.
I achieved my goal by introducing a new toolchain and implementing a strategic plan to revamp the app user interfaces — without requiring additional resources.
Problems and Challenges
After a thorough analysis of the current state of the design and development process, I identified several potential issues. One major problem was that each designer used a local pattern library in Sketch without any coordinating meetings to align on changes. This led to inconsistencies both in the designs and later in the app.
Additionally, the designs in the Sketch files were not synchronized with the live app, and custom code was frequently used to address specific issues. Moreover, the components in the local pattern libraries were hardly documented or specified, which further complicated development and hindered clear communication between teams.
The app’s accessibility was poor due to low contrast ratios and overly light font weights. In addition, the app’s design language was not aligned with GARDENA’s hardware products, and the overall design was outdated. Since no additional resources were available to implement the design system in the app, I had to develop a strategy to make this feasible.
This situation posed a challenge for the entire team and highlighted the importance of synchronized collaboration, a clear design language to prevent problems, and a central source of truth for information.
Solution
The optimal approach for designers and developers would be to work with design system components in the same way as with Lego bricks. These could be combined with each other and would fit together perfectly. This systematic approach would save time and costs. Components would be created once — both in design and in code — and could then be reused by all team members.
To implement this effectively, it would be essential for each component to be accompanied by comprehensive documentation. This documentation should include details about the component’s behavior in different viewports, technical specifications, and the correct spacing to other components or parent elements.
On my initiative, we switched from the design tool Sketch to Figma, a cloud-based tool that eliminates the need for local files. In addition, I introduced Storybook to display live components.
To establish a central source of truth, I used Zeroheight. This brings together Figma designs, documentation, and Storybook components in one accessible place for everyone.
We also introduced rules for design reviews and improved obvious issues such as the typography in the app. In addition, I migrated outdated components from the Sketch library to Figma, standardized them there, and made them available to designers as Figma components.
"By developing and implementing a design system, Dirk moved us a decisive step forward towards structure and consistency."
Felix Wegerhoff
Manager Product Management GARDENA Robotics & Smart
The documentation for each component includes the following sections: definition, anatomy, usage guidelines, examples, dos and don'ts, specifications, and a section for related components.
Each page is divided into an overview, a design, and a code section.
Finally, I developed a strategy to introduce the new design system without requiring additional resources. Implementing these measures enabled optimized design and development, as well as a consistent design language for both apps.
"Thanks to Dirk’s pragmatic and iterative approach, the team was able to celebrate early successes, and a design system quickly emerged that is now a pleasure to work with across all products."
Christian Davataz
Senior Full-Stack Developer
Result
I am very pleased with the outcome. My goal was to develop a design system that not only exists in Figma and is used by designers but also has a tangible, positive impact on development. The Tulip Design System has now become an indispensable tool for all designers (UX, UI, and Industrial), UX copywriters, and developers.
By introducing component-based development, we were able to reduce code by 80% when redesigning existing pages. This led to significant time savings for both designers and developers, as changes to main components are automatically applied to their instances.
In addition, the ‘Tone of Voice’ was integrated into the design system, and a language guide ensures that copy in both apps is written consistently.
These changes have helped to streamline the design and development process, establish a consistent design language for both apps, and save time and costs in both design and development.
A design system is a dynamic tool that continuously grows, evolves, and adapts. It never reaches a final state, as there are always new aspects and improvements to add.
“I look back fondly on the highly enriching collaboration with Dirk. His expertise and experience were crucial to the successful creation and launch of our design system! Thank you, Dirk, for your dedicated and goal-oriented teamwork!”
Martin Möckli
Product Owner
“Dirk’s experience and expertise in design systems, combined with his strong technical understanding, enabled the collaborative development of a design system that served as the foundation for reusable components while also delivering a sustainable and significantly improved developer experience.”
Markus Gruber
Senior Full-Stack Developer
Designers design interfaces.
Developers write code.
We build the bridge – your scalable design system.