Design­system für die lambda9 GmbH

Beschreibung

Software soll heute alles können: auf dem Smartphone genauso funktionieren wie am Computer, für alle Menschen bedienbar sein und dabei noch gut aussehen. Große Tech-Konzerne wie Google oder Microsoft lösen diese Herausforderung mit sogenannten Designsystemen – einer Art Baukasten mit wiederverwendbaren Gestaltungselementen und klaren Regeln, die alle Teams bei der Produktentwicklung nutzen.

Doch was ist mit kleinen Unternehmen? Die lambda9 GmbH aus Flensburg mit rund 30 Mitarbeitenden entwickelt digitale Produkte für den Büroalltag – vom elektronischen Unterschreiben von Dokumenten bis zur Arbeitszeiterfassung. Die Entwicklung erfolgte bislang ohne einheitliches System, sodass über die Jahre visuelle Unstimmigkeiten zwischen den verschiedenen Produkten entstanden.

In meiner Master-Thesis im Studiengang »Design, Film & Marketing« an der Hochschule Flensburg habe ich untersucht, wie auch kleine Unternehmen mit begrenzten Ressourcen ein effektives Designsystem entwickeln können. Dazu habe ich zunächst bestehende Systeme analysiert und anschließend ein maßgeschneidertes Konzept für die lambda9 entwickelt. Das Ergebnis wurde sowohl von potenziellen Nutzer:innen auf Akzeptanz als auch von den Entwickler:innen des Unternehmens auf die technische Umsetzbar­keit geprüft.

Fazit: Designsysteme lohnen sich auch für kleine Unternehmen – sie müssen aber frühzeitig eingeplant, im Umfang überschaubar gehalten und an etablierten UI-­Konventionen ausgerichtet werden. Der Schlüssel liegt darin, das System an die eigenen Ressourcen anzupassen: Oft genügen bereits ein einfacher Styleguide und eine reduzierte Komponentenbibliothek, um konsistente und markengerechte Software zu entwickeln.

Der Entwicklungsprozess

Zur Entwicklung des Designsystems wurde zunächst eine Bestandsaufnahme durchgeführt: Ein sogenanntes Interface Inventory dokumentierte alle wiederkehrenden Elemente der drei Softwareprodukte – von Buttons über Navigationsleisten bis hin zu Farbverwendungen. Diese Analyse deckte erhebliche Inkonsistenzen auf: Die Produkte verwendeten unterschiedliche Darstellungsweisen für gleiche Funktionen, kombinierten verschiedene Icon-Stile, nutzten ein uneinheitliches Farbschema mit zu vielen Varianten und waren nicht für Mobilgeräte optimiert, wie das folgende Bild zeigt:

Aus diesen Erkenntnissen wurden drei sogenannte Design­ Principles abgeleitet: »Klarheit vor Cleverness« (prägnante, verständliche Gestaltung), »Der User fühlt sich beim Produkt zuhause« (vertraute, freundliche Oberflächen) und »Das Produkt passt sich dem User an« (Responsive Design und Barrierefreiheit). Zugleich erhielt das Designsystem einen leicht einprägsamen Namen: luis, für lambda user interface system.

Diese Prinzipien bildeten die Grundlage für die visuellen Grundbausteine des Systems: Ein reduziertes Farbschema mit nur vier Hauptfarben in hellen und dunklen Varianten, eine Formensprache mit subtil abgerundeten Ecken und großzügigen Abständen, die konsequente Nutzung der Hausschrift Supreme in drei Schnitten, sowie ein einheitliches Icon-Set.

Das fertige System im Praxistest

Basierend auf den visuellen Grundbausteinen wurden die Komponenten nach dem Atomic-Design-Prinzip entwickelt: Von einfachen Elementen wie Buttons und Eingabefeldern über komplexere Moleküle wie Formulare und Dialoge bis hin zu vollständigen Seitenstrukturen. Für jedes der drei Produkte entstanden exemplarische Benutzeroberflächen in mobiler und Desktop-Ansicht, die zeigen, wie eine Neugestaltung mit dem Designsystem aussehen könnte (siehe Bilder). Die Evaluation mit 102 Befragten zeigte eindeutige Ergebnisse: Über 80 % bevorzugten die Neugestaltung, 87 % bewerteten die drei Produkte als einheitlich gestaltet. Die Designs wurden als ansprechend, professionell und intuitiv wahrgenommen.

Drei Experteninterviews mit lambda9-Entwicklern bestätigten die technische Machbarkeit und den Nutzen durch effizientere Entwicklungsprozesse. Haupthürde bleibt der Implementierungsaufwand für bestehende Produkte; bei Neuentwicklungen wäre die Einführung deutlich einfacher. Die Systematik und Wiederverwendbarkeit der Komponenten wurde besonders gelobt.