Sample 01 / Illustrative Shopify teardown
The product is clear. The choice isn’t.
Fictional scenario. Not client work. No store was audited, no change was implemented and no outcome was measured. The diagrams below are illustrative flows, not before-and-after results.
An illustrative Shopify store selling a reusable bottle in two sizes. The scenario assumes mobile visitors arrive from an ad and must choose a size before adding to cart.
The assumed problem.
The page leads with lifestyle imagery, then asks shoppers to choose 500 ml or 1 litre. Capacity guidance and delivery information sit below a long story. The choice arrives before the information needed to make it.
The hypothesis.
Putting the size comparison and delivery information beside the purchase controls may help shoppers make a confident choice. A higher add-to-cart rate is a hypothesis to test, not an expected result.
Assumed starting point
- Lifestyle image
- 500 ml / 1 litre
- Add to cart
- Long brand story
- Size guide and delivery details
Proposed direction
- Product image with scale reference
- Size comparison: capacity, dimensions, weight
- Choose size • selected price • stock status
- Delivery and returns summary
- Add to cart
What gets checked first.
Trace the mobile journey
Check the ad promise against the landing page. Try both sizes on a small screen and with keyboard navigation. Record unclear labels, selection errors and unavailable variants.
Check the evidence
If available, review product views, add-to-cart events and purchases by device and traffic source. Check event accuracy first. Read support questions about size, fit and delivery; do not infer hesitation from an exit alone.
Check alternative causes
Stock gaps, unexpected shipping costs, price or an ad reaching the wrong audience could explain weak sales. A layout change will not resolve those causes.
What could change.
First: answer the size question
Place a compact comparison beside the selector, using verified dimensions and a real scale reference. Give both sizes clear labels and announce selection and availability changes accessibly.
Next: explain the commitment
Show the selected price and a truthful delivery and returns summary near Add to cart. Where delivery depends on location, explain that rather than inventing a delivery date.
Later: test additional guidance
Only consider a finder or larger redesign if customer research shows that the simpler comparison still leaves the choice unclear.
How to judge it.
After a separately approved implementation, compare eligible product-page sessions that add to cart, segmented by device and traffic source. Check completed purchases, revenue per session, returns and selection errors as guardrails. Agree the baseline, sample requirements and test duration before launch; do not stop at the first favourable movement.
With insufficient traffic for a reliable experiment, use observed usability sessions to find problems and report the limits. A before-and-after comparison alone does not establish that the design caused a sales change.
What a client would receive.
An annotated product-page review, one proposed purchase-area wireframe and a prioritised implementation brief. No design has been shipped and no performance result has been measured for this sample.
Next sample: A cart where delivery questions compete with checkout. ↗