Skechers PDP redesign composite: mobile, tablet, and desktop views layered with the new product page in charcoal and blue.
Product · 2021

A PDP that lets the product breathe.

A product detail page redesign for Skechers (Accent Group). Mobile-first, scaling cleanly to desktop. Brand-led design, user-generated content, considered hierarchy.

RoleLead Product Designer
ClientSkechers · Accent Group
Year2021
DisciplinesMobile-first · Responsive · Iconography

Brief

I was asked to redesign the product detail page for Skechers, one of Accent Group's key brands, starting with the men's GOwalk 5 Downdraft. The PDP needed to read clean and simple on mobile first, then scale to desktop, with reviews and user-generated content carrying real weight in the purchase decision.

Problem

The existing Skechers PDP read as generic third-party catalogue. Product imagery fought with promotional banners for attention, sizing and add-to-cart sat below the fold on mobile, and reviews were buried in a tab most shoppers never opened. The header and footer carried none of the Skechers brand voice. The risk was clear: shoppers were defaulting to third-party retailers because the brand's own page gave them less reason to stay.

My role

I led the redesign end-to-end across mobile and responsive desktop:

  • Audited the original PDP against the brief and against competing third-party retailers
  • Three concept directions explored on mobile-first, then narrowed to one
  • Iconography exploration for the top nav, aligned to the Skechers brand
  • Final mobile design with hierarchy revised around imagery, sizing, and reviews
  • Responsive scale-up from mobile to desktop on the chosen direction

What success looked like

Per the brief, success meant:

  • Mobile-first experience that lets shoppers save the product for later
  • Clear understanding of features and active promotions
  • Other-shopper reviews surfaced as a primary purchase driver
  • Strong reasons to buy direct from Skechers, not from a third party
  • Header and footer revised to match the new experience
  • Demonstrates how the design scales up to desktop

Three concepts

I ran three concept directions on mobile, each carrying a different point of view on hierarchy, imagery, and how reviews fit into the page. I assessed each against the brief and against shopper behaviour I saw on competing third-party PDPs, then narrowed to the one direction I took into responsive.

Three Skechers PDP mobile concepts side by side: image-led layout, info-led layout, and a hybrid leading with reviews.
Three mobile directions: image-led, info-led, and reviews-led, scoped to test which hierarchy carried the brand best.
Concept refinement strip showing the chosen direction across multiple mobile screens with sticky add-to-cart and inline reviews.
Refining the chosen direction: sticky add-to-cart, inline reviews, and a tighter promo slot above the fold.
Single thumbnail iteration testing a tighter PDP module: product gallery, sizing, and review summary stacked.
Module-level iteration: gallery, sizing, and review summary stacked into one above-the-fold block.

Top nav iconography

The original icon set was clean and modern but the rounded corners didn't carry Skechers' brand voice. Square corners read as a better fit: more athletic, more direct. Small change, real reinforcement of the brand at the top of every page.

Final Skechers top navigation: square-cornered icons for search, account, wishlist, and bag, set against the navigation bar.
Top nav: square corners reading as Skechers, not generic.

Final design

The final design carries product imagery as the primary surface, sizing and purchase actions visible above the fold on mobile, and reviews promoted as the social proof Skechers shoppers actually look for. The same hierarchy carries up to desktop without losing what the mobile-first work earned.

Skechers PDP final responsive design shown across mobile, tablet, and desktop: product imagery left, sizing and add-to-cart right, reviews above the fold on desktop.
Final responsive design: mobile-first hierarchy carried into tablet and desktop. Product imagery leads, sizing and add-to-cart sit immediately to its right at desktop, reviews promoted above the fold.
Outcome

Three concepts, one direction, a responsive system delivered to the brief.

3
concept directions assessed on mobile
1
direction taken into responsive
100%
brand-aligned iconography across the top nav
M→D
mobile-first hierarchy carried up to desktop

What I learned

Mobile-first wasn't a layout choice on this brief; it was a hierarchy choice. Once imagery, sizing, and reviews earned their slots above the fold on mobile, scaling up to desktop became a question of where to give the imagery more room — not a redesign.

The top nav taught me how much brand a small detail can carry. Square-cornered icons looked unremarkable on their own; sat in the header, they shifted the whole page from generic catalogue to Skechers.

Methods

Mobile-first Responsive Concept exploration Iconography Branding PDP system Visual hierarchy
Next project

Jimmy Brings