30+
umgesetzte Projekte
<6
Monate
Als lebendiges System hilft ein Designsystem Unternehmen dabei, konsistente, markengerechte Erlebnisse in großem Umfang und über einen längeren Zeitraum hinweg zu liefern. Mit dem digitalen Designsystem für ETAS bringen wir das Corporate Design schnell und effizient in das gesamte Produktportfolio. Wiederverwendbare Komponenten, Basislayouts und klare Vorgabe sorgen für hochwertige GUIs, einfache Adaptionen und einen einheitlichen Markenauftritt.
Das Designsystem verschlankt Prozesse, steigert die Effizienz im UI Design und verkürzt die Time-to-Market für digitale Produkte – bei gleichzeitig konsistenter Nutzerführung und besserer User Experience. Das Alignment von Markenwerten und zentralen UX-Standards ist jederzeit sichergestellt. Als Unternehmen mit starkem Entwicklungsfokus unterstützt das Designsystem Designer:innen und Programmierer:innen gleichermaßen.
Durch Produkt-Deep Dives und Stakeholder-Interviews entwickelten wir ein Designsystem, das exakt auf die Bedürfnisse und Use Cases von ETAS abgestimmt ist. Während die ETAS-Produkte im Zentrum unserer Überlegungen standen, legten wir auch großen Wert auf die funktionalen und prozessualen Anforderungen, was sich im Applikationslayout und in der Nutzung der Komponenten-Library widerspiegelt. Design-Explorationen halfen uns, ein gemeinsames Verständnis für die Anwendung des ETAS Corporate Designs auf Applikationen zu entwickeln. Die daraus abgeleiteten Designprinzipien bildeten die Grundlage für das weitere Visual und Experience Design. So stellen wir sicher, dass unsere Lösungen funktional, ästhetisch ansprechend, markengerecht und konsistent sind.
Wir bieten Anwender:innen alles für die markenkonforme und barrierefreie Gestaltung (WCAG 2.1 AA) von ETAS-Applikationen. Basierend auf etablierten Designprinzipien und der Atomic Design Methode haben wir Elemente und Komponenten entworfen und in ein GUI-Komponenten-Framework integriert. Basis-Layouts und Applikations-Templates bieten nun einen flexiblen Baukasten für schnelle und markenkonforme Umsetzungen. Die gesamte Dokumentation erfolgt in einem Online-Styleguide; der Code ist über Workflows und Pipelines stets verfügbar. Das Ergebnis: eine konsistente User Experience und ein einheitliches Markenbild – bei einer Barrierefreiheit, die aktuelle Richtlinien erfüllt.
Die Zusammenarbeit während des Projektes fühlte sich nie wie eine typische Dienstleister-Kunde-Beziehung an, sondern wie die eines echten Teams. Dank der Ideen und des Know-Hows der Kolleg:innen von Experience One entstand aus dem ursprünglichen Projektziel, einzelne Werkzeuge für die GUI-Gestaltung zu entwickeln, ein umfassendes digitales Designsystem.
Die Nutzung von Figma verbessert die Zusammenarbeit in den UI-Teams erheblich und erleichtert die schnelle Anwendung des Designs auf verschiedene Applikationen. Unsere Basislayouts gewährleisten ein einheitliches Framework und responsives Design. Der umfassende Styleguide erfasst alle Designprinzipien und Details, zugeschnitten auf unterschiedliche Zielgruppen. So können Teams nun deutlich effizienter und schneller zusammenarbeiten – ein Plus an Qualität und Benutzerzufriedenheit.
Tokens in Figma erlauben es Designer:innen, Designelemente wie Farben, Schriftarten und Abstände zentral zu definieren, zu verwalten und projekt- und plattformübergreifend im gesamten Design zu nutzen. Als Single Point of Truth sorgen sie für Konsistenz: Änderungen werden automatisch auf alle Instanzen übertragen. Übersetzt in CSS-Variablen gewährleisten Tokens auch im Code Konsistenz und erleichtern Updates. Sie sorgen so für einheitliche Gestaltung, reduzieren die Arbeitszeit und ermöglichen schnelle, zentrale Anpassungen. Eine Win-win-Situation für alle Projektbeteiligten.
Das ETAS Common UI spart mir als Entwickler sehr viel Zeit, weil ich mir keine Gedanken mehr über Farben oder Abstände machen muss. Ich kann die fertigen Komponenten direkt in meine Applikation einfügen und kümmere mich nur noch um die Logik dahinter.
Durch die Etablierung eines dedizierten DesignOps-Teams aus UX-, UI-Designer:innen und Entwickler:innen stellen wir die erfolgreiche Integration des Designsystems in die Organisation sicher. Unser Ansatz sorgt für konsistente und qualitativ hochwertige Ergebnisse, indem er klare Prozesse und Standards etabliert.
Umfassende UX-Research zu Beginn hilft, die Anforderungen und Pain Points der Kund:innen zu verstehen. Wir integrieren kontinuierlich Leuchtturmprojekte, um das Design zu validieren und auf Feedback basierend zu optimieren. So entspricht unser Design den Markenrichtlinien und den spezifischen Produktanforderungen.
Unsere Arbeit mit Figma ermöglicht es UI-Teams, die neuesten Features zu nutzen. Tokens reduzieren die Arbeitslast der Designer:innen und Programmierer:innen, die keine Farbwerte oder Schriftarten mehr von Hand in ihr CSS übertragen müssen. Die zentrale Verwaltung hält die Designqualität hoch und minimiert Fehler. Designverantwortliche können sich so auf die Entwicklung innovativer und ansprechender Designs konzentrieren.