Robert Bosch GmbH | Bosch Brand Guide

Eine ikonische Marke entfaltet ihr digitales Potenzial – dank Bosch Brand Guide mit Frontend-Kit

20.000+

Registrierte User

Awards

Eine Marke, ein Erscheinungsbild

Bosch – eine Marke mit Weltruhm, aber auch mit vielen Umsetzungen rund um den Globus: von Bosch Home & Garden, Bosch.IO und Bosch eBike bis hin zu weiteren Marken im Portfolio wie Freud, Rexroth und Dremel. Mehr als 100 verschiedene Brand Guidelines gab es, bevor wir 2018 im Auftrag von Bosch und mit weiteren Partnern begannen, ein einheitliches digitales Erscheinungsbild für die Marke samt Submarken umzusetzen – und die konzernweiten Nutzer dazu befähigten, an dieser Zielsetzung mitzuwirken. Als UX/UI Agentur haben wir den Bosch Brand Guide unter Führung der Corporate-Design-Abteilung von Bosch sowie Bosch.IO mitentwickelt. Dieser ist die richtungsgebende Instanz und vereint als zentrale Online-Plattform sämtliche Leitlinien und Bausteine des Corporate und Digital Designs. Die konsequente Weiterentwicklung sowie Anwendung treiben wir voran und behalten das UX, UI und das Frontend Development im Blick. Damit unterstützen wir die Erschließung des vollen Potenzials der Hauptmarke Bosch sowie der weiteren Marken über alle Touchpoints hinweg – und tragen so zum Unternehmenserfolg bei: dank einer beschleunigten Time-to-Market für digitale Angebote und Services, einer hochwertigen Frontend-Code-Qualität und geringeren Kosten für die Gestaltung und Entwicklung von Templates und Assets.

Eine zentrale Plattform

Der Bosch Brand Guide ist die zentrale Anlaufstelle für alle, die Produkte und Services für das digitale Ökosystem entwerfen und entwickeln – ob Landingpage, E-Commerce-Plattform oder Connected-Home-App. Die digitale Plattform basiert auf der SaaS-Plattform Frontify, die eine hohe Flexibilität in der Skalierbarkeit mitbringt und dank WYSIWYG-Prinzip eine kollaborative Weiterentwicklung begünstigt. Hinsichtlich Plattform-Design unterstützten wir bei der Entwicklung eines einfachen Einstiegs und einer intuitiven Nutzerführung, um die Akzeptanz bei den verschiedenen Anwendern wie Designern, Entwicklern, Product Managern oder Brand Managern zu erhöhen und die Einhaltung der Brand Guidelines zu fördern.

Brand Guidelines müssen für die User funktionieren. Weil wir in vielen Projekten selbst Nutzer solcher Leitlinien sind, kennen wir die Bedürfnisse und Fallstricke der Design- und Frontend-Umsetzung nur zu gut – und können unsere doppelte Kompetenz aus UX Expertise und Nutzersicht in optimale Lösungen verwandeln.

Fay Nolan, Visual Design bei Experience One

Ein lebender Guide

Herkömmliche Brand und Style Guides liegen meist nur in Form statischer Dokumente wie PDF-Dateien vor. Das heißt: Jede Anpassung muss erst aufwendig in das Dokument übertragen werden und oftmals haben nicht alle Nutzer Zugriff auf die letztgültige Version. Eine intelligentere Lösung liefert der preisgekrönte Bosch Brand Guide: Er ist ein lebendes, weil dynamisches Instrument und der Single Point of Truth. Hier befinden sich sämtliche Informationen – jederzeit abrufbar und stets aktuell. Änderungen und Ergänzungen sind schnell umsetzbar und in Echtzeit für alle User verfügbar. Die perfekte Grundlage für mehr Agilität, Effizienz und Markenkonsistenz.

Ein hochwertiger Look

Der Bosch Brand Guide hält sowohl Richtlinien zum Markenverständnis bereit als auch in einer Template Library verfügbare Basis-Elemente wie Logos, Icons, Bildwelt etc. für vielfältige Anwendungsfälle – vom Digital Design über Print und Video bis hin zu Standortgestaltung und Geschäftsausstattung. Sämtliche Regularien und Templates bauen auf zentrale Design-Prinzipien wie Barrierefreiheit gemäß der geltenden Web Content Accessibility Guidelines (WCAG 2.1). Gemeinsam mit dem Bosch Team und deren weiteren Partnern haben wir Farbgestaltung, Kontrast und Typographie in diesem Sinne überarbeitet und legen mit der Plattform die Grundlage für eine konsistente, hochwertige und inklusive Gestaltung.

Ein einheitliches Framework

Für Einheitlichkeit sorgen wir nicht nur im Erscheinungsbild, sondern auch im Hintergrund. Wo unterschiedliche Web-Technologien im Einsatz waren, gab es auch verschiedene Code-Libraries – mit entsprechendem Aufwand sowie Qualitätsabweichungen. Das Frontend-Kit, eine hochwertige Komponenten-Library für technologieübergreifenden Frontend-Code, schafft Abhilfe und fördert ein einheitliches Framework. Ihr „UI Core“ basiert auf dem Atomic-Design-Prinzip und beinhaltet Basis-Elemente für alle digitalen Interfaces – beispielsweise Buttons, Hintergründe, Navigation, Menü etc. Dank eines modularen Aufbaus sowie einer Trennung von HTML/CSS-Strukturen und Logik sind die Inhalte für unterschiedlichste Projekte flexibel nutzbar und schnell wiederverwendbar.

Schaubild zur Visualisierung der Komponenten-Library basierend auf dem Atomic-Design-Prinzip mit Atoms, Molecules und Organisms

Das BOSCH Areal bei Nacht © Robert Bosch GmbH

Begeisterung und enge Zusammenarbeit sind essenziell für Erfolg. Experience One hat es geschafft, uns zu begeistern. Das Team überzeugt laufend durch proaktives Handeln und visionäre Vorschläge. Ihre Idee für das Frontend-Kit ist beispielhaft für das Engagement. Regelmäßig erhalten wir weitere Tipps, die maßgeblich zur Produktivität und Qualität beitragen.

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

Erfolgsfaktoren

Klare Kernprinzipien

Ein Brand Guide benötigt klare Kernprinzipien. Die beiden wichtigsten für dieses Projekt lauteten: Flexibilität durch Modularität und Nachhaltigkeit durch Wiederverwendbarkeit. Die neuen Template- und Komponenten-Libraries mit ihren universell einsetzbaren und individuell anpassbaren Bausteinen leisten diesbezüglich einen wichtigen Beitrag.

UX Research

Nutzer stehen für uns stets im Fokus. Dank intensivem Austausch und Workshops mit relevanten Stakeholdern konnten wir unsere Entscheidungen auf alle User und Profiteure des Bosch Brand Guides und des Frontend-Kits ausrichten. Der Dialog erleichterte den wichtigen Perspektivwechsel, um die beste Lösung für alle zu finden: die Marke Bosch, die Anwender des Brand Guides – und letztendlich auch die Kunden von Bosch.

State of the Art

Um Grundsätze der Barrierefreiheit einzuhalten und den Brand Guide fortlaufend weiterentwickeln zu können, basiert er auf essenziellen Industriestandards. Wir behalten die aktuellen Anforderungen im Blick und setzen sie um. Darüber hinaus sorgen wir dafür, dass der Guide wächst und lernt: Wir ergänzen neue Komponenten, analysieren Feedbacks und beantworten Fragen von Usern.