Das neue Designsystem von Vaisala

„Unser Entwicklungs- und Designsystem erhöht durch codierte Komponenten und Zusammenarbeit unsere Agilität. So können die Produktteams UI-Atome im System bereitstellen, sodass alle unsere Teams Zeit sparen, indem sie in anderen Projekten erstellte Bausteine verwenden.“– Sauli Laitinen, Design Manager bei Vaisala

Das Entwicklungs- und Designsystem von Vaisala ermöglicht eine koordinierte Arbeitsweise, durch die eine zunehmende Anzahl sogenannter Atome erzeugt wird. Dabei handelt es sich um wiederverwendbare und dokumentierte UI-Komponenten. Diese Komponenten sind einfach genug, um für viele unterschiedliche Teams hilfreich zu sein, die an sehr unterschiedlichen Produkten arbeiten. Das System ist für alle Teams hilfreich, wenn neue Projekte mit neuen Komponenten begonnen werden, die an anderen Stellen in der Organisation wiederverwendet werden können.

Für das System sind alle Teams verantwortlich, die an ihm mitwirken: die Anwendungsteams, von denen die Komponenten entwickelt werden, das UX-Team und das Plattformteam. Als internes Open-Source-Produkt wird das System gemeinsam entwickelt, und für die lockere Organisation der Zusammenarbeit zwischen den Teams sind nur zwei Koordinatoren erforderlich.

Vaisala profitiert jetzt nach der Implementierung des Systems von der Reduzierung redundanter Arbeitsschritte. Dies spart Zeit, und die Entwickler und Designer können sich auf das Erstellen anwendungsspezifischer Lösungen für die Benutzer konzentrieren.

Vaisala war für ein Designsystem bereit

Vaisala ist ein weltweit führender Anbieter von Messtechnik für Meteorologie, Umwelt und industrielle Anwendungen. Das Unternehmen verfügt über mehr als 80 Jahre Erfahrung und ermöglicht mit ca. 1.850 Experten auf der ganzen Welt Beobachtungen, die vielfältigen Nutzen bringen.

Vaisala hatte bereits UI-Experten in seine Produktteams integriert und einen einheitlichen visuellen Stil geschaffen. Auf dieser Grundlage wollte das Unternehmen seine UX-Funktionen erweitern. Wie viel der in einem Team geleisteten Design- und Entwicklungsarbeit könnte an anderer Stelle im Unternehmen verwendet werden?

Es gab bereits einige Arten wiederverwendbarer Komponenten, jedoch konnte der Prozess zu ihrer Erzeugung optimiert werden. Ein Programmierer aus dem Plattformteam konnte sie auf Anforderung des Designteams erstellen, und anschließend konnte die Komponente bei Bedarf von einem Anwendungsteam verwendet werden.

Vaisala wünschte unbedingt eine bessere, agilere Lösung

Was ist ein Designsystem?

Vaisala erhielt diese Lösung in Form eines Designsystems (bei Vaisala wird das System als „Entwicklungs- und Designsystem“ bezeichnet). Designsysteme ermöglichen die Zusammenarbeit zwischen den Teilen einer Organisation, sodass redundante Arbeitsschritte erheblich reduziert werden. Dieses dynamische System erzeugt UI-Komponenten (sogenannte Atome) für Designer sowie React-Komponenten für Entwickler. Die Atome werden in das System eingespeist, sobald sie in realen Szenarien durch Teams in der Organisation erstellt wurden.

Mit den entsprechenden Fertigkeiten lassen sich Designsysteme automatisieren, um noch mehr Zeit zu sparen.

Wie wurde das Entwicklungs- und Designsystem von Vaisala erstellt?

In Zusammenarbeit

Vaisala wollte, dass die Teams, die in Zukunft am System mitwirken würden, während der Erstellung des Systems Verantwortung für dieses übernehmen. Eines war vollkommen klar: Das System musste in Zusammenarbeit erstellt werden.

Während des Projekts arbeitete ein Berater von Eficode eng mit einem Mitglied des Vaisala-Plattformteams zusammen. Sie entwarfen gemeinsam die Architektur des Systems, das die Komponenten akzeptieren und speichern sollte. Die Berater von Eficode konnten die bei Vaisala vorhandenen Kenntnisse durch Ihre Erfahrungen ergänzen.

Workshops und Hackathons

Was ist die beste Methode zum Erstellen eines agilen Designsystems? Auf diese Frage konzentrierten sich mehrere Workshops, an denen das Designteam, das Plattformteam und die Berater von Eficode teilnahmen. Zwischen den Workshops wurde das Projekt mithilfe von Microsoft Teams und Jira weiterentwickelt.

Die Zusammenarbeit wurde in Hackathons mit den Teams verstärkt, aus denen der Kern des endgültigen Systems bestehen würde.

Schlanker Kern

Das schließlich erstellte System hat einen äußerst schlanken Kern mit zwei optimal für die Aufgabe geeigneten Koordinatoren aus den Teams, die am System mitwirken. Die Koordinatoren moderieren den Prozess.

DevOps und das Designsystem

Vaisala verfügte bereits über eine Continuous-Delivery-Pipeline für die Softwareproduktion, die aus einer Integration von Jenkins, Bitbucket und Jira bestand. Die Automatisierung des Designsystems wird vom DevOps-Berater von Eficode über dieser Infrastruktur erstellt.

Der Berater von Eficode ergänzte die vorhandene Integration durch die Automatisierung der folgenden Elemente des Designsystems von Vaisala:

• Automatisierte Tests der Komponenten
• Automatisierte Aktualisierungen der Website-Dokumentation
• Automatisierte Veröffentlichung der neuesten Version einer Komponente

Jetzt werden neue Builds und neue Versionen automatisch vom Designsystem veröffentlicht, damit sie von den Entwicklern verwendet werden können.

Entwickeln, freigeben, erlangen: die Vorteile

Die Vorteile des Entwicklungs- und Konstruktionssystems von Vaisala mussten für alle beteiligten Teams greifbar sein, da dies die Mitarbeiter motivieren würde, zum System beizutragen. Diese Vorteile stellen sich für die einzelnen Teams jeweils unterschiedlich dar.

Für Produktteams

• Einheitliches Branding und einheitliche Benutzererfahrung
• Produkte mit gleicher Funktionsweise
• Schnellere UI-Erstellung mit höherer Qualität
• Kontinuierlich zunehmende Qualität der UI-Komponenten
• Schnelleres Starten von Projekten

Für Entwickler

• Einfacher zu verwendende Designs (als Node.js-Paketmanager-Abhängigkeiten)
• Fehlerkorrekturen für Komponenten
• Schreiben einer Komponente, um zehn zu erhalten
• Weniger Programmierung in CSS
• Hohe Kompatibilität zwischen Komponenten

Für Designer

• Weniger Arbeit mit pixelgenauen UI-Spezifikationen 
• Eine einzige Quelle für das aktuelle Design
• Schnelle Prototyperstellung mit Code/Klick-Prototypen
• Ausbauen der gemeinsamen Designsprache von Vaisala

Für das Unternehmen verkürzt das Designsystem die Time-to-Market, gewährleistet Konsistenz und hilft den Teams, sich auf die wesentliche Aufgabe zu konzentrieren, nämlich die Probleme von Kunden bei der von ihnen erstellten Software zu lösen.

Designsysteme sind soziale Gebilde

Die Arbeit am Designsystem bringt Menschen zusammen, motiviert sie und bewirkt, dass sie die Zusammenarbeit genießen. Dies war für die erfolgreiche Einführung des Designsystems von Vaisala ausschlaggebend.

Es handelt sich um ein System, das von einer organisationsübergreifenden Gruppe von aktiven Entwicklern und Designern verwaltet und gepflegt wird, was ein Rezept für mehr Flexibilität darstellt.

Erfordern die UX-/UI-Funktionen Ihrer Firma höhere Agilität? Besuchen Sie die Seite Kontaktieren Sie uns auf unserer Website, um sich über eine Zusammenarbeit mit Eficode zum Erstellen Ihres individuellen Designsystems beraten zu lassen.

Wir danken den folgenden Personen, die gemeinsam das Entwicklungs- und Designsystem von Vaisala entwickelt haben:

Aine Aivi (Vaisala), Samuli Andelin (Eficode), Tomasz Dressler (Vaisala), Joona Enbuska (Eficode), Jarkka Kivikanta (Vaisala), Jarkko Polvi (Eficode), John Moscarillo (Vaisala), Juha Karttunen (Siili Solutions), Jukka-Pekka Luukkonen, Joonas Kallio (Kinetive), Marko Kankaanniemi (Goto 10 Software), Kari Heikkilä (Vaisala), Markus Koivisto (Vaisala), Heta Korvenranta (Vaisala), Heikki Kupiainen (Metamatic), Sauli Laitinen (Vaisala), Leena Pohjaniemi (Vaisala), Maiju Tompuri (Vaisala), Mikko Ala-Fossi (Vaisala), Miso Mikkilä (Iskos), Petteri Suontama (Eficode), Teemu Kujanpää (Vaisala), Teppo Rouvi (Vaisala), Toni Lehtimäki (Vaisala), Tuomas Lilja (Eficode), Tuomo Mäkelä (Vaisala) und Harald Jerger (Vaisala).