WEKA Pilot Online – UX/UI Design
Job: Interaction Design
Client: WEKA MEDIA
Production: Mischok
Year: 2019-2020
Design und Konzept für die Neugestaltung einer B2B-Anwendung.
Für das „Business Portal“ der WEKA Media wurde eine zentrale Web-Applikation, der „Pilot Online“, neu umgesetzt und gestaltet. Durch ein nutzerzentriertes Vorgehen konnte ein neues Konzept getestet und eingeführt werden. Für die technische Umsetzung ist ein robustes und zukunftsfähiges Design-System entstanden.
Bei der Neugestaltung ging es um zwei Aspekte: einerseits sollte die bestehende Anwendung konzeptionell neu gedacht werden. Das UI-Design war nicht mehr zeitgemäß und die User Experience der zentralen Anwendungsfälle musste optimiert werden.
Andererseits sollte mit der Neugestaltung auch ein Design-System entstehen, das als Grundlage für die Neugestaltung weiterer Anwendungen dient. Eine einheitliche Nutzererfahrung ist das Ziel. Egal, welche der vier unterschiedlichen Apps des „Business Portal“ gerade genutzt wird.
Status quo:
Wie kann die User Journey für die zentralen Anwendungsfälle optimiert werden?
Für die Neukonzeption haben wir uns als erstes intensiv mit dem Bestandssystem beschäftigt. Dabei spielten Feedback von bestehenden Nutzern sowie unsere eigenen Learnings bei der Nutzung eine Rolle. Was ist gut gelöst, was sollte überarbeitet werden?
Die zentralen Anforderungen und Thesen für die neue Anwendung wurden dann in Form von User-Stories festgehalten.
Zusammen mit dem Kunden haben wir in mehreren Workshops eine gemeinsame Vision für das Konzept der neuen Anwendung entwickelt. Diese gemeinsamen Ideen waren die Grundlage für alle weitere Schritte in der Umsetzung.
Build – Measure – Learn. Mit einem Konzept-Prototyp konnten unsere Ansätze schnell mit „echten“ Nutzern der bestehenden Anwendung getestet werden. Bei diesem ersten Klick-Prototyp lag der Schwerpunkt noch nicht auf dem Design, sondern auf einer Simulation der neuen Konzepte zur Nutzung der App.
Auf dem Prüfstand: neue Ideen zu Integration und Präsentation der Inhalte.
Die Rückmeldungen der ersten User-Tests bestätigten uns: wir waren auf einem guten Weg. Die nächsten Versionen des Klick-Prototyps bildeten nun die Erkenntnisse aus den User-Tests ab und ermöglichten es auch, die neue Anwendung in ihrem „echten“ Look & Feel zu testen.
Der nächste Schritt: das Konzept für die technische Entwicklung fit machen. Dabei war das Ziel, ein robustes Design-System für die technische Umsetzung bereit zu stellen.
Die Anforderung an das neue Design: an den bestehenden Auftritt anzuknüpfen, diesen weiter optimieren und vereinheitlichen.
Anknüpfen, optimieren, vereinheitlichen. Mit Atomic Design System.
Dazu haben wir den Ansatz des Atomic Design verfolgt. Mit den kleinsten Elementen des UI wie Schriften und Farben angefangen haben wir verbindliche Standards festgelegt. Nicht nur für den „Pilot Online“, sondern in Zukunft auch für alle anderen Anwendungen des „Business Portal“.
Aus den kleinsten Elementen des Interface (den Atomen) sind dann nächst größere Kombinationen entstanden (Moleküle und Organismen) bis schließlich Templates für ganze Seiten vorlagen. Wem dieses Vorgehen neu ist, dem sei diese Atomic Design Einführung von dessen Gründer Brad Frost empfohlen.
Mit geprüftem Konzept und Design-System im Gepäck begann die technische Umsetzung der Applikation.
Konzept validiert.
Design mit System.
→ Entwicklungsstart
Mit Hilfe von Storybook konnten wir die Komponenten zur Verwendung im Frontend effizient umsetzen und einbinden. Storybook ist eine open source Komponenten-Bibliothek die wir mit React eingesetzt haben. Die einzelnen Komponenten können dabei getrennt entwickelt, getestet und dokumentiert werden.
Für komplexe Anwendungen ist eine gepflegte Komponenten-Bibliothek dieser Art sehr sinnvoll. Durch sie haben wir einen konsistenten Auftritt über verschiedene Anwendungen hinweg ermöglicht und die Entwicklung von neuen UI-Elementen stark vereinfacht.
Dieses Design war Thema meines Talks „Neugestaltung einer komplexen Webanwendung“ auf der JCON 2020.
Für weitere Infos schau Dir auch gerne die Mischok Case-Study zum „WEKA Pilot Online“ an.
CHANGE BEFLÜGELN. DURCH GESTALTUNG, DIE AKTIVIERT.