Feelgrounds PDP Redesign:
Optimizing product presentation in shoe e-commerce

A data-driven redesign of the product detail page that increases conversion, creates comparability, and establishes accessibility through structured UX research, clear information architecture, and iterative testing.

Rolle
UX/UI Designer & Researcher, Information Architect
Tools
Figma, FigJam, Google Analytics
Zeitraum
8 weeks (Q2-Q3 2024)
Ziele
Conversion optimization, comparability, accessibility, brand strengthening

Analysis of the initial situation: Identifying weaknesses

The existing product detail page showed significant UX deficits that directly impacted conversion and user experience.

Through systematic analysis of heat maps, user session recordings, and quantitative analytics data, I identified key problem areas of the existing PDP:

Generic product information
Technical data without context. Users did not understand why a model was suitable for their use case. A lack of storytelling
Lack of lifestyle and mood photos
Product photos on a white background, no emotional appeal, no use case context. Users could not identify with the product.
No comparability between models
The information on the individual models differed only slightly. USPs and differences were not highlighted.
Accessibility not provided
Text on images, missing alt texts, insufficient contrast ratios, no keyboard operability. WCAG 2.1 standards not met.
Poor ATF performance
ATF texts offered little additional information or were very long. The first viewport appeared clinical and cold.
Unclear calls to action
Descriptions and further information did not encourage users to buy the product, but only provided a rough overview of the product attributes.

Competitive analysis: Learning from best practices

Systematic comparison with leading barefoot shoe brands to derive strategic design principles.

I analyzed the product detail pages of VivoBarefoot, Wildling, Xero Shoes, and Groundies according to defined criteria: information structure, storytelling quality, CTA design, and visual imagery.

VivoBarefoot
Information structure ★★★★☆
Storytelling ★★★★☆
CTA design ★★★☆☆
Visual imagery ★★★★★
Wildling
Information structure ★★☆☆☆
Storytelling ★★★★☆
CTA design ★★★☆☆
Visual imagery ★★★★☆
Xero Shoes
Information structure ★★★★☆
Storytelling ★★★☆☆
CTA design ★★★★☆
Visual imagery ★★★☆☆
Groundies
Information structure ★★★☆☆
Storytelling ★★☆☆☆
CTA design ★★★★☆
Visual imagery ★★★☆☆
01
Information Clarity
Present product information in a structured and scannable way. Connect technical details with context and benefits. Use progressive disclosure for more in-depth information.
02
Emotional Connection
Lifestyle photography and storytelling establish emotional brand loyalty. Show the product in context rather than as an isolated cutout.
03
Conversion Optimization
CTA atf for fast checkout. Strengthen detail depth through scroll behavior. From clear and benefit-oriented communication to emotional storytelling.

UX strategy and information architecture

Structuring content according to user priority and purchasing decision process

Based on the research results, I developed a new content hierarchy that balances information clarity, conversion, SEO, and accessibility.

Section 1
General product information, product images, USPs, and CTA
Section 2
Technical specifications and product benefits
Section 3
Product details and material information
Section 4
Reviews and community feedback
Section 5
Care instructions

The new structure prioritizes efficient information delivery and emotional appeal over technical details and allows for different levels of engagement—from a quick scan to detailed research.

UI concept and design system

Visual development with a focus on accessibility and brand consistency

The UI design is based on Feelgrounds' corporate identity and integrates accessibility guidelines. All interface elements have been documented in the existing design system and designed for reusability.

Final Homepage Design – Live Preview

View:
Feelgrounds PDP Design
Scroll within the mockup to see the entire page.

Testing and optimization: Data-driven validation

A/B testing and user feedback for continuous improvement

In addition to the redesign, a roadmap was created that defined various features to optimize the new site in terms of conversion through systematic A/B testing in stages.

+12%
Sticky vs. static CTA
+26%
Improved size selection
+17%
Reviews in the first viewport

Results and impact: Measurable performance improvement

The redesign of the product detail page led to significant improvements across all relevant KPIs. The data is based on an 8-week comparison period before and after the launch.

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

In addition to the quantitative metrics, qualitative user feedback showed significantly higher satisfaction with product information, comparability, and visual presentation.

Reflection and learnings

Insights for future UX projects

01
Data-driven UX design strengthens brand experience
The combination of quantitative and qualitative analyses leads to solutions that both convert and strengthen brand identity. Emotional appeal and functional excellence are not mutually exclusive.
02
Accessibility and SEO are not mutually exclusive
Semantic HTML, alt text, and structured data improve both accessibility and search engine rankings. Inclusive design is relevant to business.
03
Iterative design leads to sustainable performance
Continuous testing and optimization after launch are crucial. Initial improvements were increased by 8% through further iterations.