Design System und Qt-Komponenten von Ergosign für BSH

Effizienzsteigerung und Markenkonsistenz mit dem Design System von Ergosign

Die Bosch Siemens Hausgeräte GmbH (BSH) vereint weltweit bekannte Marken wie Bosch, Siemens, Gaggenau und NEFF im Haushaltsgerätemarkt. BSH stand vor der Herausforderung, die Effizienz der Produktentwicklung im Bereich Graphical User Interfaces zu steigern und Synergien zwischen den Marken zu schaffen. Ergosign wurde mit dem Aufbau, der Etablierung und Weiterentwicklung markenspezifischer Design Systeme beauftragt, welche Design Assets und Qt-Entwicklung durch integrierte Komponenten vereinen.

Concept
Organizational Design
Design System
Design Token
Qt Development

Brief Crossfunktional und Agil ans Ziel

Zu Beginn alle Stakeholder an einen Tisch zu bringen und gemeinsam die Anforderungen und Ziele zu sammeln und zu priorisieren ist wesentlich für ein erfolgreiches Projekt. Ergosign initiierte eine umfassende Analysephase, damit wir verstehen lernten, wie bei BSH Design und Entwicklung ineinandergreifen. Zunächst wurde ein Design System für die Marke Bosch entwickelt. Hierzu sollte Ergosign die bestehende Gestaltung in konsistente Figma-Komponenten überführen und so redundante Codeentwicklung vermeiden. Den internen Design- und Entwicklungsteams wird dadurch eine Toolbox geboten, mit der Graphical User Interfaces konsistent und nutzerorientiert gestaltet werden können.

Die BSH stellte das cross-funktionale Team aus der gesamten Organisation bereit – mit den zur Auftragserfüllung erforderlichen Kompetenzen. Die Umstellung der Arbeitsweise auf agile Methoden durch Ergosign förderte die Zusammenarbeit und ermöglichte die Verbesserung bestehender Prozesse.

ApproachDesign-Tokens für Flexibilität & Skalierbarkeit

Die wesentliche Herausforderung an das BSH Design System bestand darin, ein flexibles System zu schaffen, das die Vielfalt der Marken, Produkte und zu unterstützenden Hardware-Konfigurationen ohne Einschränkung der Markenidentität und gestalterischen Freiheit bewältigen kann.

Der zentrale Bestandteil des BSH Design Systems ist ein flexibles Token-System. Die Tokens ermöglichen die einfache Umschaltung von Farbwelten und Displaygrössen, sowohl in Figma als auch im Qt-Sourcecode des Design Systems.

User Interfaces, die das Design System nutzen, können so schnell und einfach in Figma für die entsprechende Kombination aus Marke, Produkt, Displaygrösse und Hardwarekonfiguration entworfen werden. Durch die Bereitstellung entsprechender Qt-Komponenten kann der interdisziplinäre Übergabeaufwand zwischen Design und Entwicklung mit einem modernen Release-Konzept über den gesamten Produktentwicklungszyklus der BSH wesentlich effizienter und robuster gestaltet werden. Diese Releases sind von Beginn an für die jeweilige Hardware optimiert und getestet. Dies verbessert die Qualität des Endproduktes und trägt massgeblich zur Reduzierung des Entwicklungsaufwands bei. Ein paralleles Release Management, welches Design- und Development-Komponenten vereint, gewährleistet eine einheitliche Nutzung des Design Systems in allen Produkten.

OutcomeVerbesserte Design- & Entwicklungsprozesse

Die Etablierung des BSH Design Systems ging mit Veränderungen auf allen Ebenen einher, wobei der Hauptfokus auf der Effizienz- und Qualitätssteigerung im Design und der Entwicklung lag. Durch die zentrale Bereitstellung von Komponenten, die sämtliche Anforderungen für das Endprodukt erfüllen, werden redundante Entwicklungsarbeiten vermieden.

Die Integration des Design Systems in die BSH ermöglicht eine effizientere Nutzung von Design- und Entwicklungsbudgets: Ressourcen für produktrelevante und zukunftsweisende Entscheidungen werden besser planbar und können zielorientiert eingesetzt werden. Dies resultiert in einer gesteigerten Design- und Development Maturity und ermöglicht eine skalierbare Gestaltung von Graphical User Interfaces an den Produkten.

Bosch übernahm hierbei eine Vorreiterrolle. Mit der Marke Siemens wurde bereits eine weitere Marke in das System integriert. Weitere Marken planen derzeit die Einbindung in das Design System mit einer zusätzlichen Embedded-Technologie. Ergosign hat BSH befähigt, das Design System eigenständig weiterzuentwickeln, und ebnet somit den Weg für die nächste Generation der BSH-Produkte.

Mehr zu Qt for MCU
Viele verschiedene Anzeigeoptionen des Ring UI, wie Temperatur, Dauer, Off.

Quelle: Bosch User Interface Generation Digital Ring | Robert Bosch Hausgeräte GmbH, Bosch Design

Das Bosch Ring-UI ist Aushängeschild der aktuellen Gerätegeneration von Bosch. Mit dem „Digitalen Ring“ ist es Bosch gelungen, eine unverwechselbare Benutzeroberfläche zu schaffen, die als wiedererkennbares Markenelement für alle Hausgeräte dient.

BSH Design System visualisiert als Kugel mit Tokens, Prozessen, Worksflows im Kern, die Marken wie Bosch liegen als Schale darum.
Das Ring UI mit der Temperaturanzeige und Dauer.
Viele verschiedene Anzeigeoptionen des Ring UI, wie Temperatur, Dauer, Off.
Screenshot aus dem Design System mit der Skalierung für das Zieldisplay.
Screenshot aus dem Design System mit dem Theming für unterschiedliche Anwendungen.

About the clientBSH Hausgeräte GmbH

Die BSH Hausgeräte GmbH (BSH) ist ein weltweit führender Hersteller von Haushaltsgeräten mit Marken wie Bosch, Siemens und NEFF. Das Unternehmen hat sich der Bereitstellung hochwertiger Produkte für den täglichen Gebrauch verschrieben. Mit über 60.000 Mitarbeitenden weltweit konzentriert sich BSH darauf, innovative Lösungen für den Alltag zu entwickeln. Ihre Geräte werden in Millionen von Haushalten eingesetzt und tragen dazu bei, das Leben der Menschen bequemer und effizienter zu gestalten. BSH ist bestrebt, kontinuierlich die Qualität und Benutzerfreundlichkeit ihrer Produkte zu verbessern und gleichzeitig nachhaltige Lösungen anzubieten.

Weitere Case Studies