Informations-Architektur & Design-System

In agiler Arbeitsweise von einer technik- zu einer user-zentrierten Anwendung

DMIx Cloud by ColorDigital GmbH

Saas Solution
since 2018

Dieser UX Case spiegelt auch meine Arbeit für weitere SaaS-Produkte, an deren Entwicklung ich beteiligt war. Aufgrund von Vertraulichkeitserklärungen/NDAs kann ich nur grobe Auszüge meiner Arbeit zeigen. Meine Arbeit im SaaS Umfeld reicht von der Analyse der Business- und User-Needs, über verschiedene Research- und Ideation-Methoden (User Interviews, Usability Testings, User Personas & Journeys, etc.), der Konzeption von Informations-Architekturen bis hin zu Mockups, Wireframes und funktionsfähigen Prototypen.

Situation

Die DMIx Cloud bietet wissenschaftliches Farb- und Materialmanagement, kombiniert mit den neuesten 3D-Technologien für die Textil-Industrie. Die ersten Entwicklungsjahre galten der Bereitstellung der DMIx Cloud samt ihrer Funktionen. In diesem Schritt war kein UX oder UI Designer involviert.

Mit wachsendem Kundenstamm kamen Wünsche auf, die UX und das UI zu optimieren. In Zusammenarbeit mit den Stakeholdern wurde eine neue Informations-Architektur und ein neues Design-System entwickelt, das die User Experience und Usability deutlich verbesserte.

Ziele

Conversion steigern, potenziellen Kunden in tatsächliche Käufer verwandeln
Loyale Nutzergruppen aufbauen
Nutzungsintensität erhöhen
Zufriedenheit der Nutzer steigern
Upselling

Methoden & Leistungen

User Interviews / Heuristische Evaluation / System & Flow Diagramme / Wireframes / Low & high fidelity Prototypen / UI Style Kit & Komponenten Bibliothek

Tools

Key-Insights

Viele Nutzer fanden sich in der bis dato bereit gestellten Anwendung nur schwer zurecht. Sie verstanden die teils irreführende Navigations-Struktur nicht und brauchten viel Zeit um gewünschte Informationen aufzurufen. Oftmals verloren sie die Orientierung und wussten nicht mehr wo sie waren und wie sie dorthin kamen. Hinzu kam, dass eine Vielzahl von Funktionen nur über Icons bereitgestellt wurden. Das überforderte viele Nutzer, denn die Symbolik war nicht vertraut und dadurch waren die Icons wenig hilfreich.
Mit diesen Erkenntnissen war klar, dass wir zunächst ein neues Gerüst schaffen müssen indem wir die Navigations- und Informations-Architektur neu denken.

Der Design Prozess

Identifikation der Business- & User-Needs

In der Kickoff-Phase wurden die Business- und User-Anforderungen definiert und das Team samt der Verantwortlichkeiten aufgestellt. Anhand vorhandener Research-Daten und einer heuristischen Evaluation wurden im nächsten Schritt die Probleme und Optimierungsmöglichkeiten der Cloud aufgedeckt und die zu optimierenden Bereiche definiert.

User & Business Needs werden während eines Meetings erarbeitet

Ideation & Überarbeitung der Informations-Architektur

Während der Ideenfindung wurden gemeinsame Boards in Balsamiq, Miro und Figma genutzt, um Ideen festzuhalten, zu diskutieren und um frühes Feedback einzuholen. Schließlich entstand eine neue konsistente Navigations- und Informations-Struktur mit Product-Area und einer User-Section, die alles bereithält, was für den einzelnen User relevant ist.

Wireframe der alten und neuen Navigations- und Information-Struktur

Entwicklung eines neuen Design-Systems

Neben der vereinfachten Architektur wurde auch ein konsequentes und konsistentes Design-System entwickelt, um fortan mehr Satisfaction und eine richtig gute Usability zu ermöglichen.

Ein intuitives, nutzer-zentriertes UI Design ermöglicht fortan eine effektive Nutzung. Die Vielzahl an Icons mit mangelnder Symbolik wurden durch gelernte und, den Funktionen entsprechende UI Komponenten ersetzt.

Iterative und inkrementelle Weiterentwicklung

Begonnen hat das Projekt 2018. Basierend auf User Feedback wird die SaaS-Lösung ongoing optimiert. Probleme und Chancen werden aufgedeckt und Lösungen collaborativ erarbeitet und in agiler Arbeitsweise umgesetzt.

❱ zurück zur übersicht