±0.00Ground · Cover

Best Bottles

In progress. A commerce build for a large catalogue of about 2,300 products, not yet launched.

Write-upClient work · In progress

A storefront in progress for a catalogue of about 2,300 products and about 5,600 product images, being built so a buyer can find a bottle, build one that fits, or ask Grace. The pieces below are the ones that carry it: the Build Your Bottle configurator, product pages whose components come apart in an exploded view, and Grace, the AI concierge who answers with real catalogue products.

ProjectBest Bottles

ClientBest Bottles

DisciplineCommerce

SourceClient-provided catalogue figures

Across screens

Captured from best-bottles-website.vercel.app · 12 October 2026

Best Bottles website at a desktop viewport. — Desktop · 1440 × 1000

Best Bottles website at a mobile viewport, captured separately from desktop. — Mobile · 390 × 844

Select a screen to view the full-size capture. These are website captures, not photographs of physical devices.

L01Gallery

Product details & build studies

Selected design and build studies from the project. The current homepage captures appear above.

Best Bottles product page in exploded view: a 5 ml clear cylinder spray bottle with its matte silver cap, fine-mist fitment, 13-415 neck thread and body pulled apart and labelled with their specifications, beside a rail of cap options. — The product page in its exploded view. Every component is its own render, so cap, fitment, neck thread and body separate, each with its measurements.

Build Your Bottle, recorded on the build in progress: a bottle, then glass, fitment and cap, then the review. The sequence moves from bottle to components, then review.

Exploded view of a 9 ml amber fine-mist spray bottle: cap, fitment, neck thread and body separated, each labelled with its specification. — Product page, exploded view. Each component is its own render, so cap, fitment, neck thread and body come apart with their specs.

Exploded view of a 5 ml cobalt blue roll-on bottle: black dotted cap, metal roller-ball fitment, neck thread and body, each labelled. — The same exploded view on a cobalt roll-on: dotted cap, roller-ball fitment, 13-415 thread, body.

Best Bottles catalogue: a filter rail for bottle family, capacity and applicator beside three cylinder bottles in cobalt and clear, each with a row of cap colour swatches. — The catalogue. Filters by bottle family, capacity and applicator, and every product card carries its cap swatches.

Build Your Bottle at the glass step: five glass options with Amber selected, and a live preview of an amber 9 ml cylinder. — Build Your Bottle, step 2. The glass selection updates the amber bottle preview.

Build Your Bottle at the cap step: ten roller caps with Shiny Gold selected; the preview shows the amber bottle with a gold cap. — Step 4. A roller fitment chosen, then its cap. The cap selection is presented beside the bottle preview.

Build Your Bottle review: a checklist of bottle, glass, fitment, roller cap and neck beside the finished amber roll-on with a gold cap. — Step 5. “Everything fits.” The finished build, part by part.

Grace’s answer to “I need a 9 ml roll-on bottle”: a follow-up question and product cards for 9 ml roll-on bottles in amber, cobalt and clear. — Grace, the AI concierge, asked for “a 9 ml roll-on bottle”: she narrows the question and surfaces real catalogue products.

L02Survey

Survey

What we measured before designing: the starting state, the constraints, and the questions we asked.

CatalogueAbout 2,300 products, each needing a page that people can find, compare and buy from.

ImageryAbout 5,600 product images to organise, present and keep consistent across the catalogue.

Open the build preview (new tab)

Planning something similar?

Tell us what your customers need to do and what is getting in the way.

Discuss your project