wpo-browser-mock_web_l

WEKA Pilot Online – UX/UI Design

Job: Interaction Design
Client: WEKA MEDIA
Production: Mischok
Year: 2019-2020

Mehr zu diesem Projekt!

WEKA Pilot Online – UX/UI Design

wpo-browser-mock_web_l

Job: Interaction Design
Client: WEKA MEDIA
Production: Mischok
Year: 2019-2020

Design und Konzept für die Neugestaltung einer B2B-Anwendung.

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.

Like it? There's more!

Nächstes Projekt ↓↓↓

Konzepte und Gestaltung
für Wirkung und Haltung.

Alexander Zels