Alkaltham
Skincare and haircare are considered before they're bought — people compare ingredient lists, read what a routine involves, and want to see a result before they trust a product with their skin. So the product page in Alkaltham was drawn to carry that decision instead of getting in its way: ingredients, how the product fits into a routine, and the result it's aiming for, given the same weight as the price and the add-to-cart button.
Everything upstream of that page was built to earn it fairly: categories organised the way people actually shop for skin and hair concerns, filtering that narrows rather than overwhelms, and a cart and checkout that stay out of the way once the decision is made. Every screen was drawn with real product content rather than placeholder text, and every interactive state — empty, loading, error — was designed on purpose rather than left for someone else to guess at.
What the design delivers
The decisions that carry this project.
The full story on one page
Ingredients, routine and results live together, not scattered.
Guided, not overwhelming
Dense detail is paced so the shopper stays with it.
Made to be understood
Each point sits where the question forms.
Built around the product page
Three pieces that carry a skincare and haircare decision from browse to checkout.
A product page that does the convincing
Ingredients, routine and result given equal weight to price and the add-to-cart button, drawn with real product content rather than placeholder text.
Every interactive state drawn
Empty carts, loading states, out-of-stock and error screens designed on purpose, not left for a developer to improvise.
A component library
Buttons, cards, filters and form fields built once and reused across the whole store, so new pages stay consistent as the catalogue grows.
Four stages, from shelf to screen
The product page is drawn last, once everything that leads to it is settled.
Discovery
I go through the product range, how ingredients and routines are usually explained, and how people browse for skincare and haircare online.
Wireframing
Layout and flow — category to product to cart — are worked out in low fidelity first, before any visual decisions are made.
Visual design
Colour, type and imagery are applied once the structure holds, with the product page carrying ingredients, routine and result as its main content.
Handover
Every screen and interactive state is delivered as a component library, ready for development without guesswork.
Project details
Building or rebuilding a store where the product page has to do the convincing? See the UI/UX Design service.
Before you brief a screen set like this
Why give the product page so much weight over the rest of the store?
What does "every interactive state drawn" actually cover?
Does this approach translate to other product categories?
Like what you see?
Tell me about your store and I’ll show you what it could look like.