Making-of Designsystem für Scania – flexibel, lebendig, skalierbar!
»Tegel« heißt auf Schwedisch »Ziegelstein«: Der Name für das neue digitale Designsystem der Scania AB spielt an auf die alten Backsteinmauern historischer Fabrikkomplexe – umfangreich, aber klar strukturiert und menschlich
Holistischer Ansatz – modulares Design
Das interdisziplinär aufgestellte Designteam aus Industrie-, Brand- und UX-Strateginnen und -Strategen startete damals mit einem Vision Framework und stellte sich die Frage: »Was tun wir hier, was wollen wir erreichen und für wen?« Von einem Designsystem war damals noch keine Rede. Erst als die konkrete Frage im Raum stand, wie man die lange Erfahrung im Produktdesign aufs UX Design überträgt und in Form von Designstrategien, Informationsarchitektur und Designtools in einem großen Unternehmen nachhaltig verankert, kam ein Designsystem als grundlegende Lösung ins Spiel: »Die Produktion in unseren Montagewerken läuft seit Jahrzehnten modular – in verschiedenen Fertigungsbereichen setzen unsere Teams Fahrgestelle, Chassis, Motoren, Türen und Windschutzscheiben zu einem Lastwagen zusammen. Das Modell hat sich bewährt, dieses Erbe wollten wir mit einem Designsystem ins Digitale übertragen«, sagt Marcus Åström.
Um das Scania-Designsystem Tegel in Aktion zu zeigen, entwickelte das Designteam die Website https://design.scania.com. Dort finden die registrierten Inhouse-Designer:innen Case Studies, Tutorials und inspirierende Anwendungsbeispiele. Eines davon ist das Interface für autonom fahrende Lkws (siehe Abbildung unten).
Doch bevor sein Team mit dem Vorhaben starten konnte, musste es alle Stakeholder zusammentrommeln – Kolleg:innen aus Sales und Marketing, Kommunikation, Brand-Management, Connected Services, Autonomous Transport – und sie in das Vorhaben einbeziehen. »Wir schilderten unsere Probleme mit den alten Workflows und fragten uns, wie wir das hohe Maß an Effektivität und Effizienz in der digitalen Entwicklung unserer Services erhalten und dabei eine konsistente und skalierbare Premium-Brand-Erfahrung für unsere Nutzer:innen bieten können«, so Åström. Sie schlugen Tegel als gemeinsames Designsystem vor, von dem alle Bereiche und User:innen im Unternehmen profitieren würden.
Drive the shift – Creator Experience
Interfacedesigner und UI Developer sollten die hauptsächlichen und wohl offensichtlichsten Nutzerinnen und Nutzer des künftigen digitalen Designsystems sein, aber auch andere Scania-Abteilungen wie Sales, Marketing und Brand-Management konnte Marcus Åström mit seiner Mannschaft überzeugen und in der Research-Phase ihre spezifischen Anforderungen und Bedürfnisse besser kennenlernen.
Die Website ist der Ausgangspunkt für das Design und Development bei Scania. Hier finden die Mitarbeitenden alle wichtigen Informationen zu den Designkomponenten und ihrer Verwendung.
Zwei UX-Designer:innen brachten in mehrtägigen Workshops mit circa 50 Mitarbeitenden die unterschiedlichen Perspektiven zusammen: »Wir hatten einen klaren Fokus auf die Creator Experience. Mit diversen Methoden, etwa den sechs Denkhüten von Edward de Bono, sammelten wir Ideen und Impulse aus den Teams«, berichtet Matylda Mcilvenny, Digital Design Lead bei Scania AB.
Im Januar 2020 startete das Team mit ersten groben Entwürfen, orientierte sich bei der Konzeption von Tegel an den eigenen Prinzipien von Modularität und Flexibilität, der angestrebten Effezienz sowie den Brand-Guidelines. »Jedes Unternehmen ist einzigartig«, sagt Mcilvenny. »Es gibt nichts Funktionierendes von der Stange. Scania will führend in einer nachhaltigen digitalen Transformation sein, ob mit dem Ausbau der Elektromobilität oder mit selbst fahrenden Lkws. Im Service-, UX- und Schnittstellendesign wollen wir dieselbe Präzision und Leidenschaft erreichen wie bei unseren physischen Produkten.«
Neue und einzigartige Anwendungsfälle entstehen derzeit etwa im Bereich der autonomen Fahrzeuge und ihrer menschlichen Operators. »Die Fahrzeuge können theoretisch 24/7 unterwegs sein – für die ersten und letzten Meter braucht man aber immer eine Person, die den Truck losschickt oder ihn abladen lässt. Dazu benötigt man ein Interface, auf dem man signieren und den Empfang der Ladung per Klick bestätigen kann«, erläutert Mcilvenny.
Oben: ScaniaIngenieur:innen überwachen die autonomen Trucks im Test. Unten: Die schweren Lkws setzen sich per Klick aufs Interface in Bewegung, ein Mensch ist zur Sicherheit mit an Bord.
Für das Designsystem iterierte das Team in zweiwöchigen Sprints und glich die Ergebnisse immer wieder mit den Stakeholdern ab. Schon im Dezember 2020 war ein Minimum Lovable Product erstellt, und der Feinschliff konnte beginnen. Für diese Aufgabe stieg im August 2021 Charlotte Lorensson als Visual Designer bei Scania ein.
Visueller Ansatz: Maschinell und menschlich
Bis zum Update des Designsystems im September 2022 verging noch einmal ein gutes Jahr, in denen Charlotte Lorensson und das Tegel-Team eine visuelle Sprache entwickelten. Als Grundlage dienten ihnen die Unternehmensstrategie und die Scania-Produktgruppen: »Wir wollen das Geschäft unserer Kunden bestmöglich verstehen und in einem partnerschaftlichen Prozess maßgeschneiderte, kosteneffiziente Produkte für sie finden. Große Fahrzeuge, komplexe Motoren und natürlich digitale Interfaces, die wir für die Menschen dahinter entwickeln. Die einzelnen Komponenten müssen das im jeweiligen Kontext in Form und Funktion widerspiegeln«, erklärt Lorensson.
Eine kleine Besonderheit ist etwa der 69-Grad-Winkel, der sich dezent, aber formgebend durch die gesamte visuelle Erscheinung zieht und für konsistente Gestaltung sorgt. »Es ist unser fünftes Element, das wir dem A der Brand-Schrift und dem Logo entlehnt haben und das sämtliche Designelemente subtil miteinander verbindet«, erklärt Lorensson. Die Scania Sans entstand 2016 unter der Designleitung von Brand Union Stockholm als Schriftfamilie mit 14 Stilen in drei Breiten bei der schwedischen Foundry Letters from Sweden.
Das A aus der Hausschrift lieferte den Interface-Designer:innen bei Scania ein wichtiges grafisches Detail – den 69-Grad-Winkel. Er zieht sich als verbindendes Element durch die Brand Identity.
Designmanagement: Flexibel, offen und vertrauensvoll
Inzwischen umfasst Tegel 30 Designkomponenten in Dutzenden Variationen, und es gibt bereits positive Umfrageergebnisse aus den verteilten Design- und Development-Teams. So können sie Interfaces nun viel schneller umsetzen, skalieren und besser warten, außerdem kollaborieren sie effizienter untereinander und dürfen sich auf komplexere Probleme konzentrieren als das Aussehen eines Buttons. »Wir können unsere Fähigkeiten jetzt dort einsetzen, wo sie mehr gebraucht werden«, sagt Marcus Åström.
Wie etwa in der Konzeption und im UX Design neuer Anwendungen und in der Weiterentwicklung der in Figma gepflegten Tegel-Library, genannt Figma UI Kit. Dazu schauen Marcus Åström und seine Teams aus UX, UI und Development zunächst wieder, wo der Bedarf an neuen Designkomponenten herrührt. »Wir eruieren zuerst den Kontext und versuchen, das eigentliche Problem zu verstehen. Nicht selten geht es unter der Oberfläche um etwas anderes, das wir mit einer neuen Komponente nicht wirklich lösen. Wir holen uns Ideen aus den Teams, überlegen uns passende Lösungen und durchlaufen einen iterativen Prozess mit Nutzer:innen-Feedback, in dem wir die Designkomponenten flexibel an die Bedürfnisse anpassen«, erläutert Åström. Natürlich spielt in der Umsetzung Markenkonsistenz eine wichtige Rolle, ein bestimmtes Maß an Brand Identity muss eingehalten werden – die wesentlichen Markenelemente Winkel, Farben, Schrift –, »aber wir können nicht alles kontrollieren, schon gar keine Drittanbieter-Anwendungen«, so Åström.
Die umsetzenden Interfacedesigner geraten eigentlich ständig in Situationen, in denen sie Komponenten anpassen müssen, etwa wenn eine Tabelle genau 400 Zeilen haben und sortierbar sein soll. Dann entscheidet Åström: »Okay, passt die Komponente an, aber macht es mit Bedacht.« Er gibt zwar gerne Feedback, verlangt aber keine Endabnahme: »Wir beschäftigen fähige Leute, die ihren Job verstehen und gut machen. Wir stellen ihnen die Tools dafür zur Verfügung und vertrauen ihnen.«
Das Designsystem soll organisch wachsen
Endlose Vorschriften und starre Regeln, die man mit Gewalt umsetzen will, helfen auch nicht, wenn man nach kreativen Lösungen für unbekannte, nicht vorhersehbare Use Cases sucht. Neue Herausforderungen warten zurzeit beispielsweise in Apps zum Aufladen von E-Fahrzeugen oder bei VR- und AR-Anwendungen in der Produktion. Die Technologien sind zwar noch nicht massenhaft verbreitet, aber längst im Einsatz: »Also wie übertragen wir unser Design auf dreidimensionale Medien? Guidelines gibt es bisher nur für die zweidimensionale Gestaltung, wir müssen also erst mal überlegen, welche neuen Interaktionsformen uns zur Verfügung stehen und wie unsere Assets für den 3D-Raum gestaltet sein müssen«, sagt Charlotte Lorensson.
Scania entwickelt ihren starken Designanspruch im Unternehmen ständig weiter und eröffnete im Oktober 2022 ein zentrales Designstudio in Stockholm zur Vermittlung der Designprinzipien, der Brand-Guidelines und des modularen Designsystems: »Mit großen Postern, Büchern und Materialien für den Research- und Prototypingprozess übertragen wir den Ansatz in die physische Welt, machen Design nahbar, partizipativ und demokratisch für alle Mitarbeitenden und sorgen so für ständige Fortbildung und Weiterentwicklung im Unternehmen«, erläutert Matylda Mcilvenny und ergänzt: »Jeder kann Design lernen. Diese Experience erschaffen wir bei Scania.«
Matylda Mcilvenny, Charlotte Lorensson und Marcus Åström sorgen mit ihrem Designsystem Tegel bei der Scania AB für effiziente Interfaceentwicklung und damit für hochwertige Brand Experience. Daneben stärken sie im Inhouse-Studio die Designkultur des gesamten Unternehmens mit Büchern, Workshops und Designtrainings.
Subtil, aber mächtig: Das fünfte Element
Viele Brand-Designs setzen sich aus den grundlegenden Gestaltungselementen Logo, Schrift, Farbe und Bild zusammen, erfolgreiche Brands verfügen darüber hinaus immer über ein fünftes Element. Ein kleines, aber unverwechselbares Detail, das für eine einzigartige Markenidentität sorgt. Es unterstützt alle anderen grafischen Elemente, stellt Balance zwischen ihnen her und sorgt für starke visuelle Kohärenz über alle Medien hinweg. Es kommt häufig als Sekundärgrafik (das Lächeln bei Amazon, Streifen bei Adidas, der Swoosh bei Nike) vor, kann aber auch eine typografische Besonderheit (Tempo-Taschentücher), ein Muster (Burberry-Check), markenprägendes Material (Levi’s) oder eine unverwechselbare Form (Coca-Cola-Flasche) sein.
Designsystem: Step-by-step zu neuen Elementen
Visual Designer Charlotte Lorensson erklärt, wie immer wieder neue Komponenten für das Scania-Designsystem Tegel entstehen
Wir planen, gestalten und entwickeln fortwährend neue Komponenten – die Bits und Bausteine – für Tegel. Dabei fließt während des gesamten Prozesses Feedback von unterschiedlichen Stakeholdern ein. Außerdem betrachten wir sowohl das Designsystem als auch die Komponenten als lebendiges System, das niemals als finale Version existiert, sondern in unserem iterativen und agilen Prozess stetig erweitert und verbessert wird.
1. Komponenten planen und Aufgaben beschreiben
Wenn wir selbst Bedarf für eine neue Komponente sehen oder es eine Anfrage innerhalb der Organisation gibt, starten wir in den Prozess. Wir wandeln die Anfrage in ein Briefing um, das wir in Anforderungen, User Storys und Aufgabenbeschreibungen übersetzen.
Damit wir wissen, wo wir anfangen, brechen wir als Erstes die Gesamtaufgabe in kleinere Teile herunter und stellen uns Fragen: Was wissen wir und was wissen wir nicht? Was brauchen wir, um die Qualität des Systems zu gewährleisten, und wie definieren wir »fertig« für unsere Aufgabe? Wir achten sehr sorgfältig darauf, dass die Aufgabenbeschreibung alle Informationen enthält, die wir in den kommenden Sprints aufgreifen wollen.
2. Kontext erforschen
Im nächsten Schritt wollen wir den Kontext besser verstehen. Dafür versuchen wir, das eigentliche Problem oder die Funktion zu erkennen, die die neue Designkomponente lösen oder erfüllen soll. Abhängig von der identifizierten Aufgabenstellung nutzen wir verschiedene Designmethoden. Dazu gehört unter anderem, sich das User-Feedback zu einer bestimmten Komponente anzusehen und weitere Anwendungsfälle zu recherchieren. Um allen Scania-Mitarbeitenden beispielhafte Kontexte und Best Practices zur Verfügung stellen zu können, entwickeln wir ein zusätzliches Informationssystem um Tegel herum.
3. Skizzen anfertigen
Unsere Komponenten müssen konsistent und kohärent gestaltet sein, das heißt, sie sollen unabhängig vom Medium immer die Marke ausdrücken und die gleiche Geschichte erzählen. Dazu müssen sie dieselbe visuelle Sprache sprechen wie alle anderen Markenelemente und sich auf die Markenidentität stützen. Für die korrekten Proportionen nutzen wir ein Abstands- und Skalierungssystem. Da User Interfaces häufig informationslastig sind, setzen wir bei den Designkomponenten unsere Scania Sans hauptsächlich in einem funktionalen und zurückhaltenden Stil ein. Farben wählen wir aus dem Farbsystem mit primären, sekundären sowie semantischen Markenfarben aus. Außerdem verwenden wir als fünftes Element der Marke den 69-Grad-Winkel.
4. Prototypen erstellen
Ehe eine Komponente live geht, testen wir, wie sie sich zu anderen Komponenten verhält und ob sie in den verschiedenen Kontexten funktioniert, in denen wir sie platzieren wollen. Für interaktive Komponenten entwickeln wir einen Klickdummy, und es entstehen Demoseiten, Muster und inspirierende Layouts.
5. Ans Development übergeben
Bei jeder Übergabe an die Entwicklung besprechen wir noch einmal genau das gewünschte Verhalten der Komponente. Wir erwägen die technischen Implikationen und nehmen bei Bedarf Änderungen am Entwurf vor.
6. Technologieunabhängig bleiben
Tegel basiert auf einer Mischung aus fertigen Webkomponenten und nativen HTML-Elementen. Um technologieunabhängige Webkomponenten erstellen zu können, nutzen wir Stencil.js als Compiler. Dadurch lassen sie sich in beliebten Frameworks wie React und Angular von den Scania-Produktteams verwenden.
7. Dokumentation pflegen
Man kann das beste Designsystem der Welt entwickeln, aber wenn niemand weiß, wie man es nutzt, ist es veraltet. Wir betrachten eine gute Dokumentation als einen der wichtigsten Bestandteile der Entwicklungserfahrung und dokumentieren alle unsere Komponenten auf https://tegel.scania.com zusammen mit Code, Beispielen und Entwurfsmustern. Zudem stellen wir Demoseiten in oft verwendeten Frameworks zur Verfügung, um unsere Kolleg:innen zu inspirieren und ihnen den Einstieg in ihre eigenen Projekte zu erleichtern.
8. Feedback geben und iterieren
Wir überwachen die Nutzung der einzelnen Designkomponenten und holen dazu Feedback ein. Dazu führen wir für jede Komponente eine Liste mit Verbesserungsvorschlägen. Wir iterieren Design und Entwicklung, geben sie frei, kommunizieren die Änderungen und Verbesserungen und überwachen weiterhin das Feedback, um sicherzustellen, dass die Komponente die Bedürfnisse unserer Nutzer:innen erfüllt.
Charlotte Lorensson entwickelt Tegel, damit ihre Kolleg:innen bei Scania auf einfache Weise ein erstklassiges und markenkonsistentes Benutzererlebnis erschaffen können.
Emelie Litwin arbeitet als Developerin an der Schnittstelle zwischen Frontend-Entwicklung und Design und schließt damit die Lücke im Produktentwicklungsprozess.
Dieser Artikel ist in PAGE 05.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.
Designmethoden und -prozesse in der Praxis ++ Comeback der Pixelschriften ++ ENGLISH SPECI-AL Jessica Walsh ++ Designsystem für Scania ++ Making-of: UX-Redesign bei Wikipedia ++ Um-weltfreundlich verpacken: Tipps & Ideen ++ Creative AI in Agenturen
- Download
- Print-Ausgabe
