Zum Inhalt springen

Nr. 01

UX-Fallstudie*

Eine Website für GRIP., einen Skateshop und eine Skater-Crew in Porto, gestaltet nach der Design-Thinking-Methode.

Kunde
GRIP.
Jahr
2021
Disziplinen
UX/UI-Design, Webdesign

*wird noch aktualisiert

GRIP. ist ein Skateshop und eine Skater-Crew in Porto. GRIP. begann Ende der 90er-Jahre als kleiner Laden für Kleidung und Boards und ist seither stetig gewachsen.

ÜBER DAS PRODUKT

Ziel war eine Website, die die Werte der Marke und die Skateboard-Kultur vermittelt. Mit dieser digitalen Plattform wollte GRIP. das Verkaufsvolumen steigern (Onlineshop), zu einer Referenz unter den Skatern in Porto werden, eine Skater-Community in der Stadt zusammenbringen und mittel- bis langfristig eine eigene Modemarke mit eigenen Kollektionen aufbauen.
Von seinen wichtigsten Mitbewerbern will sich GRIP durch Kundennähe und fachkundige Beratung beim Verkauf abheben.

Laptop mit der Startseite des Skateshops GRIP: ein Skater mitten im Trick unter «Skateboards with style», darunter die Teaser «In need of Support?» und «Learning to Skate?»

DESIGN THINKING

Für dieses Projekt habe ich mit der Design-Thinking-Methode gearbeitet. Design Thinking ist eine Methodik, die einen menschzentrierten Gestaltungsansatz fördert. Sie regt kreatives Denken und Strategien an, mit denen Designerinnen und Designer benutzerfreundliche Produkte entwickeln, die ein bestimmtes Problem lösen.
Die Methode gliedert sich in fünf Phasen:

- Empathie
- Definition
- Ideenfindung
- Prototyp
- Test

Wichtig ist: Diese Phasen folgen nicht zwingend einem einzigen, fest definierten linearen Ablauf. Einzelne Phasen können neue Ideen auslösen oder neue Erkenntnisse zur User Journey liefern, die wiederum neue Iterationen bereits abgeschlossener Phasen anstossen.

PHASE 1: EMPATHIE

In dieser ersten Projektphase habe ich Fachleute zurate gezogen – ich habe mit den Stakeholdern von GRIP gesprochen, wir haben Nutzerinterviews geführt – und bin selbst in das physische Umfeld eingetaucht. Ich habe eine Wettbewerbsanalyse durchgeführt und Konkurrenzprodukte untersucht, um ihre Stärken und Schwächen zu analysieren.

PHASE 2: DEFINITION

PHASE 3: IDEENFINDUNG

PHASE 4: PROTOTYP

Wireframes (Desktop)
In mehreren Gestaltungsschritten habe ich zunächst mit Medium-Fidelity-Wireframes gearbeitet, bevor ich einen funktionsfähigeren Prototyp gestaltet habe.

Schräg angeordnete Wireframes der GRIP-Website in Graustufen: Startseite, Shop, Warenkorb, Login, die Workshops «Learning with the GRIP» und der Buchungsablauf «Technical Check-up»

PHASE 5: TEST

Animation auf einem Laptop-Mockup, die sich durch den GRIP-Onlineshop klickt: Startseite, Shop mit Filter für Einsteiger, eine Produktseite für ein Penny Board, dann Warenkorb, Login, Adresse, Zahlung und Bestätigung