Feelgrounds PDP Redesign:
Optimierung der Produktpräsentation im Schuh-E-Commerce

Eine datenbasierte Neugestaltung der Produktdetailseite, die Conversion steigert, Vergleichbarkeit schafft und Barrierefreiheit etabliert, durch strukturiertes UX Research, klare Informationsarchitektur und iteratives Testing.

Rolle
UX/UI Designer & Researcher, Informationsarchitekt
Tools
Figma, FigJam, Google Analytics
Zeitraum
8 Wochen (Q2-Q3 2024)
Ziele
Conversionoptimierung, Vergleichbarkeit, Barrierefreiheit, Markenstärkung

Analyse der Ausgangssituation: Schwachstellen identifizieren

Die bestehende Produktdetailseite zeigte deutliche UX-Defizite, die sich direkt auf Conversion und Nutzererlebnis auswirkten

Durch systematische Analyse von Heatmaps, Nutzer-Session-Recordings und quantitativen Analytics-Daten identifizierte ich zentrale Problemfelder der bestehenden PDP:

Generische Produktinformationen
Technische Daten ohne Kontext. Nutzer verstanden nicht, warum ein Modell zu ihrem Anwendungsfall passt. Fehlende Storytelling-Elemente schwächten die Markenbindung.
Fehlende Lifestyle- und Moodfotos
Produktfotos auf weißem Hintergrund, keine emotionale Ansprache, kein Use-Case-Kontext. Nutzer konnten sich nicht mit dem Produkt identifizieren.
Keine Vergleichbarkeit zwischen Modellen
Die Informationen der einzelnen Modelle unterschieden sich nur wenig. USPs und Unterschiede wurden nicht herausgestellt.
Barrierefreiheit nicht gegeben
Text auf Bildern, Fehlende Alt-Texte, unzureichende Kontrastverhältnisse, keine Tastaturbedienbarkeit. WCAG 2.1 Standards nicht erfüllt.
Schwache ATF-Performance
Texte atf haben nur wenig Mehrinformationen geboten, oder waren sehr lang. Der erste Viewport wirkte klinisch und kalt.
Unklare Call-to-Actions
Beschreibungen und weitere Informationen haben die Nutzer nicht leitend dazu angesprochen, das Produkt zu kaufen, sondern gaben nur eine grobe Übersicht über die Produktattribute.

Wettbewerbsanalyse: Von Best Practices lernen

Systematischer Vergleich mit führenden Barfußschuh-Marken zur Ableitung strategischer Designprinzipien

Ich analysierte die Produktdetailseiten von VivoBarefoot, Wildling, Xero Shoes und Groundies nach definierten Kriterien: Informationsstruktur, Storytelling-Qualität, CTA-Design und visuelle Bildwelt.

VivoBarefoot
Informationsstruktur ★★★★☆
Storytelling ★★★★☆
CTA-Design ★★★☆☆
Bildwelt ★★★★★
Wildling
Informationsstruktur ★★☆☆☆
Storytelling ★★★★☆
CTA-Design ★★★☆☆
Bildwelt ★★★★☆
Xero Shoes
Informationsstruktur ★★★★☆
Storytelling ★★★☆☆
CTA-Design ★★★★☆
Bildwelt ★★★☆☆
Groundies
Informationsstruktur ★★★☆☆
Storytelling ★★☆☆☆
CTA-Design ★★★★☆
Bildwelt ★★★☆☆
01
Information Clarity
Produktinformationen strukturiert und scanbar darstellen. Technische Details mit Kontext und Nutzen verbinden. Progressive Disclosure für tiefergehende Informationen.
02
Emotional Connection
Lifestyle- Fotografie und Storytelling etablieren emotionale Markenbindung. Produkt im Nutzungskontext zeigen statt isolierter Freisteller.
03
Conversion Optimization
CTA atf für schnelle Kaufabwicklung. Detailtiefe durch scrollverhalten stärken. Von klarer und benefitorientierter Kommunikation zu emotional Storytelling.

UX-Strategie und Informationsarchitektur

Strukturierung der Inhalte nach Nutzerpriorität und Kaufentscheidungsprozess

Basierend auf den Rechercheergebnissen entwickelte ich eine neue Content-Hierarchie, die Informationsklarheit, Conversion, SEO und Accessibility in Einklang bringt.

Section 1
Übergeordnete Produktinformationen, Produktabbildungen, USPs und CTA atf
Section 2
Technische Spezifikationen und Produktbenefits
Section 3
Produktdetails und Materialinformationen
Section 4
Reviews und Community Feedback
Section 5
Pflegehinweise

Die neue Struktur priorisiert effiziente Informationswiedergabe und emotionale Ansprache vor technischen Details und ermöglicht unterschiedliche Einstiegstiefen – von schnellem Scan bis zur detaillierten Recherche.

UI-Konzept und Designsystem

Visuelle Ausarbeitung mit Fokus auf Barrierefreiheit und Markenkonsistenz

Die UI-Gestaltung basiert auf der Feelgrounds Corporate Identity und integriert Richtlinien zur Barrierefreiheit. Alle Interface-Elemente wurden im bestehenden Design System dokumentiert und für Wiederverwendbarkeit konzipiert.

Final Homepage Design – Live Preview

View:
Feelgrounds PDP Design -->
Scroll innerhalb des Mockups, um die gesamte Seite zu sehen

Testing und Optimierung: Datenbasierte Validierung

A/B-Tests und Nutzerfeedback zur kontinuierlichen Verbesserung

Zusätzlich zum Redesign wurde eine Roadmap erstellt, die verschiedene Features definierte, um die neue Seite in Hinsicht auf Conversion durch systematische A/B-Tests in Schritten optimiert.

+12%
Sticky vs. statischer CTA
+26%
Verbesserte Größenwahl
+17%
Reviews im ersten Viewport

Ergebnisse und Wirkung: Messbare Performance-Steigerung

Die Neugestaltung der Produktdetailseite führte zu signifikanten Verbesserungen über alle relevanten KPIs hinweg. Die Daten basieren auf einem 8-wöchigen Vergleichszeitraum vor und nach dem Launch.

+38%
Completion Rate
+18%
Session Duration
+35%
Organic traffic

Neben den quantitativen Metriken zeigten qualitative Nutzerfeedbacks deutlich höhere Zufriedenheit mit der Produktinformation, Vergleichbarkeit und visuellen Aufbereitung

Reflexion und Learnings

Erkenntnisse für zukünftige UX-Projekte

01
Datenbasiertes UX-Design stärkt Markenerlebnis
Die Verbindung von quantitativen und qualitativen Analysen führt zu Lösungen, die sowohl konvertieren als auch die Markenidentität stärken. Emotionale Ansprache und funktionale Exzellenz schließen sich nicht aus.
02
Barrierefreiheit und SEO sind keine Gegensätze
Semantisches HTML, Alt-Texte und strukturierte Daten verbessern sowohl Accessibility als auch Suchmaschinen-Rankings. Inclusive Design ist Business-relevant.
03
Iteratives Design führt zu nachhaltiger Performance
Kontinuierliches Testing und Optimierung nach Launch sind entscheidend. Die initialen Verbesserungen wurden durch weitere Iterationen um 8% gesteigert.