Ride Rich PDP redesign — layout options A and B, plus mobile

Case 02 / DTC · Product Page

Optimizing Conversion for RideRich by Removing Its Biggest Purchase Roadblocks

Closing the gap between intent and purchase — a data-driven redesign of a direct-to-consumer product detail page, built to convert the customer who already wants the product but stops just before buying.

Platform
Shopify — Desktop & Mobile
Methods
Post-purchase survey · Session recordings · Heuristic audit
Scope
PDP layout, image gallery, spec display, sizing UX

01 — Context

Street gear with a clear point of view.

RideRich sells motorcycle gear with a "Street-First" aesthetic: protective jackets that pass as premium urban streetwear. The store already had steady traffic, a strong brand and a ~$300–320 USD average order value. The brief was to convert the intentional visitors by getting rid of purchase roadblocks.

02 — Research

Customers love the look but are most anxious about fitment, and need real proof.

Research drew from three sources: a five-question post-purchase survey (n=305 over 30 days), Microsoft Clarity session recordings focused on desktop behaviour, and a heuristic audit of the live PDP.

Q1 — Why did you buy?

66%
Street-First Aesthetic — looks like streetwear, performs on the bike
15%
Technical Performance — breathability, waterproofing, CE-certified armour

7% Brand Identity  ·  6% Value for Money  ·  ···

The aesthetic is the product. Two thirds of buyers purchased because of how the gear looks — yet the PDP's visual experience was underselling it.

Q2 — What almost stopped you?

40%
Fitment Anxiety — not sure the gear would fit their body type
14%
Shipping costs were a concern

10% Material/Safety Uncertainty  ·  7% Brand Credibility  ·  ···

Q2 survey data — What almost stopped you from buying?
Post-purchase survey data (n=305) — fitment anxiety consistently leads as the top hesitation, with a notable uptick through May.

Fitment anxiety alone affected 4 in 10 buyers who converted. The rate among those who abandoned is almost certainly higher.

Q3 — What would help you decide faster?

39% — Photos of customers of various sizes wearing it 22% — Real-world footage in action or different weather 20% — More detail on CE-certified armour placement 19% — Clearer material breakdowns

Session recordings — Microsoft Clarity

Desktop sessions revealed a consistent pattern: images spaced across a long single-column scroll caused users to repeatedly scroll past content and backtrack searching for size charts and spec callouts. Multiple sessions showed abandonment mid-scroll. The scroll journey was eroding confidence rather than building it.

Summary — what's costing conversions

Problem 01

The scattered desktop gallery scrolls the buy box out of view, and many users don't come back.

Problem 02

Buyers come for the look, but the page has no video or lifestyle footage to prove it.

Problem 03

Armour, lining and waterproofing specs are buried in paragraphs that are hard to scan.

Problem 04

A static size chart doesn't answer the biggest hesitation: will it fit me?

03 — Solutions

Redesigning sections in the PDP.

Solution 01

Right-column scroll. Let images take the stage.

Problem
Images scattered down the page forces users to scroll to see all images, which will scroll away the buy box.
DESIGN SOLUTION
The PDP moves to a two-column layout where product information scrolls on the right and the image gallery sticks on the left. The buy box — price, size selector, add-to-cart — stays visible at all times while the customer browses images.
ALTERNATIVE FULL-PAGE SCROLL
We decided to discard our backup plan of full-page scroll because A. content on both sides creates competing visual attention; B. the buy box exits viewport too early. Right-side scroll gives each image the full left half of the viewport as a dedicated stage — maximizing the visual impact of an aesthetic-first product.
Solution 01 — layout comparison: original vs A (whole-page scroll) vs B (right side scroll)

Solution 02

Add "See It in Action" to embed real-world content.

Problem
22% of buyers wanted real-world footage; 39% wanted verified fit content from real customers. These sections either doesn't exist, or exists early enough on the current PDP.
DESIGN SOLUTION
A dedicated "See It in Action" module added right after the buy box/image section.
Outcome
Closes the gap between the brand's social presence (which performs well) and a PDP that was sterile by comparison.
Solution 02 — adding See It in Action section

Solution 03

Visualize specs to make them scannable.

Problem
Technical specs are a purchase driver (15%) and a hesitation (10%). Dense paragraph text hides the value proposition.
DESIGN SOLUTION
Replaced text-heavy accordion with a scannable spec display: used illustration and diagram specifically made for this product, and reduced length of text. These trust signals anchors the value proposition.
Solution 03 — turning heavy text into visual spec cards

Solution 04

A better sizing experience — reduce fitment anxiety.

Problem
40% of buyers cited fitment anxiety as their biggest hesitation.
Design Solution
Suggested changes while considering their impact and effort:
Restructured the sizing table, added body measurement guidance, and surfaced trust signals like free exchanges, fit indicators, and body-specific measurement tips, etc.
Sizing improvements — part 1 Sizing improvements — part 2

04 — Summary

Data leads. Testing confirms.

The brand already has what it needs to convert: a distinct aesthetic identity, strong community, and competitive pricing. Every design decision here was driven by post-purchase survey data. The Street-First Aesthetic drives 66% of sales, so the gallery needed to be a stage for it. Fitment anxiety almost blocked 40% of buyers, so sizing had to become a trust-building moment. Specs cost conversions, so they needed to be scannable and visible.

None of big changes should launch without being measured or A/B tested.

Known gap

Buy box button hierarchy needs clearer visual priority. "Add to Cart" and "Buy with Shop Pay" currently compete equally.

Planned feature

Customer-submitted size evaluations surfaced contextually near the size picker to address fitment anxiety at the moment of decision.

Future tool

A fit recommender (enter height, weight, and preferred fit) to directly target the 40% fitment anxiety finding for first-time buyers.

Ongoing

The survey and screen recordings should keep running. It is the most direct feedback loop from customer intent to page design.

← Back to all work Next: SellPal Builder →