top of page
Anidy Gil Portada.png

Anidy Gil Studio

Einkaufszentrum Applikation
EBAC Zertifizierungs Projekt

Ziel

Aufbau der Plattform für das Einkaufszentrum "31 Boulevard", dessen Hauptzweck darin besteht eine Kundenbindung herzustellen und neue Kunden zu gewinnen.
Es gibt keine vorher festgelegte Spezifikationen, es handelt sich also um ein Projekt, das für Vorschläge offen ist.

Position

Produktdesigner

User Research, Interaktion, Visual Design, Prototyping und Testing.

Herausforderung

Identifikation der Benutzer, Kombinierung von Einkäufen mithilfe von digitalen Funktionen und Erstellung einer praktischen Anwendung für die Anforderungen der Kunden und so für ein hervorragendes multisensorisches Erlebnis sorgen.

Projektzeitrahmen

2 Monate
Nur Designerstellung ohne Entwicklung.

Lösung

Ich habe am Projekt "31 Boulevard" als Produktdesignerin gearbeitet um eine Anwendung zu erstellen die Teil des Kundenerlebnisses im Einkaufszentrum werden soll und ihn durch den gesamten Prozess begleitet:
Verbinden Sie sich mit Freunden und Familie um den Tag ihres Besuchs zu planen, fügen Sie dynamisch und unterhaltsam Geschäfte hinzu, die Sie besuchen m
öchten. 
Zugang zu einem Prämienprogramm, Informationen zur Barrierefreiheit (Aufzüge, Rollstühle, Wickelstationen, Haustierstationen, usw.), Neuigkeiten über den Ort und weiteres.

Prozess

UXUI Process  German.png

Den Benutzer kennen

Ich ging in ein Einkaufszentrum und wandte mich direkt an den Benutzer, um seine Aktivitäten zu beobachten, wie er sie ausführte und warum.
Ich konnte zu folgendem Schluss kommen:

 
  • Etwa 80% der Nutzer waren junge Menschen zwischen 15 und 35 Jahren.
  • Ungefähr 10% waren ältere Benutzer, die die jüngeren begleiteten.
  • Ungefähr 10% waren Kinder.
  • Die meisten werden von mindestens einer Person begleitet.
  • Viele Familien kommen mit Kindern und Hunden.
  • Der durchschnittliche Mensch kauft einen Kaffee oder ein Eis und läuft dann durch die Einkaufsmeile, betritt aber nicht 
         die Geschäfte.
  • Viele Menschen bleiben allein mit ihrem Computer in einem Café.

Benutzerinterviews

Ich habe einige Besucher des Einkaufszentrum interviewt, um ihre Bedürfnisse zu verstehen, eine Empathy Map sowie User Personas zu erstellen. 
Die Interviews lieferten folgende Erkenntnisse:
​
  • Die Wirtschaft unserer Nutzer wurde von mehreren Faktoren wie der Pandemie und der Inflation beeinflusst, sodass sie vorsichtiger mit ihren Ausgaben umgehen und ihre Einkäufe besser planen.
  • Sie gehen gerne an einen belebten Ort wo sie mit Familie und Freunden Spaß haben können und alles an einem Ort haben, ohne sich um ihre Sicherheit sorgen zu müssen.
  • Am Schwierigsten ist es, mit der Familie oder Freunden ein Treffen zu vereinbaren und zu entscheiden, was zu tun ist.
​
Basierend auf diesen Informationen habe ich diese Empathy Map erstellt:
Empathy Map
Empaty Map.png

User Personas

Die User Personas sind von den Geschmäckern, Bedürfnissen und persönlichen Erfahrungen der befragten Personen inspiriert.

Informationsarchitektur

Die Informationsarchitektur wurde so geplant, dass Benutzer die Inhalte auf einfachem und organisiertem Wege finden können.
 

Paper Wireframes

Die Wireframes wurden mit einem Tablet und einem digitalen Stift erstellt. Dies gab mir eine bessere Vorstellung davon, wie ich diese Plattform gestalten wollte und welche Informationen ich darauf erwarten würde, sowie einen einfachen Zugang zu den Elementen.
Paper Wireframe Desktop.jpg
Paper Wireframe Mobile.jpg

Low Fidelity Wireframes

Nach den Digital Wireframes habe ich Low Fidelity Wireframes erstellt, mit denen ich die grundlegende Funktionsweise der Anwendung getestet habe.
Web 1920 – 1.png
iPhone 14 Pro Max – 1.png
Web 1920 – 3.png
iPhone 14 Pro Max – 3.png
Web 1920 – 4.png
iPhone 14 Pro Max – 4.png

High Fidelity Mockups

Diese Modelle sind das Ergebnis der Informationsarchitektur, Low Fidelity Wireframes und Designelemente, die in diesem Produkt vereint sind.
 
Desktop-Home Page.png
Mobile-Home Page.png
Desktop-Product Clothes.png
Mobile-Product.png
Dektop-Cart Clothes.png
Mobile-Cart.png

Designelemente

In diesem Abschnitt finden Sie die Designelemente, die ich für die Anwendung erstellt habe.
 
Farben
Colors.png
Typografie
Buttons
Mobile
Desktop
Ikonografie
Eingaben
Eingaben
Eingaben

Prototyp Vorschau

Dies sind alle Interaktionen, die für den mit Figma erstellten Prototyp durchgeführt wurden.
 

High Fidelity Prototyp

Dieser High Fidelity Prototyp ist das Ergebnis der High Fidelity Modelle sowie der hinzugefügten Interaktionen und es ist möglich, mit diesem mit Figma erstellten Prototyp zu interagieren.

Usability Testing

Der Usability Test des Produkts wurde mit mehreren Benutzern durchgeführt, wobei ihnen schätzungsweise 20 Minuten Zeit zur Verfügung standen, um die folgenden Aufgaben zu erledigen:
 
  • Suchen Sie im Verzeichnis nach einem Geschäft und fügen Sie es zu Ihren Favoriten hinzu.
  • Durchsuchen Sie die Liste nach einem Gutschein und fügen Sie ihn zu Ihren Favoriten hinzu.
  • Planen Sie einen Besuch.

Am Ende dieses Tests wurde festgestellt, dass:
​​
  • Die Aktionsleiste enthielt zu viele Elemente und war verwirrend zu verwenden.​
  • Benutzer bevorzugten den direkten Zugriff auf ihre Benachrichtigungen statt auf ein anderes Element.
Vorher
Nachher
  • Die Coupons hatten keine schöne Farbe.
Nachher
Vorher
  • Die Profilbilder waren zu groß.
Web 1920 – 2.png
Desktop-By Art.png
Vorher
Nachher

Fazit

Die Arbeit an diesem Projekt war eine aufregende und herausfordernde Erfahrung. Bei meinem ersten Design als Produktdesignerin habe ich meine Leidenschaft entdeckt: Die Verbindung, die wir mit dem Benutzer herstellen - da wir nicht nur daran denken, was für das Unternehmen von Vorteil sein kann sondern auch an seine Bedürfnisse und seine Erfahrung mit dem Produkt, das ich erstelle.
Beobachten, wie es nach und nach zum Leben erwacht und von einer Idee zu einer Realität wird.

Die größte Erkenntnis, die ich hatte, war:

 
  • Der Benutzer steht immer an erster Stelle: Es ist äußerst wichtig, aus erster Hand zu hören, was er will und sensibel genug zu sein, um zu wissen, was er denkt um ein Projekt zu realisieren, das nicht nur seine Bedürfnisse erfüllt, sondern seine Erwartungen übertrifft.
  • Software wie Figma beherrschen: Es ist sehr wichtig, über Figma-Kenntnisse zu verfügen, da es das Tool ist, das uns dabei hilft, Prototypen zu erstellen und meine Vorstellungen auf eine Weise zu teilen, die für jeden zugänglich und leicht verständlich ist.
  • Alle Elemente müssen sorgfältig geplant werden: Um hervorragende Ergebnisse zu erzielen und Fehler zu minimieren, damit die Arbeit perfekt ist.
​
​
​
Ich hoffe, Ihnen hat dieses Projekt genauso viel Spaß gemacht wie mir. Vielen Dank, dass Sie mit mir bis hierher gekommen sind!
bottom of page