Müller Foto

Anwendung

Die Müller Fotoanwendung gehört zum Fotoservice der Drogeriekette “Müller”. Zusammen mit dem Fotodienstleister “cewe” können verschiedene Fotoprodukte gestaltet und gekauft werden.
Die Anwendung verfügt über einen Editor, in dem die Produkte gestaltet werden und über die Software bestellt werden können.

Use Case

Um die Anwendung erfahrbar zu machen, wurde ein Use Case festgelegt. Anhand von diesem konnte die Anwendung und deren Nutzung repräsentativ dargestellt werden.

Der Use Case umfasst dabei das Kaufen eines individuellen Fotobuches über die Müller Bestellsoftware. Aufgeteilt in drei Abschnitte, wird der komplette Prozess durchgegangen. Dazu gehört die Vorauswahl zum Buch, das Gestalten der einzelnen Seiten und der Bestellvorgang als Abschluss.

Research und Erkenntnisse

Die Anwendung wurde mithilfe von verschiedenen Methoden analysiert und durch User Testings und kurzen Interviews, konnten hilfreiche Erkenntnisse gewonnen werden. Die Anwendung ist sehr umfangreich und bietet eine vielfältige Auswahl an Bearbeitungsmöglichkeiten innerhalb des Editors. Dabei wirkt es fast schon überladen und wird schnell unübersichtlich. Die Navigationsstruktur und Zugänglichkeit von verschiedenen Tools ist dabei irreführend und inkonsistent und vermindert die Usability. Auch der Prozess, das Fotobuch zu gestalten, ist laut User:innen langwierig und ineffizient. Dabei sind die User:innen oft schon erschöpft vom Einfügen und Platzieren der Fotos auf den einzelnen Seiten und haben schließlich keine Zeit mehr, das Fotobuch zu gestalten.

Lösung

Die Anwendung sollte übersichtlich sein und einen möglichst effizienten Prozess ermöglichen. Dazu reduzierten wir das Erscheinungsbild auf die wichtigsten Tools und ordneten die Navigationsstruktur neu an. Außerdem wurde ein neues Feature miteingebaut, welches den User:innen beim Einfügen von Fotos helfen soll und somit genügend Zeit zum Ausgestalten ermöglicht.

Wireframes

Es entstanden einige Varianten zu den einzelnen Aufgaben innerhalb des Use Cases. Diese wurden in digitale Wireframes umgesetzt und es entstanden mehrere Klickdummys.

Visual Design

Wir entschieden uns für dezente Grau- und Weißtöne für den Hintergrund, sodass das Erscheinungsbild ruhig und aufgeräumt wirkt. Der Fokus kann dann auf dem persönlichen Fotoprodukt liegen und die User:innen werden nicht zu stark abgelenkt. Als Akzentfarbe wird das Müller Orange verwendet, dadurch werden bestimmte Elemente hervorgehoben und die Farbe bewirkt eine starke Assoziation zur Marke Müller.
Mithilfe von leichten Schatten werden Ebenen besser voneinander abgehoben, sodass klare Hierarchien entstehen und die Nutzer:innen sich intuitiv zurechtzufinden.

Microinteractions

Besonders Wert gelegt wurde auf verschiedene Microinteractions und Animationen. Diese geben den Nutzer:innen Feedback und tragen so erheblich zu einer verbesserten Usability bei. Dabei wurden allgemein verschiedene States (Hover State, Default, Active) bei Buttons und Cards umgesetzt. Auch kleine Animationen, die es den User:innen ermöglichen, Vorgänge besser nachvollziehen zu können und die Übersicht zu behalten. Im Editor wurden Tooltips verwendet, die den User:innen die Icons zusätzlich erläutern. So kann ein reduziertes Gesamtbild eingehalten werden und trotzdem genügend Informationen zu den Bearbeitungsmöglichkeiten an die Nutzer:innen vermittelt werden.

Endergebnis