Design System Update: Neue Stages für unsere Pattern Library

In den letzten Wochen haben wir uns mit den Stages von sipgate auseinandergesetzt. Mit der Umstellung auf das neue Design System haben wir die Grundlage gelegt, um über das Design iterieren zu können. Nun spielen wir ein Update für alle Stages von sipgate aus.

Damit keine Missverständnisse entstehen: Manchmal werden Stages auch Header oder Hero genannt. Dies sind mit die wichtigsten Bereiche unserer Webauftritte, da diese das Erste sind, was ein Nutzer auf der Webseite sieht. Und der erste Eindruck ist ja bekanntlich der wichtigste. 😉

Bisher waren unsere Stages oft mit zentriertem Text versehen und sehr dunkel gehalten. Um uns design-technisch weiterzuentwickeln und unseren Redakteuren mehr Möglichkeiten zu bieten, haben wir alle verschiedenen Typen von Stages angepasst und teilweise durch neue ergänzt oder ersetzt.

Unter anderem gibt es nun weiße Stages, neue Assets – wie 3D Renderings – und eine bessere Video-Einbindung. Und so sind wir vorgegangen: Wir haben damit angefangen, alle bisherigen Medien und Zwecke der vorhanden Stages zu analysieren. Dabei haben wir uns viele Fragen gestellt: Was kann man zusammenfassen? Gibt es doppelte Verwendungen? Was haben wir bisher nicht abgedeckt? Funktioniert das mit unserem Purpose-First-Ansatz?

Neben den neuen Möglichkeiten für die Redakteure steht natürlich die Benutzerfreundlichkeit ganz vorne. Eine luftige, weiße Stage kann viel besser den Aspekt der Leichtigkeit transportieren, als eine schwarze. Außerdem ist der Bruch zum nächsten Pattern nicht so groß, wenn es keinen harten Farbunterschied gibt. Das sorgt für einen besseren Lesefluss und unterstützt das Storytelling der Seite.

Integration in das Design-System

Die neuen Stages gehen ebenfalls mehr auf die Produkt-Zuordnung der einzelnen sipgate Produkte ein. Jedes Produkt hat eine eigene Farbwelt und ein individuelles Muster. Die Muster wurden bisher meist nur als Hintergrundbild gespielt und oft von dunklen Overlays überlagert.

Mit denen neuen Stages haben wir die Muster erstmals richtig in Szene gesetzt und verwenden Sie nun als Teil von Kompositionen und Assets. Das stärkt einerseits die Produktmarke und unterstützt andererseits den Besucher bei der Orientierung in unserem Produktportfolio. Dieser Schritt hat unser Team viel Zeit gekostet, denn wie es oft so ist: Es nicht so einfach. Nicht nur sollen die Muster mobil und auf dem Desktop funktionieren, sondern sie sollen auch mit verschiedenen Medientypen (Bild, Foto, Video, 3D) harmonisieren. Idealerweise kann man die Assets auch in anderen Patterns verwenden, weswegen wir begonnen haben, Bildformate zu vereinheitlichen.

Am Anfang sind wir in die Breite gegangen und haben verschieden Designs exploriert, um danach den Fokus wieder enger zu schnüren – mit dem Wissen aus allen Designs.

Ein Design-System kann nur funktionieren, wenn es Platz zum Ausbrechen gibt. Wichtig ist dabei, den Fokus zu behalten und am Ende ein einheitliches Erscheinungsbild zu formen. Dabei haben wir neue Regeln für Muster und Farbverwendungen definiert, die uns weitere Iterationen erleichtern werden.

Wieso die Stages? Wieso jetzt auf das Design iterieren?

Team KRK arbeitet ausschließlich an unserem internen Projekt „Holodeck“, das es allen sipgate Mitarbeitern ermöglicht, unsere Webseiten zu pflegen und zu erstellen. Wenn man sich vorstellt, dass es über 600 Unterseiten gibt, dann wird schnell klar, warum es wichtig ist, dass jeder – mal eben – etwas ändern kann, ohne auf Entwickler oder Designer angewiesen zu sein.

Nach dem Rebranding haben wir die letzten Monate vor allem damit verbracht, unsere organisch gewachsene Pattern Library aufzuräumen. Wir haben einige Patterns ersetzt oder zusammengefasst, Bugs gefixt und unsere Marketing-Teams dabei unterstützt, Webseiten zu bauen. Unser oberstes Ziel war aber immer, eine Iteration auf dem Design zu drehen und unsere Webseiten noch besser und schöner zu machen. Den ersten Test-Ballon starteten wir dann vor einigen Wochen mit dem Quotes-Pattern. Hier haben wir das erste Mal wirklich auf dem Design iteriert und gelernt, wie wir zukünftige Pattern-Redesigns als Team angehen wollen.

Der „Need“ für die Stages kam dann zum einen aus eigenem Antrieb, da wir selbst aus Design-Perspektive den Seiteneinstieg für wichtig halten. Zum anderen aber auch als Wunsch aus den Marketing-Teams, die mit den bestehenden Stages keine ansprechenden Landing Pages für ihre Kampagnen bauen konnten.

Wie geht es weiter?

Die Stages haben mit diesem Update eindeutigere Zweck-Zuweisungen bekommen und auch ein kleines Design-Refresh erhalten, um das Gesamtbild der Marke sipgate zu stärken.
War es das jetzt? Nein, natürlich nicht Wir bleiben am Ball – sowohl bei den Stages als auch bei allen anderen Patterns. Zum Glück haben wir jetzt ein System, mit dem wir das Design unserer Webseiten kontinuierlich verbessern können.