Case Study: Mobase Mobile Responsive Design
Herausforderung
Die Herausforderung bestand darin, eine durchdachte digitale Plattform, MoBase, für Siemens Mobility zu schaffen, die über 800.000 Produkte integriert und schnelle Lieferungen sowie effiziente Prozesse ermöglicht. Ziel war es, die Benutzererfahrung und Technologie zu harmonisieren, um nahtlose Verbindungen zwischen Partnern, Kunden und Lieferanten in einem nutzerzentrierten Ökosystem herzustellen.
Als massgebliche Mitwirkende habe ich mich intensiv an der Entwicklung des mobilen Interfaces beteiligt. In Zusammenarbeit mit dem Leitdesigner habe ich Kernkomponenten geformt und spezialisierte mobile Elemente entworfen, um die Benutzererfahrung zu verbessern und gleichzeitig den Vorgaben des Corporate Designs zu entsprechen. Diese Erkenntnisse wurden aus strategischen Workshops und Nutzerforschungen gewonnen, um sicherzustellen, dass das mobile Design mit der umfassenderen Designstrategie resoniert und dabei die Konsistenz mit der Desktop-Version bewahrt.
Lösung
Als UX-Designerin lag mein Fokus auf der Gestaltung von Schlüsselelementen des mobilen Interfaces, wobei ich eng mit dem Leitdesigner zusammenarbeitete. Mein Beitrag erstreckte sich über die Entwicklung hochwertiger Prototypen bis hin zur Erweiterung des Designsystems für die mobile Plattform
Meine Rolle
Sketch, InVision, Adobe Aftereffects
Tools
Prozess
Während des achtmonatigen Entwicklungsprozesses lag mein Schwerpunkt auf der Gestaltung des mobilen Interfaces für MoBase, einschliesslich des Detaildesigns. In einer zweimonatigen Designphase arbeitete ich parallel mit dem Leitdesigner zusammen, um das Designsystem zu entwickeln. Die Erkenntnisse aus strategischen Workshops und Nutzerforschungen flossen in meine Gestaltungsarbeit ein, auch wenn ich nicht direkt daran teilnahm. Die Interaktionsflows wurden mit dem Projektmanager und den Stakeholdern durch InVision-Prototypen validiert.
Das UI-Design, einschliesslich der Optimierung des Flyout-Menüs, Warenkorb, Produktseiten und des Checkout-Prozesses, trug massgeblich zur Entwicklung einer kohärenten und ansprechenden Benutzererfahrung bei. In diesem Kontext arbeitete ich auch iterativ an einigen Designkomponenten wie den Seiten für Produktlieferoptionen und Produktlisten, um eine optimale Benutzerfreundlichkeit sicherzustellen.
Mobile Responsiveness in MoBase
Als Teil des MoBase-Projekts integrierte ich das 12-Spalten Gridsystem vom Desktop, das vom Lead-Designer definiert wurde, in das Responsive Design für mobile Geräte. Parallel dazu wurden klare Designsystem-Definitionen für Komponenten, Farben, Hintergründe, Inhalts- und Seitenbreiten erstellt. Dies gewährleistet, dass das Mobile Design nahtlos mit dem Desktop-Design harmoniert und eine konsistente Benutzererfahrung auf verschiedenen Geräten bietet.
Mobile Warenkorb Design
Die Herausforderung bestand darin, sämtliche Desktop-Designkomponenten effektiv auf die begrenzten Bildschirme anzupassen. Insbesondere bei der mobilen Warenkorbseite musste ich die Hierarchie der Bestellübersicht im Vergleich zum Desktop-Design neu strukturieren. Hierbei wurden Schrift- und Buttongrössen für eine optimale mobile Nutzung angepasst. Um ein hervorragendes UX-Erlebnis auf mobilen Endgeräten zu gewährleisten, entwickelte und testete ich zwei Varianten für die Produktliste der Bestellung.
Mobile Bestelldetail Design
Die Herausforderung beim Entwurf der mobilen Bestelldetailansicht bestand darin, alle wichtigen Produktinformationen übersichtlich darzustellen. Mit horizontal scrollbaren Abschnitten ermöglicht das Design, dass Nutzer alle Details bequem mit Fingerbewegungen erkunden können. Diese Gestaltungsentscheidung spart Platz auf mobilen Geräten, verhindert zu langes Scrollen und berücksichtigt die Reihenfolge der Informationen im Mobile-Design. Wichtige Details wie Lieferdaten, Menge und Lieferschein stehen dabei an erster Stelle.
LottieFiles Loading Animation für MoBase
Im MoBase-Projekt gestaltete ich eine Ladeanimation für Module mit längeren Wartezeiten. Die Integration erfolgte über LottieFiles in Zusammenarbeit mit dem Frontend-Entwickler. Die Animation, erstellt mit Adobe Aftereffects, berücksichtigt die Corporate Identity und verbessert die Benutzererfahrung durch visuelle Hinweise während des Ladeprozesses.
Reflexion
In der Welt des Mobile Designs standen wir vor der Herausforderung, ein erweitertes Design-System zu definieren und zahlreiche Design-Komponenten gemäss den Richtlinien für mobiles Design feinzutunen. Dabei stiessen wir auf bedeutende Hürden wie Unterschiede in den Schriftarten, die auf verschiedenen Computern nicht einheitlich erkannt wurden. Dies könnte auf Kompatibilitätsprobleme zurückzuführen sein. Die Verwaltung des Design-Systems erwies sich ebenfalls als aufwendig, insbesondere, wenn gleichzeitig Optimierungen für das Mobile-UX durchgeführt werden mussten. Trotzdem gelang es, das Look and Feel des Mobile Designs im Einklang mit dem Desktop-Design zu halten. Dies war möglich, da ein klarer Styleguide existierte und die Zusammenarbeit sowie Kommunikation mit dem Lead-Designer rechtzeitig und kooperativ erfolgten.