Icon_arrow_left Icon_arrow_right Combined Shape Created with Sketch. Combined Shape
Robert Bosch GmbH | Bosch Brand Guide

An iconic brand realises its digital potential—thanks to Bosch Brand Guide plus frontend kit

The Bosch Brand Guide in action—designers and developers follow its intuitive guidelines.

20,000+

Registered users

2

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.

The Bosch Brand Guide homepage conveys Bosch’s digital design system and corporate design principles in an intuitive and appealing way.
Experience One employee quote on the Bosch Brand Guide

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.

Franz Mattuschka, Visual Design at Experience One
Franz Mattuschka, Visual Design at Experience One

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.

Example screen from the Bosch Brand Guide, a living style guide that always offers up-to-date content

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.

Diagram visualizing the Web Content Accessibility Guidelines, ensuring that the Bosch Brand Guide can be used without barriers

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.

Diagram visualizing the component library based on the Atomic Design Principle with atoms, molecules and organisms.
Das BOSCH Areal bei Nacht © Robert Bosch GmbH

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.

Saskia Füllgrabe, Product Area User Management at Bosch.IO GmbH
Saskia Füllgrabe, Product Area User Management at Bosch.IO GmbH

Success factors

1

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.

2

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.

3

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

Project period

  1. 2018 – present

Tasks

  1. Consulting
  2. Strategy
  3. Product Ownership
  4. UX Design
  5. Visual Design
  6. Frontend Development
  7. Project Management
  8. Stakeholder Management
  9. Technical Support

Technologies

  1. Frontify (Brand Guide Platform)
  2. Sketch (Templates & Libraries)
  3. WebTrends
  4. HTML, SCSS, JS
  5. WCAG 2.1
  6. Vanilla JS

Contact

Jens Fauth Management

Fancy working with us?

hello@experienceone.com

You might also be interested in

Cookies