Lou Kailich

UX/UI work

Graphic Design work

kontakt

Lou Kailich

kontakt

Lou Kailich

kontakt

FTMKZ MERCH SHOP 👕

E-Commerce - Merchandising für Music-Artist

E-Commerce - Merchandising für Music-Artist

E-Commerce - Merchandising für Music-Artist

Zeitraum

Nov 2023 (10 Tage)

Typ

Unabhängiges Studien Projekt
als Teil des Spiced Academy UXUI Programms

Verantwortlichkeiten

User Research, Design Prinzipien, Quantitative Interviews (Remote) , Sketches, Wireframing, Prototyping

DESIGN PRINZIPIEN 🎨

Was soll der User empfinden, wenn er den Shop besucht? Wonach sollen sich Designentscheidungen richten?

Was soll der User empfinden, wenn er den Shop besucht? Wonach sollen sich Designentscheidungen richten?

Was soll der User empfinden, wenn er den Shop besucht? Wonach sollen sich Designentscheidungen richten?

FUN 🤪

FUN 🤪

  • Ansprechende Optik
  • Ehrliche Kommunikation
  • Gefühl der Vollendung

EASY ✌️

EASY ✌️

  • Transparente Preisgestaltung
  • Übersichtliche Produktliste
  • intuitive Menü Navigation

EXCLUSIVE ❤️‍🔥

EXCLUSIVE ❤️‍🔥

  • Künstlerverbundenheit
  • Merchandising Erforschung
  • Zugehörigkeitsgefühl

User story 🗣️

Ein klassischer Besucher des Shops mit einer klar definierten Mission.

Ein klassischer Besucher des Shops mit einer klar definierten Mission.

Ein klassischer Besucher des Shops mit einer klar definierten Mission.

“As a dedicated superfan, I want a seamless but entertaining experience to effortlessly discover and purchase the latest merchandise from my favorite music artist.
This way, I can visually represent my affiliation with the artist's fanbase and feel like a valued member of the exclusive fan club, showcasing my support.”

Research Topics

  1. Künstlerverbundenheit:

  1. Künstlerverbundenheit:

  1. Künstlerverbundenheit:

  • Erforschen der emotionalen Verbindung des Teilnehmers zu seinem Lieblingskünstler oder seiner Lieblingsband.
  • Erforschen der emotionalen Verbindung des Teilnehmers zu seinem Lieblingskünstler oder seiner Lieblingsband.
  • Erforschen der emotionalen Verbindung des Teilnehmers zu seinem Lieblingskünstler oder seiner Lieblingsband.

  1. Merchandising-Erforschung:

  1. Merchandising-Erforschung:

  1. Merchandising-Erforschung:

  • Untersuchung der vergangenen Erfahrungen des Teilnehmers beim Erkunden und Kauf von Merchandising-Artikeln seines Lieblingskünstlers oder seiner Lieblingsband.
  • Untersuchung der vergangenen Erfahrungen des Teilnehmers beim Erkunden und Kauf von Merchandising-Artikeln seines Lieblingskünstlers oder seiner Lieblingsband.
  • Untersuchung der vergangenen Erfahrungen des Teilnehmers beim Erkunden und Kauf von Merchandising-Artikeln seines Lieblingskünstlers oder seiner Lieblingsband.

  1. Zugehörigkeitsgefühl:

  1. Zugehörigkeitsgefühl:

  1. Zugehörigkeitsgefühl:

  • Analyse der Bedeutung des Zugehörigkeitsgefühls oder der Verbundenheit mit einer Gemeinschaft bei der Überlegung zum Kauf von Merchandising-Artikeln.
  • Analyse der Bedeutung des Zugehörigkeitsgefühls oder der Verbundenheit mit einer Gemeinschaft bei der Überlegung zum Kauf von Merchandising-Artikeln.
  • Analyse der Bedeutung des Zugehörigkeitsgefühls oder der Verbundenheit mit einer Gemeinschaft bei der Überlegung zum Kauf von Merchandising-Artikeln.

  1. Navigationsprototyp:

  1. Navigationsprototyp:

  1. Navigationsprototyp:

  • Erforschen der Erfahrung des Teilnehmers mit dem Navigationsprozess im Prototypen.
  • Erforschen der Erfahrung des Teilnehmers mit dem Navigationsprozess im Prototypen.
  • Erforschen der Erfahrung des Teilnehmers mit dem Navigationsprozess im Prototypen.

  1. Produktentdeckung:

  1. Produktentdeckung:

  1. Produktentdeckung:

  • Verstehen, wie einfach oder herausfordernd es für den Teilnehmer war, Produkte im Prototypen zu suchen und zu entdecken.
  • Verstehen, wie einfach oder herausfordernd es für den Teilnehmer war, Produkte im Prototypen zu suchen und zu entdecken.
  • Verstehen, wie einfach oder herausfordernd es für den Teilnehmer war, Produkte im Prototypen zu suchen und zu entdecken.

  1. Kaufentscheidungsfaktoren:

  1. Kaufentscheidungsfaktoren:

  1. Kaufentscheidungsfaktoren:

  • Untersuchen der Faktoren, die die Kaufentscheidung des Teilnehmers beeinflussen, und ob der Prototyp ausreichende Informationen bereitgestellt hat.
  • Untersuchen der Faktoren, die die Kaufentscheidung des Teilnehmers beeinflussen, und ob der Prototyp ausreichende Informationen bereitgestellt hat.
  • Untersuchen der Faktoren, die die Kaufentscheidung des Teilnehmers beeinflussen, und ob der Prototyp ausreichende Informationen bereitgestellt hat.

  1. Gefühl der Vollendung:

  1. Gefühl der Vollendung:

  1. Gefühl der Vollendung:

  • Einschätzen, ob der Teilnehmer ein Gefühl der Vollendung oder Verbundenheit verspürt, nachdem er einen Kauf im Prototypen abgeschlossen hat.
  • Einschätzen, ob der Teilnehmer ein Gefühl der Vollendung oder Verbundenheit verspürt, nachdem er einen Kauf im Prototypen abgeschlossen hat.
  • Einschätzen, ob der Teilnehmer ein Gefühl der Vollendung oder Verbundenheit verspürt, nachdem er einen Kauf im Prototypen abgeschlossen hat.

  1. Gesamterfahrung:

  1. Gesamterfahrung:

  1. Gesamterfahrung:

  • Erfassen der Gesamterfahrung des Teilnehmers mit dem Prototypen, Hervorhebung zufriedenstellender Aspekte und Bereiche zur Verbesserung. Außerdem sollten Teilnehmer ermutigt werden, Vorschläge zur Verbesserung der Benutzerfreundlichkeit und des Gesamtnutzererlebnisses des Prototypen zu geben.
  • Erfassen der Gesamterfahrung des Teilnehmers mit dem Prototypen, Hervorhebung zufriedenstellender Aspekte und Bereiche zur Verbesserung. Außerdem sollten Teilnehmer ermutigt werden, Vorschläge zur Verbesserung der Benutzerfreundlichkeit und des Gesamtnutzererlebnisses des Prototypen zu geben.
  • Erfassen der Gesamterfahrung des Teilnehmers mit dem Prototypen, Hervorhebung zufriedenstellender Aspekte und Bereiche zur Verbesserung. Außerdem sollten Teilnehmer ermutigt werden, Vorschläge zur Verbesserung der Benutzerfreundlichkeit und des Gesamtnutzererlebnisses des Prototypen zu geben.

Wireframes - User FLow

User Flow als Lo-Fi Wireframes
(Wire-Flow)

User Flow als Lo-Fi Wireframes
(Wire-Flow)

User Flow als Lo-Fi Wireframes
(Wire-Flow)

Erste Skizzen und Low-Fidelity Wireframes des User Flows, um das Entecken eines Produkts über das Kategorie Menü, sowie das hinzufügen zum Warenkorb wiederzuspiegeln.
(Wire-Flow Horizontal scrollbar)

Design Systems

E-Commerce - Merchandising für Music-Artist

E-Commerce - Merchandising für Music-Artist

E-Commerce - Merchandising für Music-Artist

FM Soft White

#

f5f5f5

R

245

G

245

B

245

FM Light Body Gray

#

c4c4c4

R

196

G

196

B

196

FM Body Grey

#

787878

R

120

G

120

B

120

FM Soft Black

#

1a1a1a

R

26

G

26

B

26

FM Yellow

#

ede400

R

237

G

228

B

0

Primary Button

Secondary Button

Tertiary Button

Ghost Button

primary button

secondary button

tertiary button

ghost button

Usability Interviews

Qualitative Interviews (1h, Remote) mit 5 Personen (zw. 28-34) für generelle Recherche und Benutzertests

Qualitative Interviews (1h, Remote) mit 5 Personen (zw. 28-34) für generelle Recherche und Benutzertests

Qualitative Interviews (1h, Remote) mit 5 Personen (zw. 28-34) für generelle Recherche und Benutzertests

Die größten Überlappungen im Feedback wurde unter 5 Recherche Gesichtspunkten zusammengefasst.

Die größten Überlappungen im Feedback wurde unter 5 Recherche Gesichtspunkten zusammengefasst.

Die größten Überlappungen im Feedback wurde unter 5 Recherche Gesichtspunkten zusammengefasst.

Prototype Navigation

  • Positives Feedback zur Gesamtnavigation.
  • Einige leichte Verwirrung bei der Video-Interaktion.
  • Nutzung der Suchfunktion und intuitive Verwendung des Burger-Menüs.

Product Discovery

  • Positive Erfahrungen bei der Entdeckung von Produkten.
  • Die Nutzung der Suchfunktion wird für ihre Effizienz gelobt.
  • Einige Probleme mit der Hintergrundkonsistenz verursachen Verwirrung.

Purchase Decision Factors

  • Design und Qualität als Schlüsselfaktoren identifiziert.
  • Materialinformationen und nachhaltige Praktiken werden berücksichtigt.
  • Positive Auswirkungen der begrenzten Verfügbarkeit und Exklusivität.

Sense of Accomplishment

  • Positive Rückmeldungen nach dem Kauf.
  • Gefühl der Zugehörigkeit zu einer Gemeinschaft betont.
  • Begrenztes Feedback zur Post-Kauf-Kommunikation.

Overall Experience

  • Im Allgemeinen positive Erfahrungen.
  • Feedback zu fehlenden Produktinformationen (Material, Herkunft).
  • Wunsch nach Post-Kauf-Informationen und Kommunikation.

AfFinity Map

Die folgende Map zeigt die Wichtigkeit der Erkenntnisse je Interviewee

Die folgende Map zeigt die Wichtigkeit der Erkenntnisse je Interviewee

Die folgende Map zeigt die Wichtigkeit der Erkenntnisse je Interviewee

(Tabelle horizontal scrollbar)

Issues & Aspects

Interviewee 1

Interviewee 2

Interviewee 3

Interviewee 4

Interviewee 5

Künstlerverbundenheit

High

High

High

High

Medium

Merchandising-Erforschung

High

Medium

High

High

Medium

Zugehörigkeitsgefühl

High

Medium

Low

Medium

Low

Prototyp Navigation

Low

High

Medium

Medium

High

Produktentdeckung

Low

High

High

High

Medium

Kaufentscheidungsfaktioren

High

High

Medium

Medium

High

Gefühl der Vollendung

Low

Low

Medium

Low

High

Gesamterfahrung

High

High

Medium

Medium

High

Priorization Map

Geschäfts Bedürfnisse werden mit Hilfe einer Priorisierungs Tabelle herauskristallisiert.

Geschäfts Bedürfnisse werden mit Hilfe einer Priorisierungs Tabelle herauskristallisiert.

Geschäfts Bedürfnisse werden mit Hilfe einer Priorisierungs Tabelle herauskristallisiert.

Die gelb gerahmten Felder zeigen das beste Nutzen-Aufwand Verhältnis aus geschäftlicher Sicht, weshalb sich bei der Verbesserung des Prototyps hauptsächlich auf diese Bereiche konzentriert wurde.

Die gelb gerahmten Felder zeigen das beste Nutzen-Aufwand Verhältnis aus geschäftlicher Sicht, weshalb sich bei der Verbesserung des Prototyps hauptsächlich auf diese Bereiche konzentriert wurde.

Die gelb gerahmten Felder zeigen das beste Nutzen-Aufwand Verhältnis aus geschäftlicher Sicht, weshalb sich bei der Verbesserung des Prototyps hauptsächlich auf diese Bereiche konzentriert wurde.

(Tabelle horizontal scrollbar)

Aufwand\Nutzen

Niedriger Nutzen

Mittlerer Nutzen

Hoher Nutzen

Niedriger Aufwand

Mittlerer Aufwand

Zugehörigkeitsgefühl

Prototyp Navigation

Kaufentscheidungsfaktioren,
Produktentdeckung,
Künstlerverbundenheit,
Gefühl der Vollendung

Hoher Aufwand

Merchandising-Erforschung,
Gesamterfahrung

Improvements

Zur Veranschaulichung des Designprozesses werden die alten Designs den neuen gegenüber gestellt.

Zur Veranschaulichung des Designprozesses werden die alten Designs den neuen gegenüber gestellt.

Zur Veranschaulichung des Designprozesses werden die alten Designs den neuen gegenüber gestellt.

Aus Gründen der Effektivität wurde sich bei der Optimierung auf die Themenbereiche fokussiert, die in der Priorization Map dem Geschäft das beste Verhältnis aus Nutzen und Aufwand garantieren.

Aus Gründen der Effektivität wurde sich bei der Optimierung auf die Themenbereiche fokussiert, die in der Priorization Map dem Geschäft das beste Verhältnis aus Nutzen und Aufwand garantieren.

Aus Gründen der Effektivität wurde sich bei der Optimierung auf die Themenbereiche fokussiert, die in der Priorization Map dem Geschäft das beste Verhältnis aus Nutzen und Aufwand garantieren.

Klickbarer Prototyp

Erlebe den Prototyp idealerweise im Vollbildmodus.
Bei Anzeigeproblemen, klicke >HIER<

Erlebe den Prototyp idealerweise im Vollbildmodus.
Bei Anzeigeproblemen, klicke >HIER<

Erlebe den Prototyp idealerweise im Vollbildmodus.
Bei Anzeigeproblemen, klicke >HIER<

NEXT STEpS

Realisierung des Shops unter Beachtung aller gewonnenen Erkenntnisse aus den Gebieten der Recherche und dem User-Testing (Interface).

Realisierung des Shops unter Beachtung aller gewonnenen Erkenntnisse aus den Gebieten der Recherche und dem User-Testing (Interface).

Realisierung des Shops unter Beachtung aller gewonnenen Erkenntnisse aus den Gebieten der Recherche und dem User-Testing (Interface).