An E-commerce UX Case Study Example, Torn Down (Marlo)
Heads up: Marlo is a fictional store — an example portfolio built with Folioverse. The metrics below are illustrative sample figures from that fictional project, not real product results.
An ecommerce ux case study is easy to fill with screens and hard to make convincing, because the work is judged on whether you understood why people buy. This teardown walks through Marlo — a fictional home and lifestyle store — to show how a conversion-focused case study can prove a clear decision model instead of just a nicer-looking page.
Marlo’s product detail page (PDP) had high bounce and low add-to-cart. The designer redesigned it to lift conversion. It is an example portfolio built with Folioverse: realistic but fictional, with illustrative figures.
Recruiter 30-second scan: What was the page failing to do? What did the designer own? Which decisions came from research? And are the conversion numbers framed honestly?
Case context
- Project type: e-commerce PDP redesign
- Role: sole product designer, with a PM, a researcher, and two engineers
- Duration: 5 weeks, within the existing design system, no replatforming
Weak version:
“We redesigned the product page.”
Strong version:
“I was the sole designer on a 5-week PDP redesign, working within Marlo’s existing design system with a PM, a researcher, and two engineers.”
The problem this case proves
A strong e-commerce problem statement names what shoppers couldn’t do, not just a metric.
Weak version:
“The product page had a high bounce rate.”
Strong version:
“The PDP buried the four things shoppers decide on — clear photos, variants, delivery time, and reviews — under a cramped layout. On mobile it was worst: the add-to-cart button scrolled off-screen entirely.”
What the designer did — research that points somewhere
The case shows analytics (scroll-depth and add-to-cart rate by device), six unmoderated usability tasks, and a teardown of four leading home stores. The synthesis is the strong part: three decision-blockers — weak image hierarchy, hidden variant selection, and trust gaps before the fold.
That move — turning mixed research into three named blockers — is what separates a real case study from a list of methods.
Key decision 1: a single decision hierarchy
Evidence: conversion problems traced to confidence, not aesthetics.
Alternative considered: a general visual refresh.
Weak version:
“I made the page cleaner and more modern.”
Strong version:
“I rebuilt the PDP around one hierarchy — see it, choose it, trust it, buy it — because the research showed conversion was a confidence problem, not a button-color problem.”
This single organizing principle is the spine of the whole case, and it makes every later decision legible.
Key decision 2: make variant selection obvious
Evidence: the old dropdown hid options shoppers needed.
Alternative considered: keep the compact dropdown.
Weak version:
“I improved the variant picker.”
Strong version:
“I replaced the dropdown with visible color swatches and size chips that have a clear selected state, because shoppers couldn’t tell what they were choosing in the old design.”
Key decision 3: surface trust, and follow the buyer on mobile
Evidence: delivery and reviews were buried; the mobile buy action scrolled away.
Alternative considered: leave the page structure as-is.
Weak version:
“I cleaned up the layout and made it mobile-friendly.”
Strong version:
“I moved the delivery estimate, star rating, and review count next to the price, and pinned a sticky add-to-cart on mobile so the buy action follows the shopper instead of scrolling off-screen.”
Outcome and evidence
The case includes A/B results, framed as illustrative.
Weak version:
“Conversions went way up after the redesign.”
Strong version:
“In a two-week A/B test in the example project, add-to-cart rate rose about 18%, mobile bounce fell roughly 12%, and PDP-to-checkout improved around 9%. These are illustrative figures for a fictional product, not a real launch.”
The honest learning lands the point: on a PDP, conversion is a hierarchy-of-confidence problem, not a button-color problem.
What makes this teardown worth studying
- The research converges on three named blockers instead of a method list.
- One decision hierarchy organizes every change, so the thinking is easy to follow.
- Mobile constraints are treated as design decisions, not afterthoughts.
- Metrics are present but clearly labeled as illustrative.
For the full structure behind a case like this, use the UX case study guide. Browse more UX case study examples, including an event website teardown. If this is your first portfolio piece, start with how to write a UX case study with no experience.