Efficient and consistent: A transformative design system for STIHL

The STIHL Group is an internationally active world market and technology leader that develops, manufactures, and distributes equipment for professional users in forestry and agriculture, as well as landscape maintenance and the construction industry. It also serves private garden owners. Their range is complemented by digital solutions and services.

STIHL products are sold through a network of servicing dealers and the company's own online shops, which are planned for international expansion in the coming years. The company has 44 of its own production and distribution companies, around 120 importers, and more than 55,000 specialist dealers in over 160 countries. STIHL has production plants in seven countries: Germany, the United States, Brazil, Switzerland, Austria, China, and the Philippines.

Since 1971, STIHL has been the world’s best-selling chainsaw brand. Founded in 1926, the company is headquartered in Waiblingen, near Stuttgart. As a family-owned company, STIHL aims to make it easier for people to work with and in nature. In 2023, STIHL generated a turnover of 5.27 billion euros with 19,805 employees worldwide.

Like many German companies, STIHL faces the challenge of modernizing traditional corporate structures to successfully implement agile and cross-departmental digital transformations.

Often, several departments work independently on interface solutions for similar problems and tasks. Although these parallel solutions often reach a high level and fulfill their individual goals, they are frequently inconsistent, not universally transferable, and more costly in terms of time and resources.

That is why the “Design System” project pursues the following goals for the company:

1. Cross-departmental efficiency increase in design & development
2. Consistent brand perception on the user side
3. Reduction of design modules and code production
4. Acceleration of platform or product launches
5. Usability optimization / error minimization

Design systems are an important building block for companies like STIHL to stay up-to-date with the latest technology in interface design across platforms. They offer cross-departmental solutions that ensure specific application requirements are met consistently. For this reason, STIHL partnered with Moccu to build pattern libraries for UI design elements.

Striking the right balance between clear guidelines, useful templates, and variable modules – while allowing flexibility for teams – is a crucial factor.

We achieve this by providing uniform basic elements with the associated guidelines. These include fundamentals such as colors, font styles and sizes, design grids, design language, icons, and universal core components.

At the platform, team, and product level, there remains enough flexibility for individual module elaboration. This ensures that the design system, on one hand, saves significant effort and, on the other, ensures a consistent brand experience throughout customer journeys by providing essential style-defining elements and their application guidelines.

Defined styles and elements can be easily reused, saving designers and developers time while automatically reducing errors. Numerous repetitive basic tasks are no longer necessary. This frees up not only design and development teams but also many other resources, allowing them to focus on future-oriented challenges such as real innovations and platform-specific solutions.

Accessibility and optimizations already considered

All provided elements, including the button, meet the latest standards and accessibility guidelines. The button is stored and tested as a component in all relevant variations, ensuring consistency and quality. Any necessary optimizations are implemented and distributed across all areas without delay, allowing the design system to continue saving effort and costs in the future.

Using anonymous usage data, Figma Analytics provides insights into how often components from the design system are used. As of May 2024, 34 STIHL teams are utilizing 118 components. The most frequently used component is the button, which has been employed 46,446 times, with only 133 decouplings.

A component is only decoupled from the design system when it needs to be customized because the required variant isn’t stored in the system. The button’s low decoupling rate shows that it and its stored variants are very well received by the design teams.

Working with design systems is an ongoing optimization process that requires iterative updates to stay relevant. This means adjusting the mindset and objectives of the work: rather than viewing the design system as a finished product, it is seen as a continually evolving tool.

These small optimizations and adjustments keep all components up to date, reflecting the latest research and enabling easy adaptation to new guidelines. For example, the design system plays a central role in helping teams implement the WCAG accessibility guidelines, which will be mandatory from June 2025 according to the Accessibility Strengthening Act (BFSG).