- Add to bookmarks
-
0BookmarksBookmark added. Bookmark removed.
- Quicklinks
A pattern library is a type of digital construction kit for design elements. All of a company’s digital products that are created using HTML code can be developed thanks to this toolkit. At Liebherr, the library has already been developed in all resolutions for editorial websites, portals and web apps. Like all touchpoints, these formats (internal and external) form part of the Group’s branding and must be designed and developed in line with the CD. If third-party software is used, it is important to check which branding elements can be used and to what extent branding is possible. This is decided and implemented on a case-by-case basis. Feel free to contact us!
What is the Liebherr Pattern Library?
The Liebherr Pattern Library is the link between designers and developers and consists of two parts: the repository and the documentation.
The repository is a central digital storage location where the UI components of the design system are organised and managed as HTML code snippets. It enables structured management of code and data, facilitates collaboration between developers and provides mechanisms for tracking changes over time.
The open source interface ‘Storybook’ serves as a documentation tool to clearly visualise the available components and their use and to guarantee the visual identity of the Liebherr brand on web interfaces. It helps developers in creating and testing UI components for web applications in an isolated environment and promotes the reusability and visual inspection of components.
The Pattern Library is a valuable tool for UI developers and design teams to improve the quality and efficiency of development work.
Insight into the documentation of the Pattern Library on Storybook: Options for displaying a button
What are the advantages of using the Liebherr Pattern Library?
1. Standardised appearance for the Liebherr brand
The Liebherr Pattern Library ensures that the brand specifications can be implemented correctly throughout the entire Group.
2. Improved user experience
The use of recurring, standardised interaction patterns and components enables simple and intuitive usability of all Liebherr products and digital services. This helps to increase the satisfaction and loyalty of Liebherr’s customers and employees and, in doing so, improve the CLTV (Customer Lifetime Value).
3. Products and services created quickly
Thanks to the centralised documentation on Storybook, it’s also possible for new project members to familiarise themselves quickly. Designers are able to quickly create prototypes of new pages and elements. Developers can view this information and extract the codes from the system directly. This means Liebherr’s digital products can be created efficiently and continuously developed.
4. Better team collaboration
By clearly defining the most important design elements and showing how they are used on user interfaces, we ensure that everyone has a shared idea of the design target image. This means that teams from different disciplines (e.g. different service providers) are not only able to work together seamlessly, but also to develop new components together with ease.
The Liebherr Pattern Library is constantly being developed and revised. You can see the existing elements here:
How and where are the individual components of the pattern library created?
We have been using a corporate licence for Figma software since September 2021 as our overarching design and prototyping software. The design components and prototypes for portals and websites are created in Figma. The code components can then be found in the pattern library described above. Every component that can be found in the design system in Figma is transferred to the pattern library as a code component.
Access to the systems
If necessary, you can use our ticket system to request access to the systems or submit requirements for new components.
Contact
If you have any further questions, please do not hesitate to contact us. Please use the contact form provided or visit our LHO service desk (only for Liebherr employees).