top of page

31 Boulevard

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
Mapa de Empatía.jpg

User Personas

Die User Personas sind von den Geschmäckern, Bedürfnissen und persönlichen Erfahrungen der befragten Personen inspiriert.
Captura de pantalla 2023-04-20 152451.png
Captura de pantalla 2023-04-20 152246.png

Idee

Basierend auf den Bedürfnissen des Benutzers wurde ein Brainstorming über Informationen und Funktionen für die Anwendung durchgeführt. Anschließend wurden sie nach Kategorien und Farben ausgewählt, um ihre Identifizierung zu erleichtern, was zu folgendem Ergebnis führte:
Ideas Clasificadas.jpg

Heatmap

Ich habe die oben genannten Ideen in ein Moskau-Diagramm übertragen und organisiert um sie nach ihrer Wirkung im Vergleich zum Aufwand für ihre Entwicklung zu kategorisieren. Schließlich wurde mit dem Team im Heatmap-Modus über die Vorschläge abgestimmt, die Teil der ersten Version sein sollten, im Vergleich zu denen, die auf spätere Phasen warten könnten.
Heatmap.jpg

Informationsarchitektur

Die Informationsarchitektur wurde so geplant, dass Benutzer die Inhalte auf einfachem und organisiertem Wege finden können.
 
Arquitectura de Información.png

Digital 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.
Planear Visitas.jpg
Cupones.jpg
Añadir amigos.jpg
Homepage.jpg

Low Fidelity Wireframes

Nach den Digital Wireframes habe ich Low Fidelity Wireframes erstellt, mit denen ich die grundlegende Funktionsweise der Anwendung getestet habe.
Low Fidelity Wireframes.png

High Fidelity Mockups

Diese Modelle sind das Ergebnis der Informationsarchitektur, Low Fidelity Wireframes und Designelemente, die in diesem Produkt vereint sind.
 
Home Page.jpg
Tienda.jpg
Plan.jpg
Perfil-Planes.jpg

Designelemente

In diesem Abschnitt finden Sie die Designelemente, die ich für die Anwendung erstellt habe.
 
Farben
Tarjeta de Colores-1.png
Tarjeta de Colores.png
Tarjeta de Colores-3.png
Tarjeta de Colores-7.png
Tarjeta de Colores-6.png
Tarjeta de Colores-4.png
Tarjeta de Colores-2.png
Typografie
Group 48.png
Group 49.png
Group 50.png
Group 51.png
Group 52.png
Group 53.png
Group 54.png
Buttons
Fill Button
Component 78.png
Fill Button-Trailing Icon
Botones Trailling Icon Fill.png
Fill Button-Leading Icon
Botones Leading Icon Fill.png
Outline Button
Botones Normal Outline.png
Outline Button-Trailing Icon
Botones Trailling Icon Outline.png
Outline Button-Leading Icon
Botones Leading Icon Outline.png
Ikonografie
Frame 169.png
Karten
Vertical Directory
Property 1=Vertical - Directorio.png
Horizontal Coupon
Property 1=Horisontal - Directorio.png
Vertical Coupon
Property 1=Tarjeta Vertical - Cupones.png
Horizontal Coupon
Property 1=Tarjeta Horizontal - Cupones.png
Eingaben
Frame 164.png
Frame 165.png
Frame 166.png
Frame 167.png
Frame 168.png
Besuchsplaner
Eingangsplan
Aktivitätsvorschlag
Aktivität akzeptiert
Freunde
Freund hinzufügen
Freund zum Plan hinzufügen
Freund hinzugefügt
Benachrichtigungen
Ungelesene Benachrichtigung
Gelesene Benachrichtigung
Chat
Erhaltene Nachricht
Gesendete Nachricht

Prototyp Vorschau

Dies sind alle Interaktionen, die für den mit Figma erstellten Prototyp durchgeführt wurden.
 
Vista previa de prototipo.png

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.
Barra anterior.png
Vorher
Barra Actual.png
Nachher
  • Die Coupons hatten keine schöne Farbe.
Tarjetas Cupones.png
Vorher
Nachher
  • Die Profilbilder waren zu groß.
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