Project 03 · E-commerce
Editorial enough for the brand. Legible enough for everyone.
Vero Moda was running on a Shopify template. The brief was to make it feel like the editorial, image-led sites the client benchmarked against, built to project the brand as premium womenswear. Those sites look extraordinary. They are also, almost without exception, some of the least accessible commerce on the web. The job was to get the first thing without inheriting the second.
A template can't carry a brand this considered.
What I worked on
The core problem
Premium is not the same as unreadable
The house style has a cost, and it's usually paid by the user.
The luxury e-commerce look leans on the same handful of moves: hairline type in light grey, unlabelled icons, controls that only appear on hover, state carried by colour alone, tap targets sized for a mouse. Every one of them reads as restraint. Every one of them also fails a contrast check or a screen reader.
I took the restraint and rebuilt the mechanics underneath it. Nothing on this site signals state with colour on its own, no control is icon-only without a text label nearby, and every interactive element is sized for a thumb. The look didn't have to give anything up for that.
Navigation & listing
Four taps to anything in the catalogue
The mega menu splits into New Collection, Trending, Collections and All Products, so campaign-led browsing and category-led browsing sit side by side instead of competing. Two editorial images anchor the top; everything below is a plain text list, which is faster to scan and far easier to read out.
The listing alternates single and paired tiles so the grid breathes like a lookbook rather than a spreadsheet. Discounts appear as a struck price and a percentage in text, so the saving never depends on noticing a colour. Bestseller is a word, not a badge colour.
Product page
Say it in words, not just in styling
Where most fashion PDPs quietly fail.
Sold-out sizes are struck through with a diagonal rule rather than greyed out, so the state survives without colour vision. Low stock is written as "3 left". The selected colour is named in text above the swatches, not left to the swatch alone. Fit guidance states the model's height and the size worn.
Everything below the fold, description, shipping, returns, store availability, sits in expanders with generous hit areas, so the page reads as a short editorial block first and a spec sheet only if you ask for one.
Add to cart
Buy without leaving the grid
On desktop, adding to cart opens a drawer beside the listing rather than a new page. You keep the row you were scanning, pick colour and size, and carry on. The primary action is a full-width black bar with an underlined label, which reads as a button whether or not colour renders.
The same pattern carries to mobile as a bottom sheet with the same order of decisions, so a shopper moving between phone and desktop never has to relearn the flow.
