«Viel Herzblut»: Darum haben unsere UX-Designer und Entwicklerinnen ein Design System geschaffen

Im Interview erklären Software-Entwicklerin Christina Heidt und Lead UX-Designer Leonardo Hauschild, was das Design System ist und wieso es die Arbeit mit wachsenden Teams erleichtert.

Leonardo, wie kann ich mir deine Arbeit vorstellen?
Leonardo Hauschild, Lead UX-Designer: Internetseiten bestehen aus einem Frontend und einem Backend. Wenn du als Kundin www.galaxus.ch eintippst, siehst du unser Frontend. Wir UX-Designer gestalten es. Wir sind verantwortlich für das Aussehen, die Funktionalität und die Benutzerfreundlichkeit der Seite.

Und was machst du, Christina?
Christina Heidt, Software-Entwicklerin: Ich schreibe den Code, der die gestalteten Elemente und die angedachten Funktionalitäten umsetzt.

Wie arbeitet ihr zusammen?
Leonardo: Jeder UX-Designer arbeitet in einem cross-funktionalen Team mit Entwicklern und einem Product Owner zusammen. Unsere UX-Designerinnen und UX-Designer sind also über verschiedene Teams verteilt. So entsteht viel Koordinationsaufwand. Denn wir arbeiten zwar in verschiedenen Teams, müssen aber sicherstellen, dass sich der Online-Shop nach «Digitec Galaxus» anfühlt und nicht nach «Team Isotopes» oder «Team Endeavour». Mit unserer Struktur ist es einfach, in diese Falle zu tappen.

Christina: Das Design System soll dem entgegenwirken. Mittlerweile sind wir 150 Entwicklerinnen und Entwickler. Irgendwann haben wir erkannt: Wir brauchen Möglichkeiten, um effektiver miteinander zu kommunizieren. Wir wollten einen Ort schaffen, an dem die Informationen zusammenlaufen. Er soll es ermöglichen, einen Shop zu gestalten, der einheitlich aussieht und sich auch so anfühlt.

Dieser Ort ist das Design System?
Christina: Genau. Es ist eine Web-Applikation, die unser Design Tool «Figma» und die Codebase zusammenbringt. Dort sieht man, wie bestimmte Elemente im Design Tool gestaltet sind. Daneben stehen die dazugehörigen Code-Komponenten. Zudem hat die Applikation eine Suchfunktion, die uns bei der Arbeit zusätzlich unterstützt.

Was war das Hauptproblem vor der Einführung des Design Systems?
Christina: Die richtigen Informationen zu finden – zum Beispiel, um eine Checkbox zu programmieren. Zwar existierte die Komponente «Checkbox» in Figma, doch der Code dazu fehlte. Dann fragt man sich als Entwicklerin: Wieso ist das so? Gibt es den Code für die Checkbox etwa noch nicht? In vielen Fällen war die Codebase unter anderem Namen gespeichert. Ein weiteres Thema war die Konsistenz auf der Seite.

Was meinst du damit?
Christina: Wenn ich als Entwicklerin die Komponente im Code nicht finde, setze ich sie selber um. Dann haben wir aber das gleiche Element mehrfach. Das Design wurde bei diesen mehrfachen Implementierungen nicht immer gleich umgesetzt. Das führt zu Inkonsistenzen. Dieses Problem hat zugenommen, seit mehr Leute bei uns arbeiten und die Codebase grösser geworden ist. Wir müssen unbedingt Redundanzen herausfiltern und schauen, dass wir Dinge nicht «fast gleich» machen.

Leonardo: «Fast gleich» ist fast schlimmer als komplett unterschiedlich.

Bemerke ich als durchschnittliche Userin solche Unstimmigkeiten überhaupt?
Christina: Ich denke, den meisten fällt das nicht auf – ausser sie sind selber Designer. Aber unbewusst passiert etwas. Du merkst, dass die Interaktion mit dem Shop sich nicht so gut anfühlt, wie sie könnte. Im schlimmsten Fall erkennen unsere Kundinnen und Kunden gewisse Elemente nicht mehr, weil sie je nach Seite anders aussehen. Wegen dieser Verwirrung könnten sie dem Shop dann den Rücken kehren. Wenn sich alles anders verhält, weisst du nicht, wie du interagieren sollst.

Leonardo: Intern spüren wir den Schmerz, sobald wir etwas am User Interface ändern sollen.

Wieso?
Leonardo: Nehmen wir an, wir sollen einer Checkbox ein neues Design verpassen. Dann suchen Entwicklerinnen und UX-Designer nach der Checkbox und finden ein Element, das sie überarbeiten. Es gibt jedoch zwei Checkboxen, die gleich aussehen, aber anders programmiert sind. Diese zweite Checkbox verpasst den Neuanstrich und geistert so noch in der alten Form auf der Seite herum. Wenn nicht alle gleichen Checkboxen einheitlich programmiert sind, herrscht Chaos. Wir müssen alles manuell suchen und ersetzen. Genau das ist die Problematik mit dem potenziellen Dark Mode.

Was haben denn das Design System und der Dark Mode miteinander zu tun?
Christina: Das Design System ist eine wichtige Basis dafür. Ohne es wäre der Dark Mode wesentlich aufwändiger. Im Design System haben wir gewisse Anpassungen vorgenommen, damit der Dark Mode unterstützt werden kann. Wir haben also einen ersten Schritt gemacht. Wie es weitergeht, müssen nun alle zusammen entscheiden.

Wie nehmen unsere Kundinnen und Kunden das Design System von aussen wahr?
Christina: Unsere Seite wird konsistenter. Beziehungsweise werden Elemente verschwinden, die bisher nicht konsistent waren. Das ist ein fortlaufender Prozess. Deshalb wird das Design System auch nie fertig sein, weil unsere Webseite immer wächst und sich verändert.

Leonardo: Wir erhoffen uns vor allem, dass weitgreifende Änderungen für uns nicht mehr so schmerzhaft sind. Das bedeutet: Wenn wir eine Checkbox pink färben, dann werden auch tatsächlich alle Checkboxen auf den verschiedenen Seiten pink. So müssen wir nicht mehr alternativ programmierten Checkboxen nachjagen, um sie manuell pink einzufärben. Denn dieser Prozess ist mühsam.

Was hat euch an diesem Projekt am meisten gefallen?
Christina: Das Design System ist unsere Eigenentwicklung und da haben wir viel Herzblut hineingesteckt. Jetzt ernten wir, was wir gesät haben – und das ist sehr cool. Wir haben eine Basis geschaffen, um neue Projekte und Funktionalitäten einfacher umsetzen zu können. Das ist zwar viel Arbeit, doch es macht Spass.

Leonardo: Genau das mag ich bei Digitec Galaxus: Es wird nie langweilig. Es gibt immer neue Ideen über Dinge, die wir besser machen können. Wer weiss, was wir als Nächstes in Angriff nehmen werden?

Du willst sehen, wie unsere Checkboxen, Buttons oder Farben entwickelt und gestaltet werden? Dann schau dir unser Design System hier an.

Bist du interessiert an einer Stelle bei Digitec Galaxus? Dann schau auf unserem Job-Portal vorbei.