Luxury E‑Commerce Redesign: Product Navigation
B2C · E-Commerce · Information Architecture
Milk & Rose, LLC — Luxury Fine Jewelry Retailer
Reorganizing hundreds of jewelry pieces on web and mobile into a new taxonomy built around how customers shop.
Role
UX Designer — research, information architecture, UI
Duration
Sep 2021 – Oct 2023
Scope
300+ products · Desktop and mobile · Two new product lines
Team
Founder · Photographer · Content journalist
The rebuild in one film: the original homepage becomes the new store, the flat Earrings category opens into styles, and a pair of hoops goes from the results to the cart. Rebuilt from the live store; counts are the store as it launched.
The Problem
Over three hundred pieces of jewelry, four pages to put them on.
Milk & Rose had grown faster than its store. Every piece lived under one of four headings — rings, earrings, necklaces, bracelets — so a single page could carry more than a hundred items in no particular order. Around them sat three years of edits: links that went nowhere, images that failed to load, product details that disagreed with each other. Redesigning that flow was my first project on the team.
300+
Products
Across four categories and a growing set of collections
100+
On one page
A single category ran past a hundred pieces, unsorted and unfiltered
~0
Search use
The store had a search bar. Backend data showed customers almost never used it.
The original site map. Red marks a broken link or an image that failed to load; the circled row is the part that had to change first.
Sort by style, not by keyword.
I rebuilt the architecture around the words customers already used. Inside each category the pieces are grouped by style rather than by type. What held it together was a ceiling rather than a taxonomy: no page shows more than fifteen pieces.
The new site map: style subcategories under Milk & Rose, and no more than fifteen items on a page.
Design Process
Three decisions, shown on the store before and after.
Each pair is one change. The after screens are the store as it went live at themilkandrose.com. The before screens are the original homepage, rebuilt from the old site, and the original four-category structure, drawn in the new store’s styling so the structure is the only difference.
Before
After
The landing page, first screen. Nothing of the original below the four tiles survives, so the comparison stops at the fold.
01 · Navigation
Name what people shop for, not how the company is organised.
Before
The top bar listed sub-brands and policy pages: Milk & Rose, Milkman Atelier, Milk & Body, Milk & Pearl, Impact & Care, Returns & Exchanges. To find a pair of earrings you first had to know which brand made it.
After
The first layer names what people come to buy: New Arrivals, Essentials, Handmade, Men’s, All Jewelry. Milkman Atelier is still there, as Men’s. The policy pages left the top bar.
Why. Search was almost never used, so this bar was the main way into the catalogue. Its labels had to be the words people shop with.
Before
After
02 · Structure
Add a style layer under each category.
Before
Four flat categories. Earrings alone was 186 products.
After
Essentials › Earrings opens into eight styles: Singles, Asymmetrical Pair, Chunky, Cuffs, Dainty Hoop, Drippy, Drop, Gem. The menu shows both levels at once, so the shape of the catalogue is visible before the first click.
Why. Customers described jewelry by shape and feel. The styles use those words.
Before
After
03 · Results
Keep the page you land on under fifteen pieces.
Before
Choosing Earrings opened all 186 pieces on one page.
After
Choosing Dainty Hoop opens 12. Filter and Sort stayed for anyone who wants to narrow further.
Why. A page you can see whole is a page you can choose from without typing.
Before · 186 products
After · 12 products
Counts are the store as it launched. It has kept growing since.
The Insight
The search bar was already there. The data said nobody used it.
That looks like a broken search box, and it was not. Typing is a step, and it asks you to name what you want before you have seen it — which is not how anyone shops for jewelry. Customers came to look. They described what they were after by shape and feel: something chunky, something vintage, something plain enough to wear every day. So the answer was never a better search field. It was an architecture that lets people recognise a piece instead of naming it.
01
Typing is a step customers will not take.
02
People describe jewelry by style, not by product name.
03
So the categories had to speak in styles: classic, geometrical, chunky.
The landing page and the row of styles that now sits where search used to be — pick the shape first, then the pieces inside it.
In the Field
A flea market showed us who else was buying.
In June 2022 the team took the collection to the Chelsea Flea Market. The customers who stopped were not the ones the store had been written for: men, buying for themselves, asking for chains and signet rings. Milkman Atelier came out of that weekend — its own line, its own entrance and its own photography, inside the same architecture.
Milkman Atelier — a separate entrance for the men’s line, opening onto its own grid of rings, bracelets and chains.
The System
Four lines, a style layer, and a ceiling of fifteen.
The lines split the catalogue by who it is for, and the styles inside them by what it looks like. Every piece gets one obvious address, and a new piece always has somewhere to go.
One rule did the work: no page shows more than fifteen pieces. When a category grows past that it earns a subcategory, not a longer scroll.
01
Milk & Rose
Everyday fine jewelry for women — the original line.
02
Milk & Pearl
Pearls, including the Grandma’s Pearls collection.
03
Milkman Atelier
Men’s fine jewelry and design studio.
04
Milk & Body
Body and care products, alongside the jewelry.
Styles
Under each category
Earrings alone has eight, from Singles and Cuffs to Dainty Hoop.
Navigation
Why a row of styles?
Because you recognise a shape before you can name it.
The menu carries every line and its subcategories, so the whole catalogue sits two clicks from anywhere. On the landing page a carousel of styles runs above the products: you scroll it, you see the shape you want, you press Discover. The left rail keeps collections, best sellers and new arrivals one click away. The search bar stayed for the customers who do type — it is simply no longer the only way in.
<15
Pieces per page
Down from more than a hundred on the original category pages
Mobile
01 · Lo-fi flows
Five screens and one question: can you get from the splash to a product without typing?
↓
02 · Style browsing
The carousel became a swipe. Each style previews a single piece, so the choice is made on a picture rather than a word.
↓
03 · Product to purchase
Reviews, materials and measurements on the product page, then a five-step checkout that names every step up front.
↓
04 · The shipped store
Two entrances on the home screen, one per line, then the same style-first path as the desktop store.
Result
Live, and finally navigable.
The rebuilt store went live at themilkandrose.com. Four long pages became categories with a style layer under each and nothing longer than fifteen pieces, and the broken links and mismatched product details went out with them. The navigation questions that used to arrive through customer service dropped off after the relaunch — the team’s own read, not a tracked metric.
+30%
Product discovery
After the style-first navigation went live
−16%
Checkout abandonment
Down after the relaunch
4
Product lines
Two of them created during the project: Milk & Pearl and Milkman Atelier
What I Learned
Three things I took from it.
01
Test before you are sure, not after. The architecture was rebuilt on backend behaviour and my reading of it. Putting five customers in front of the old store first would have found the same answer sooner, and given me something to quote.
02
A store is a business before it is an interface. Some of the structure exists because the founder needed a line to sell, not because a customer asked for it. Knowing where to hold the user’s side and where to give was most of the job.
03
Draw what can be built, or it will not ship. Working the constraints out with the developers early is why the architecture that survived the handoff is the one I drew.
© 2026 Sam Wang