Das Design des MEVIweb Vorgängers- MEVInet- stammte noch aus den 90er Jahren und sollte komplett überholt werden. Das Ziel war es eine webbasierte responsive HMI zu schaffen, die modernen Anwendungen in Sachen Interface Design und User Experience in nichts nachsteht.

Dabei sollte nicht nur das Design der HMI erarbeitet werden, sondern auch ein HMI Konfigurator und das cloudbasierte Backend gestaltet werden.

Als ich in das Projekt eingestiegen bin, gab es noch keinerlei Ansätze einer neuen UI und UX. Ich durfte die Produktpalette von Grund auf mitgestalten.

Um den Ist-Zustand des Produkts und der Nutzererfahrung zu verstehen, haben ich und mein Teamkollege diverse qualitative User Research Methoden angewendet. 

Ich habe User Interviews, Feldforschung, Nutzerbeobachtungen und Handlungsanalysen durchgeführt, um zu verstehen wie Nutzer mit der alten HMI interagieren, welche Aufgaben sie bewältigen müssen und wo in der Bedienung Probleme bestehen.

Nach Auswertung des initialen Researchs taten sich viele gravierende Problemfelder auf, die wir lösen mussten. Die wichtigsten waren:

Die Entwicklung der einzelnen Komponenten folgte einem immer selben Prozess, der sich wie folgt gestaltete:

Beim Gestalten der Informationsarchitektur und der Seiten, achtete ich darauf Nutzern zu ermöglichen von Übersichtsseiten mit den wichtigsten KPIs in tiefer liegende Seiten mit einer Vielzahl von Detailinformationen navigieren zu können. Ich verknüpfte die HMI-Levels nach dem Prinzip der 'Progressive Disclosure'.

Das Aufzeichnen von User Flows in Form von low-fidelity Wireflows half mir dabei Umstände beim bewältigen typischer Aufgaben aufzudecken, schnell zu optimieren und zu kommunizieren. Sie sorgten außerdem dafür, dass der Fokus bei Diskussionen zur UX dort lag, wo er sein sollte: auf der Nutzerführung statt dem UI-Design.

Seite für Seite wurden nach und nach alle Komponenten konzipiert und entworfen und in low-bis high-fidelity Wireframes umgesetzt. Ich erstellte Konzeptvarianten und diskutierte Vorzüge und Nachteile der verschiedenen Ansätze mit dem Team. Nach interner Abstimmung von Konzeptfavoriten, habe ich diese stetig weiter verfeinert. Anschließend sorgte ich durch Erstellung von Handoff Documents und durch Rücksprachen mit Entwicklern für eine detailgetreue Umsetzung des Entwurfs. Die Komponenten durchliefen bis zur finalen Umsetzung stets mehrere Iterationen.

Nachdem das Grundgerüst der HMI umgesetzt war, interagierte ich mit dem rudimentären Prototypen und stellte fest, dass eine wichtige Komponente noch fehlte:

Motion Design.

Besonders störend waren statischen Wartezeiten, die beim Navigieren und bei der Interaktion mit Komponenten wie Buttons und Switches auftraten. 

In der Folge setzte ich mich mit den Prinzipien und Best Practices des Motion Designs auseinander und arbeitete mich in Adobe After Effects ein, welches beim Erstellen von Animationskonzepten die größte Flexibilität bietet. Nach einer Einarbeitungszeit von knapp 2 Wochen begann ich animierte Design Konzepte, wo angebracht, in die Komponentenentwicklung zu integrieren. 

Ich skizzierte Storyboards, digitalisierte und animierte ausgewählte Konzepte. Die finalen Konzepte habe ich in Rücksprache mit Entwicklern auf ihre Umsetzbarkeit hin überprüft und angepasst und anschließend Spreadsheets für das Developer Handoff vorbereitet. Diese haben eine einfache und detailgetreue Umsetzung meiner Motion Konzepte gewährleistet.