Work · Case study · Demo store
Northcairn — outdoor-gear demo store
A demo store I designed and built on Magento 2 + Hyvä — the homepage and the product page — to show how I run a UX audit and the fix cycle after it: find what quietly costs sales, fix it, compare before and after.
Overview
An audit, then the fix
The same loop I run on client stores: look closely, write down what gets in the way, fix it, check the result.
Northcairn is a fictional outdoor-gear brand — backpacks, jackets, camp gear. The store looks finished on desktop, and that's exactly the trap: most of the traffic on stores like this is mobile, and that's where the product page quietly lost people.
I went through the mobile product page the way a first-time shopper would and picked the three problems most likely to cost a sale. Each one is below: the problem, the fix, and why it matters for conversion — with screenshots of the page before and after.
Fix 01 · Mobile gallery
Nobody knew the photos swipe
On a phone the gallery shows one photo at a time — and nothing said there were more.
Problem
On mobile the gallery is a horizontal slider, but nothing on screen said so: no dots, no counter, no motion inviting a swipe. Most shoppers saw the first photo and kept scrolling.
Solution
Dot indicators under the gallery that show the current photo and double as buttons, plus a soft one-time nudge: shortly after the gallery comes into view, the track slides a little to the side and back. It never repeats, stops the moment the shopper touches it, and is skipped for anyone with reduced motion turned on.
Why it matters for conversion
Shoppers who don’t realise the photos swipe judge the product by the first one alone and leave without seeing the rest. Making the gallery obviously swipeable means the other photos — fit, details, colours — actually get seen, and those are often what makes the decision.
Fix 02 · Sticky add to cart
Add to Cart scrolled out of sight
Mobile product pages are long — by the time a shopper decides, the button is several screens up.
Problem
On a phone the Add to Cart button sits near the top of the page. Shoppers who scroll down to read the description, specs and reviews leave it behind, and nothing brings it back.
Solution
A slim sticky bar slides up from the bottom as soon as the main button leaves the screen: product photo, name, live price, the chosen variant and its own Add to Cart. If options aren't picked yet, it scrolls back to them and says so instead of failing silently. When the main button is visible again, the bar hides.
Why it matters for conversion
It closes a leak analytics doesn't show: someone scrolls all the way down, is ready to buy, has forgotten where the button was — and leaves. In reports that looks like an ordinary exit, not a lost sale.
Fix 03 · Variant selection
The chosen option was hard to see
When the selected colour looks almost like the others, people add the wrong one.
Problem
The selected colour and volume differed from the rest by a thin grey outline. On a small screen, in daylight, it was easy to miss — and easy to add the wrong variant to the cart without noticing.
Solution
A clear selected state on every option: a solid dark ring and a check mark on the colour swatch, a filled high-contrast button with a check for volume, and the chosen value spelled out in the label — “Color: Slate”, “Volume: 32L”. Unavailable options are crossed out.
Why it matters for conversion
Fewer orders cancelled or returned because the wrong colour or size was picked by accident — and fewer “which one did I order?” emails to support.
Let's start
Want the same close look at your store?
The demo is live — open it on your phone and try the product page, then send me a link to your own site.