ONE Mobile App Design: Komplexe Logistik einfacher nutzbar machen
UI UX Designer
Min Bui
Inhaltsverzeichnis:
Heuristic Evaluation
Projektübersicht
Komplexe Logistik einfacher nutzbar machen
Project: UX/UI Design · Mobile App · UX Research · Informationsarchitektur · Design System · User Testing
Eine bestehende Mobile App neu strukturieren, ohne die Komplexität des Produkts zu verlieren
Leistungen: Research, UX-Strategie, UX/UI-Design, Mobile-App-Architektur, Produkt-Flow
Ocean Network Express (ONE) wollte seine bestehende Mobile App grundlegend modernisieren.
Die bisherige Anwendung war technisch und visuell in die Jahre gekommen. Gleichzeitig war nicht nur die Oberfläche das Problem. Informationen waren schwer auffindbar, die Navigation wirkte komplex und wichtige Funktionen fehlten.
UXphoria wurde deshalb mit der umfassenden Neugestaltung des mobilen Erlebnisses beauftragt.
Der Prozess reichte von UX Research und Wettbewerbsanalyse über User Flows und Informationsarchitektur bis zu Wireframes, UI Design, Design System und User Testing.
Das Ziel:
Eine komplexe Logistik-Anwendung so zu strukturieren, dass unterschiedliche Nutzer:innen schneller verstehen, wo sie sich befinden, welche Informationen relevant sind und welcher nächste Schritt sinnvoll ist.
Die Herausforderung: Wenn eine App zu viele Informationen gleichzeitig lösen muss
Eine globale Logistik-App muss deutlich mehr leisten als eine klassische Consumer-App.
Nutzer:innen können unterschiedliche Aufgaben haben, unterschiedliche Fachkenntnisse mitbringen und unterschiedliche Informationen benötigen.
Während ein professioneller Nutzer beispielsweise regelmäßig Sendungen verfolgt, kann ein anderer Nutzer nach Kontaktinformationen, Unternehmensinformationen oder weiteren Services suchen.
Die bestehende App machte diese Unterschiede nicht ausreichend sichtbar.
Aus der Analyse ergaben sich mehrere zentrale Probleme:
Informationen waren schwer auffindbar.
Die Navigation war nicht eindeutig.
Die Oberfläche wirkte überladen.
Wichtige Funktionen fehlten.
Designelemente waren nicht konsistent.
Nutzer:innen erhielten zu wenig Rückmeldung über ihre Aktionen.
Kontextbezogene Hilfestellungen waren teilweise nicht ausreichend.
Performance-Probleme erschwerten die Nutzung zusätzlich.
Die Aufgabe war deshalb nicht einfach ein visueller Relaunch.
Die gesamte Nutzungserfahrung musste neu geordnet werden.
Nutzer verstehen, bevor Screens gestaltet werden
Research als Grundlage der Produktarchitektur
Bevor Screens gestaltet wurden, analysierte UXphoria die Marke, ihre Positionierung und ihre bestehende Kommunikation.
Parallel wurde betrachtet, wie unterschiedliche Nutzergruppen Kaffee-Apps tatsächlich verwenden.
Im Projektmaterial werden drei zentrale Nutzerarchetypen beschrieben:
Der Prozess begann nicht mit UI Design.
Zunächst wurde untersucht, wie ONE als Marke positioniert ist, welche Anforderungen die verschiedenen Nutzergruppen haben und wie vergleichbare Shipping-Apps ihre digitalen Produkte strukturieren.
Brand Analysis
Die Markenidentität, Mission und Werte von ONE wurden analysiert, um sicherzustellen, dass die spätere App nicht wie ein unabhängiges digitales Produkt wirkt, sondern die bestehende Marke sinnvoll weiterführt.
Competitor Analysis
Vergleichbare Shipping- und Logistik-Apps wurden hinsichtlich Navigation, Funktionen, visueller Gestaltung und Nutzererfahrung untersucht.
Dabei ging es nicht darum, bestehende Lösungen einfach zu kopieren.
Die Analyse sollte zeigen:
Welche Muster funktionieren bereits im Markt, wo entstehen typische Reibungspunkte und wo kann ONE ein klareres digitales Erlebnis schaffen?
User Personas
Unterschiedliche Nutzergruppen wurden modelliert, darunter:
Shipping Professionals
Logistics Managers
individuelle Kund:innen
Damit wurde früh deutlich, dass die App nicht für einen einzigen linearen Nutzungspfad optimiert werden konnte.
Die Customer Journey sichtbar machen
Von der App-Entdeckung bis zur konkreten Aufgabe
Im nächsten Schritt wurde die Customer Journey betrachtet.
Dabei wurde untersucht, welche Aufgaben Nutzer:innen innerhalb der App erledigen und an welchen Stellen Orientierung verloren gehen kann.
Zu den relevanten Aufgaben gehörten unter anderem:
Sendungen verfolgen
Informationen finden
Anfragen stellen
Kontaktmöglichkeiten erreichen
Unternehmensinformationen abrufen
Die Analyse machte einen wichtigen Punkt deutlich:
Bei einer komplexen B2B-Anwendung reicht es nicht aus, alle Informationen bereitzustellen. Die Informationen müssen in dem Moment auffindbar sein, in dem Nutzer:innen sie benötigen.
Heuristic Evaluation
Von der App-Entdeckung bis zur konkreten Aufgabe
Die bestehende App wurde zusätzlich anhand etablierter Usability-Prinzipien untersucht.
Dabei wurden unter anderem Navigation, Konsistenz, Systemfeedback, Nutzerkontrolle, Fehlervermeidung und Verständlichkeit bewertet.
Vier Problemfelder traten besonders hervor.
Unklare Navigation
Nutzer:innen konnten schwer einschätzen, wo sie die gesuchte Information finden.
Inkonsistente Gestaltung
Unterschiedliche Designelemente verhielten sich nicht immer konsistent und erzeugten dadurch einen fragmentierten Eindruck.
Zu wenig Feedback
Nach bestimmten Aktionen war nicht ausreichend klar, welchen Status die jeweilige Handlung hatte.
Fehlender Kontext
Hilfestellungen und Informationen waren nicht immer dort verfügbar, wo Nutzer:innen sie tatsächlich benötigten.
Damit wurde die UX-Diagnose konkreter:
Das Problem lag nicht in einem einzelnen Screen. Es lag im Zusammenspiel von Navigation, Information, Interaktion und Feedback.
Von Anforderungen zu einer Produktarchitektur
User Stories und Feature Roadmap
Auf Basis der Research-Ergebnisse wurden User Stories formuliert.
Eine zentrale Perspektive war beispielsweise:
Als Shipping Professional möchte ich den Status meiner Sendungen einfach verfolgen und aktuelle Informationen erhalten.
Solche User Stories halfen dabei, Funktionen nicht isoliert zu betrachten, sondern aus der Perspektive der jeweiligen Aufgabe zu priorisieren.
Anschließend wurde eine Feature Roadmap entwickelt.
Nicht jede denkbare Funktion sollte automatisch Teil der ersten Version werden.
Die Roadmap half dabei, die wichtigsten Funktionen zu priorisieren und die weitere Produktentwicklung strukturiert aufzubauen.
Informationsarchitektur
Komplexität ordnen statt verstecken
Die Informationsarchitektur wurde anschließend neu strukturiert.
Verwandte Inhalte wurden gruppiert, Begriffe vereinheitlicht und Navigationspfade klarer definiert.
Dabei ging es um eine zentrale UX-Frage:
Welche Information gehört wohin und welche Entscheidung soll ein Nutzer an dieser Stelle treffen können?
Diese Perspektive verhindert, dass eine App lediglich aus einzelnen gut gestalteten Screens besteht.
Stattdessen entsteht ein zusammenhängendes System.
User Flows
Jede wichtige Aufgabe braucht einen klaren Weg
Für zentrale Nutzungssituationen wurden detaillierte User Flows entwickelt.
Sie machten sichtbar:
wo ein Nutzer startet
welche Entscheidung als Nächstes notwendig ist
welche Informationen benötigt werden
welche Aktionen verfügbar sind
wo ein Flow enden oder fortgesetzt werden kann
Dadurch konnten potenzielle Reibungspunkte bereits vor dem visuellen Design identifiziert werden.
Die Navigation wurde damit nicht aus einzelnen Screens heraus entwickelt, sondern aus den Aufgaben, die diese Screens unterstützen müssen.
UX Sketching
Erst denken, dann ausarbeiten
Bevor visuelle Details definiert wurden, wurden verschiedene Lösungsansätze skizziert.
Low-Fidelity-Sketches ermöglichten es, unterschiedliche Layouts und Interaktionsmodelle schnell zu vergleichen und zu verwerfen.
Das hatte einen entscheidenden Vorteil:
Strukturelle Entscheidungen konnten verändert werden, ohne bereits in visuelle Details investiert zu haben.
Die besten Ansätze wurden anschließend in Wireframes weiterentwickelt.
Wireframing
Die Struktur wird testbar
Die Wireframes bildeten die Brücke zwischen Informationsarchitektur und Interface Design.
Sie ermöglichten es, Navigation, Layout und Interaktionslogik früh mit Stakeholdern zu diskutieren und iterativ anzupassen.
Dabei wurde bewusst zunächst auf visuelle Dekoration verzichtet.
Im Mittelpunkt standen:
Information → Priorität → Interaktion → Feedback
Erst nachdem diese Grundlage funktionierte, wurde das visuelle System ausgearbeitet.
Visual Design
Die ONE-Marke in eine moderne Mobile Experience übersetzen
Auf Basis der UX-Struktur entwickelte UXphoria ein visuelles Designsystem, das die bestehende Markenidentität von ONE in eine moderne Mobile Experience überführt.
Berücksichtigt wurden unter anderem:
Farbwelt
Typografie
Iconografie
UI-Komponenten
visuelle Hierarchie
Markenintegration
Accessibility
Das Design sollte gleichzeitig modern und vertraut wirken.
Die Marke sollte erkennbar bleiben, während die Benutzeroberfläche deutlich klarer und zeitgemäßer strukturiert wurde.
Accessibility als Teil des Designs
Ein gutes Interface muss für unterschiedliche Menschen funktionieren
Accessibility wurde nicht erst nach dem visuellen Design betrachtet.
Die Gestaltung berücksichtigte unter anderem:
ausreichende Kontraste
zugängliche Interaktionsflächen
Screenreader-Kompatibilität
klare visuelle Hierarchien
verständliche Interaktionsmuster
Damit wurde Accessibility als Bestandteil der Produktqualität behandelt und nicht als nachträgliche technische Ergänzung.
Design System
Aus einzelnen Screens wird ein konsistentes Produkt
Mit dem Design System wurden wiederkehrende visuelle und funktionale Elemente systematisiert.
Das schafft zwei wichtige Vorteile:
Konsistenz
Ähnliche Funktionen verhalten sich und wirken innerhalb der App ähnlich.
Skalierbarkeit
Neue Screens und Funktionen können auf einer gemeinsamen visuellen und strukturellen Grundlage aufgebaut werden.
Gerade bei einer umfangreichen Unternehmensanwendung ist diese Systematik entscheidend.
Ein einzelner hochwertiger Screen löst kein Produktproblem.
Ein konsistentes System kann dagegen über viele Nutzungssituationen hinweg funktionieren.
Testing & Iteration
Nicht jede gute Idee funktioniert beim ersten Versuch
Nach der Designphase wurden Prototypen erstellt und Lösungen getestet.
Unterschiedliche Designvarianten wurden miteinander verglichen, um herauszufinden, welche Lösung bestimmte Aufgaben verständlicher und effizienter unterstützt.
Der iterative Prozess ermöglichte es, Entscheidungen nicht ausschließlich aus der Perspektive des Designteams zu treffen.
Stattdessen konnten Erkenntnisse aus dem Nutzerfeedback wieder in die Gestaltung zurückgeführt werden.
Research → Design → Test → Iteration
Dieser Zyklus bildete einen zentralen Bestandteil des Projekts.
Das Ergebnis
Eine neue Grundlage für die ONE Mobile Experience
Aus der bestehenden Legacy-App entstand ein umfassend neu gedachtes mobiles Produkterlebnis.
Die Arbeit umfasste:
UX Research
Marken-, Wettbewerbs- und Nutzeranalyse.
UX Strategy
Personas, Customer Journey, User Stories und Feature Priorisierung.
Information Architecture
Eine klarere Organisation komplexer Informationen.
User Flows
Strukturierte Wege für zentrale Nutzeraufgaben.
Wireframes
Frühe Validierung von Layout und Interaktion.
UI Design
Eine moderne, markenkonforme Mobile Experience.
Design System
Konsistente Komponenten und eine skalierbare Grundlage.
User Testing
Iterative Überprüfung und Weiterentwicklung der Lösungen.
Was dieses Projekt zeigt
Gute Mobile App UX beginnt nicht beim Interface
Das wichtigste Learning aus dem Projekt war, dass die Modernisierung einer komplexen Mobile App nicht mit einem neuen visuellen Stil beginnt.
Sie beginnt mit der Frage:
Was muss ein Nutzer eigentlich erledigen und welche Informationen braucht er dafür?
Bei ONE führte diese Perspektive von der Analyse der bestehenden Probleme über die Informationsarchitektur bis hin zum finalen Interface.
Daraus ergeben sich vier zentrale Prinzipien:
01. Research vor Interface
Ein attraktiver Screen kann eine schlechte Produktstruktur nicht kompensieren.
02. Aufgaben vor Features
Funktionen sollten aus realen Nutzeraufgaben priorisiert werden, nicht aus einer möglichst langen Feature-Liste.
03. Struktur vor Styling
Navigation, Informationsarchitektur und User Flows müssen funktionieren, bevor visuelle Details optimiert werden.
04. System statt Screens
Ein Design System schafft Konsistenz und ermöglicht die Weiterentwicklung eines komplexen digitalen Produkts.
Zukunftsperspektive
Die Analyse identifizierte darüber hinaus mehrere mögliche Weiterentwicklungen für das Produkt.
Dazu gehören:
personalisierte Empfehlungen
stärkere Integration mit anderen Logistiksystemen
erweiterte Tracking-Funktionen
Echtzeit-Updates und Benachrichtigungen
paralleles Tracking mehrerer Sendungen
Dokumentenverwaltung
weitere Community-orientierte Funktionen
Diese Punkte wurden als zukünftige Möglichkeiten identifiziert und sind nicht als bereits umgesetzte Features des Projekts zu verstehen.
UXphoria | Mobile Apps für komplexe Produkte
Komplexe Produkte brauchen keine komplizierteren Interfaces.
Sie brauchen eine bessere Struktur.
UXphoria verbindet UX Research, Informationsarchitektur, User Flows, UI Design und Design Systems, um Mobile Apps zu entwickeln, die auch bei komplexen Aufgaben verständlich und skalierbar bleiben.
Von der ersten Produktanalyse bis zum interaktiven Prototyp.
Sie planen eine neue App oder möchten eine bestehende Mobile Experience grundlegend verbessern?
