Rehan AliGet in touch
← All work

Maison Aurelle

A concept storefront for a luxury hair-oil brand, designed and built end to end. Shopping starts from the customer's problem, and a short diagnosis turns their answers into a personal routine.

Role
Design & development
Type
Concept store · self-initiated
Pages
Home, shop, concerns, product, diagnosis, checkout
Stack
Next.js 16, Tailwind v4, Motion, Zustand
Maison Aurelle product page with gallery, size options and add-to-bag

The brief

Most hair-oil stores list their products and leave the customer to guess which one they need. I set myself a brief to fix that: a store that starts from the problem, feels as considered as a printed brand book, and still checks out in a few taps on a phone.

It's a concept, so I played both roles — designer and developer — which is exactly the handover an agency does with me, just without the meeting.

Design system

Ivory#FAF7F2Page
Sand#E8DCCBSurfaces
Gold#B8925AAccents
Espresso#2B2420Text & buttons
Aa Aa
Manrope for prices, labels and every button — calm and easy to read at small sizes.
Cormorant Garamond · headingsManrope · interface

Shop by concern

Homepage grid of hair concerns
Homepage: pick the problem you recognise.
Concerns index page
Each concern explains the cause, then the ritual.

The diagnosis

Diagnosis question about hair texture
Six questions, under two minutes, no email required.
Diagnosis on a phone
Diagnosis on mobile
Product page on a phone
Product page on mobile

Key decisions

Shop by concern, not by productHair fall, frizz, dryness, dandruff and more each get their own page explaining the cause and the products that treat it. The customer starts with a problem they recognise instead of a list of bottles.
A diagnosis instead of a filterSix questions about hair type, scalp and lifestyle score every concern. The result is a three-step routine the customer can add to the bag in one tap.
The bag never takes you awayThe cart lives in a drawer and is saved to the browser, so browsing, comparing and adding never means leaving the page — or losing the bag on a refresh.
Checkout for how people payCash on delivery is the default, with a free-delivery threshold shown as progress in the bag. Card and wallet payments are marked as coming soon rather than faked.
Content in data filesProducts, concerns and quiz questions live in typed data files, separate from the components. Swapping placeholder copy for real content doesn't touch the design.

What's real

This is a concept, not a client. Photography is licensed stock from Pexels and Unsplash. Reviews, ratings and result claims are placeholder copy, and the checkout doesn't send orders anywhere. The design, the code and every interaction are mine.

Running an agency and need a build like this from your own designs? See how I work with agencies →

Contact

Have a project
in mind?

Tell me what you're making and when you need it — a rough idea is plenty to start with.

Click to copy · or open your mail app