An Iconic Brand Realizes its Digital Potential—Thanks to Bosch Brand Guide plus Frontend Kit
20,000+
Registered users
3
Awards
One brand, one look
Bosch—a truly international brand with projects spanning the entire globe: From Bosch Home & Garden and Bosch.IO to Bosch eBike and other brands, such as Freud, Rexroth and Dremel. There were more than 100 different brand guidelines when Bosch and its parters first contracted us to create a unified, digital appearance for its brand and subbrands in 2018. As a partner for UX/UI, we co-developed the Bosch Brand Guide in cooperation with Bosch’s Corporate Design Division and Bosch.IO. The brand guide acts as a central online platform and unites all guidelines and building blocks of Bosch’s corporate and digital designs. We are responsible for continuing the development and application of the new design system while keeping an eye on UX, UI and frontend development topics. In undertaking this venture, we help Bosch to tap the full potential of its various brands across all touchpoints. An accelerated time-to-market for digital products and services, high quality front-end coding and competitive costs for template and asset design are some of the key contributors to this lasting success.
One central platform
Whether landing pages, e-commerce platforms or connected-home apps, the Bosch Brand Guide acts as a central point of contact for everyone designing and developing products and services for the digital ecosystem. The digital platform is based on the SaaS platform Frontify, which offers high flexibility in scalability and facilitates collaborative development thanks to its WYSIWYG principle. Regarding platform design, we supported the development of an easily accessible and intuitive user experience to increase acceptance among the different users such as designers, developers, product managers or brand managers so as to promote compliance with the brand guidelines.
Brand guidelines have to work for the users. As we are users of such guidelines ourselves in many projects, we are all too aware of both the needs and pitfalls of design and frontend implementation. This enables us to turn our combined competence of UX expertise and user perspective into optimal solutions.
A living guide
Conventional brand and style guides are usually only available as static documents such as PDF files. This means that every modification to the guide must first be transferred to the document, leaving users without the latest version in the dark. The award-winning Bosch Brand Guide provides a more intelligent solution: as a living, dynamic instrument, it’s the single point of truth for users. Here is where all the information is found—accessible at any time and always up to date. Changes and additions can be implemented quickly and are available to all users in real time. The perfect basis for more agility, efficiency and brand consistency.
A premium look
The Bosch Brand guide provides guidelines for brand identity and—in its template library—defines basic elements for a wide range of applications, including digital design, print and video as well as location development and office equipment. All specifications and templates are based on central design principles such as accessibility in accordance with the current Web Content Accessibility Guidelines (WCAG 2.1). With this in mind, we worked with the Bosch team and their other partners to revise the color scheme, contrast and typography, thereby laying the groundwork for a consistent, high-quality and inclusive design.
A unified framework
We ensure uniformity not only in appearance of the design system, but also in the background. Previously, the usage of different web technologies meant that there were also different code libraries, translating into varying quality and workload times for projects. As a unified framework, the frontend kit provides a remedy to these discrepancies by providing a high-quality component library for cross-technology frontend code. Its “UI Core” is based on the Atomic Design Principle and features basic elements for all digital interfaces, including buttons, backgrounds, navigation items, menus etc. Thanks to its modular set-up as well as its separate HTML/CSS structures and logic, the content can be used flexibly and is quickly reusable for a wide range of projects.
Enthusiasm and tight cooperation are essential elements for success. Experience One has succeeded in inspiring us. The team continuously impresses us through their proactive and visionary suggestions. Their idea for the frontend kit is exemplary of this level of commitment. We regularly receive additional tips that contribute to productivity and quality.
Success factors
Clear core principles
Brand guides must rely on clear core principles. The two most important ones for this project were: Flexibility through modularity and sustainability through reusability. These new templates contributed to these points with their universal and customizable building blocks.
UX research
Users are always our focus. Thanks to detailed dialogs and workshops with relevant stakeholders, we were able to align our decisions to all the users and beneficiaries of the Bosch Brand Guide and the frontend kit. These exchanges fostered important shifts in perspective in order to find the best solution for everyone: the Bosch brand, the users of the Brand Guide—and ultimately Bosch’s customers.
State of the art
In order to comply with accessibility principles and ensure the continuous development of the Brand Guide, it relies on essential industry standards. We stay on top of the current demands and implement them. What’s more, we ensure that that the guide continually grows and learns by adding new components, analyzing feedback and answering questions from users.
Team, facts and contact
-
Luise Zimmermann
-
Kathrin Eichhorn
-
Christian Poulsen
-
Malte Muth
-
Sascha Weisheit
Project period
- 2018 – present
Tasks
- Consulting
- Strategy
- Product Ownership
- UX Design
- Visual Design
- Frontend Development
- Project Management
- Stakeholder Management
- Technical Support
Technologies
- Frontify (Brand Guide Platform)
- Sketch (Templates & Libraries)
- WebTrends
- HTML, SCSS, JS
- WCAG 2.1
- Vanilla JS
Fancy working with us?
Say hello
