Hilti's first design system was a grass-roots effort that started just as I joined Hilti. It was one of my main projects where I was a primary designer, but also the product owner leading its creation. The design system helped Hilti's new branding be used in its digital products and was chosen as the official design system for all digital products.
Head of UX, 7 Product Designers, 1 Developer
Product Design Lead, Product Owner
Adopted by all new digital products since 2019
Reduced component design delivery from 6 weeks to 3 days
Hilti was not unique in its lack of a unifying design system. Despite having a new visual language and strong branding, it was not clear when looking at its digital products. Each team making apps had to interpret the brand on their own, which caused problems. Teams had to redo their work if the brand rejected it, they spent a lot of time discussing things that weren't productive, and users had bad experiences with the apps because they were poorly designed and didn't work the same way.
While not highlighted here, together with 7 other designers, I designed individual components and component improvements.
In order to support my process and mentor other designers to deliver the best results, I created a component design checklist. This ensured no matter who was responsible for the design that a component would be designed and built with all the correct specifications and integrate seamlessly into our system. As you can see below this covered things like accessibility, localization, states, configuration, and more.
No system is complete without documentation of both guidelines how to design using the components, but also how to implement them using the libraries. In addition to usage guidelines, we also had separate guidelines for contribution and management of the system in Confluence. The Design System Management software we used was also able to incorporate my feedback to support meta data for improved icon search-ability. At the time, this was a feature I missed greatly using Google Material icons.
Developers would meet with the designer while the component was being designed to give their input and feedback. After the component was finished being designed, the designer would go over it with the developer to make sure everything was correct and answer any questions. At the end of each development period, developers would show the final component before it was approved and added to the system.
The main purpose of this case study is to highlight my design leadership of the design system. I led the creation of a design system at Hilti for 2 years. I made sure the system was created and updated properly, and I taught a younger designer to take over when I was done. In this time I established processes for prioritizing, designing, steering, improving, and delivering the foundation and updates to the system.
In order to establish a foundation for the system, I identified benchmark systems, which were used to define our first foundational components. In addition to the foundational components, the design system team voted, at the beginning of each design sprint, which components would be worked on first. This inclusive process ensured high motivation, but also that we were prioritizing the most needed components. Because every designer had obligations to other teams, we had a unique perspective into the demands of Hilti's digital product portfolio.
After establishing the foundation, I talked to other designers in the community and asked about any gaps they saw. Then, I used an impact priority matrix to pick the most important components or improvements to work on each sprint. From this list, I polled the entire design community to pick their top 2 favorites.
I learned that the more people were involved in creating the system, the more likely they would use it in the products. At first, we had to get people to use the system by including them in the process. The voting helped get people on board and made the system successful. Later, Hilti's leadership team made it mandatory for everyone to use the system.
I set up design sprints to make sure we were all working at the same pace and meeting deadlines. This was especially important because everyone on the team had other projects they were working on. Using design sprints helped us all stay on track and made it easier to calculate our velocity, which I used to drive improvements in speed and plan releases and release communication.
I created a steering board to help with the design system project because it involved so many people and teams across the company. The board had four goals: 1) Including everyone, 2) Using everyone's experience, 3) Making sure everyone is on the same page, and 4) Making sure the project is successful. The board would meet to discuss and resolve issues and the members were trusted to make final decisions for their teams. The goal was to make sure things got done quickly and smoothly.
As part of an agile process, I held retrospectives at the end of each sprint. This process informed improvements big and small to help us improve how we work and the end result. Two examples which resulted from this exercise were the design-athon experiment (below) to explore other ways of working which solved individuals capacity and prioritization challenges. You can see the result of this in the 'What went well?" column below. Another example was an improved documentation standard which was assigned to a teammate. You can see the need arising in the right two columns below. This effort would later bring much more consistency, clarity and professionalism to the system.
I came up with the design-athon experiment to solve problems we were having with getting things done. We were taking about 6 weeks to make a new component from start to finish. I saw that people were having trouble fitting the design system into their other work. I had two hypothesis for the experiment. The first was that if people just focused on one thing for a long time, they could have more and higher quality output. The second was that if everyone worked on the same thing at the same time, it would take less time to finish because we wouldn't have to wait on each other. I asked everyone to work on the design system for 3 whole consecutive days. It was a fun change and we got a lot done. We made multiple components in just 3 days, instead of the 6 weeks it usually took. After that, our team and other teams adopted this method to organize and get things done.
Hilti's design system is thanks to the hard work and effort of a lot of people. I was fortunate to lead this project to it's successful adoption from a grass-roots project to the official design standard for Hilti's digital products. Below is a video I made with two others during a design-athon to promote the system within the organization.
Adopted by all new digital products since 2019
Reduced component design delivery from 6 weeks to 3 days
