Translating Brand into Product

Neugestaltung einer B2B-SaaS-Plattform für intelligentes Energiemanagement im Rahmen des Rebrandings

Überblick

Herausforderung

Mit dem Rebranding des Unternehmens, das bereits in der Außenkommunikation abgeschlossen war, galt es letztlich die neue Markenpersönlichkeit auch in die Produkte zu übersetzen. Damit sollte zum einen der Wiedererkennungswert als auch ein konsistentes Markenbild über alle Touchpoints von Kunden und Usern erreicht werden. Um diese Herausforderung als Chance wahrzunehmen, war es ein Anliegen über Äußerlichkeiten wie die neue Farbwelt hinaus auch Nutzerfreundlichkeit und Funktionsumfang zu überarbeiten.

Die neue Corporate Identity

Die neue CI bringt Moderne, Dynamik und Professionalität mit sich. Bei der Auswahl der Farbwelt war ein ausschlaggebender Punkt zwischen der Flut an grünen und blauen Unternehmen in der Branche aufzufallen und sich visuell abzusetzen. Damit kam allerdings auch eine Problematik hinzu – während die Übersetzung der neuen Marke im Webdesign und Marketing vergleichsweise problemfrei von statten ging, gestaltete sich das Redesign der Plattform als deutlich schwieriger aufgrund der kräftigen Farbpalette.

Balanceakt zwischen Brand und Usability

Während im Marketing ein auffälliges Erscheinungsbild von Vorteil sein kann, wird eine kräftige und kontrastreiche Farbgebung in einem Softwareprodukt schnell zum Problem. Es galt eine angemessene Balance zwischen guter Nutzbarkeit durch klare, angenehme Farbgestaltung und Kommunikation der Markenpersönlichkeit zu finden.

Nach ausgiebiger Exploration aller Möglichkeiten wurden vier Richtungen in die nähere Auswahl aufgenommen: Primary Brand Color – Gelb, Secondary Brand Color – Lila, Neutral Color – Dunkelgrau und Türkis als abweichende, aber harmonisch zur Brand passende Primary Product Color. Zur Entscheidungsfindung wurden u.A. folgende Anforderungen berücksichtigt:

• Harmonie mit geplanten Chartfarben
• Barrierefreie Farbgestaltung: Kontrast, Unterscheidbarkeit von Farben (rot/grün)
• Whitelabel Möglichkeiten
• Präferenzen der Zielgruppe
• Wiedererkennungswert

Es wurde sich letztlich für die Neutrale Farbgebung entschieden und somit die Markenpersönlichkeit gegenüber den Faktoren Barrierefreiheit und den Zielgruppenpräferenzen zurückgestellt. Die neutrale Gestaltung ermöglicht außerdem eine flexiblere Auswahl der Chartfarben, die zu dem Zeitpunkt noch nicht vollständig festgelegt wurden.

Entwicklung des Design Systems

Aufgrund des kurzen Zeitrahmens des Projekts, wurde zur Erstellung des Design Systems externe Hilfe herangezogen. Die Agentur lieferte ein bestehendes Designsystem in Figma auf Grundlage der Component Library shadcn.
Ziel war ein kompletter Neuaufbau des alten Design Systems. Hierzu wurden zunächst Schritt für Schritt die shadcn Komponenten gemäß der neuen CI angepasst. Auf Grundlage der zentralen User Flows des Produkts wurden wiederum Komponente identifiziert, die in der Bibliothek fehlten und diese von Grund auf neu erstellt.
Schließlich wurden die bestehenden zentralen Features und Flows mit der neuen Komponentenbibliothek redesigned und dabei generelle Verbesserungspotenziale identifiziert.

Implementierungsplan

Ziel war das Ausrollen des neuen Designs auf der bestehenden Infrastruktur. Es sollte vermieden werden in einem stetigen Loop aus Verbesserungen und Weiterentwicklungen festzuhängen, was häufig der Fall bei solchen Unterfangen sein kann. Essenziell war außerdem, dass alle Funktionen weiterhin uneingeschränkt nutzbar bleiben.

Es wurde also ein Implementierungsplan ausgearbeitet, der grundlegend zwei Phasen umfasst:

1. Visuell auffälligste Umgestaltung
2. Austausch restlicher Komponenten Feature für Feature

Im ersten Schritt wurde zunächst der Fokus auf die Aspekte gesetzt, die für die User den größten visuellen Unterschied machen: neue Farben (außer Chartfarben), Firmenschrift und neues Basis Layout mit Sidebar und optimierter Topbar. Diese große Anpassung wurde im Voraus den bestehenden Kundinnen und Kunden kommuniziert sowie ein Pop-up integriert beim ersten Öffnen der Plattform.

Im zweiten Schritt sollten in absteigender Wichtigkeit alle Features und Funktionen überarbeitet werden. Dies beinhaltet der Austausch aller alten mit den neuen Komponenten und Verbesserungen der User Flows. Aber auch eine grundlegende Hinterfragung von einzelnen Features ist geplant.

Ergebnis & Erkenntnisse

Mit dem Redesign wurde die neue Markenidentität erstmals konsistent in das Hauptprodukt übertragen und eine neue visuelle Grundlage für die weitere Produktentwicklung geschaffen. Das neue Design System ermöglicht dabei, bestehende und zukünftige Features schrittweise auf ein einheitliches Erscheinungsbild zu überführen.

Ein wichtiges Learning aus dem Prozess ist, dass eine direkte Übertragung einer Corporate Identity auf ein komplexes Softwareprodukt nicht immer sinnvoll ist. Insbesondere die gegenüber der Brand neutralere Farbgestaltung schafft hier bewusst Raum für klare Datenvisualisierung und zukünftige Anforderungen.

Der schrittweise Rollout ermöglichte es außerdem, das neue Erscheinungsbild früh zu veröffentlichen und anschließend kontinuierlich auf weitere Features und Flows auszuweiten.

---