Case study · eCommerce & retail
A storefront that recommends, instead of listing everything
Universkin sells skincare that is matched to the person buying it. A conventional product grid works against that. We built a store where the customer answers for their own skin first, and the catalogue narrows to what suits them.
Engagement · Design & build
A direct-to-consumer storefront built around guided selection.
- Industry
- eCommerce & retail
- Solution
- Personalised skincare storefront
- Engagement model
- Product team
- Market stage
- Direct-to-consumer launch
- Client
- Universkin
- Scope
- Design, build & commerce
- Platform
- Web · mobile web
- Focus
- Guided selection & checkout
Outcomes
What a guided storefront is measured on
Not traffic — whether someone who arrives unsure leaves with the right product in their basket.
-
52%
Increase in conversion rate
Customers who are guided to a product buy it. A grid asks an unsure visitor to make an expert decision on their own, and most of them leave instead.
Guided path compared with catalogue browsing
-
38%
Fewer returns
A matched product is the right product. The most expensive outcome in skincare is not a lost sale — it is a wrong purchase and the customer who never comes back.
Measured across orders placed through the guided flow
-
30%
Higher average order value
A recommendation that explains itself gives the customer confidence to buy the full routine rather than testing one item and waiting.
Measured across orders placed through the guided flow
Context
The situation before the storefront
Why a personalised product needs a different kind of shop.
The business
Universkin sells skincare matched to the individual rather than sold from a shelf, where the right product depends on the person buying it.
The starting point
A conventional product grid works for a brand with ten products and a customer who already knows what they want. It works against a range where the correct choice is different for every visitor.
The trigger
A customer who guesses wrong does not simply return the product — they conclude the brand did not work for them and do not come back. Wrong purchases are more expensive than lost ones.
What they wanted
A short, guided path where the customer describes their skin and concerns, and the store responds with a small, explained selection rather than everything it stocks.
Constraints
A guided flow that stalls loses the sale on the first step · every recommendation has to explain itself · mobile first, because that is where the traffic arrives · the customer's answers must survive into the basket and the order.
System
What it runs at today
The storefront as delivered.
-
2
Paths into the catalogue
Guided selection for new customers, direct browsing for those who know what they want
-
1
Selection state
Carried from first question through basket to order record
-
100%
Responsive
Designed for a phone first and widened to desktop, not the other way round
-
0
Developer involvement for copy changes
Ranges, copy and recommendation rules editable by the brand
The engineering problem
Four problems in selling something personal
Guided commerce fails in specific, predictable ways. These are the four we designed against.
-
Every extra question costs customers
A questionnaire that improves the recommendation also loses people who will not finish it. More questions make a better match for those who complete, and no match at all for those who leave.
What we did
The fewest questions that actually change the answer, each plainly worded, with the remaining steps visible so a customer knows the flow is finite.
-
A recommendation without a reason is just an assertion
Being told "this one is right for you" invites the question "why?" — and if the store cannot answer, the customer opens a search engine and the sale happens somewhere else.
What we did
Every recommendation is shown with the reasoning behind it, connected to what the customer actually said about their skin.
-
Personalisation is lost at every handover
The customer answers questions, browses, adds to basket, checks out. Each step is a chance for the selection context to be dropped, and it usually is — leaving fulfilment with an order and no idea why it was chosen.
What we did
Selection state held as first-class data from the first question through to the order record, rather than as a parameter passed between pages.
-
Considered purchases still happen on a phone
Skincare is researched carefully and bought on a phone between other things. A layout designed for a desktop and shrunk down loses exactly the customers who were ready to buy.
What we did
Designed for a thumb on a phone first, then widened, with checkout tested on real devices rather than a narrow browser window.
Architecture
How it fits together
Simplified — the shape of the system rather than every service in it.
-
Storefront
- Responsive web
- Guided selection flow
- Design system
A responsive storefront with the guided flow as a first-class part of the product rather than a marketing page bolted onto a shop.
-
Commerce
- Catalogue & variants
- Basket
- Checkout
- Order management
Conventional commerce services, with the selection context attached to the basket and carried into the order.
-
Personalisation
- Question flow
- Recommendation rules
- Reasoning content
The matching logic held as editable rules rather than code, so the brand can change how products are matched without a release.
-
Content & data
- Editable product content
- Analytics
- Order records
Product copy and recommendation reasoning editable by the brand; analytics on where customers stop, which is what the flow is tuned against.
The important decision was treating the customer's answers as data that belongs to the order, not as a temporary state in the browser. Everything downstream — fulfilment, support, repeat purchase — depends on still knowing why a product was chosen.
Solutions
The parts of a store that does the thinking
Personalised commerce is mostly a content and state problem: capturing what the customer told you, and making sure nothing downstream forgets it.
-
Guided selection
A short sequence of questions about skin type and concerns, designed to be finished rather than abandoned, with progress always visible and nothing asked twice.
-
Curated results
A narrowed selection with the reason for each recommendation shown next to it, so the customer understands the logic instead of being told to trust it.
-
Product and basket
Product pages written for a considered purchase — ingredients, use and suitability — with the customer's selection carried into the basket intact.
-
Checkout
A short checkout with address and payment handled cleanly on a phone, and the personalisation attached to the order for fulfilment.
-
Mobile-first interface
Designed for a thumb on a phone first and widened to desktop, rather than a desktop layout squeezed down.
-
Content and merchandising
A structure the brand can update — ranges, copy and recommendation logic — without a developer for every change.
Key capabilities
What it does day to day
Five capabilities, each closing one of the gaps above.
| Capability | Runs | Refresh | What it does |
|---|---|---|---|
| Guided selection | Customer | On demand | A short sequence about skin type and concerns, designed to be finished rather than abandoned |
| Explained recommendations | Automatic | Per answer set | A narrowed selection with the reason for each product shown beside it |
| Product & basket | Customer | Real time | Product pages for a considered purchase, with the selection carried into the basket |
| Checkout | Customer | On submit | Short checkout with address and payment handled cleanly on a phone |
| Content management | Brand | On publish | Ranges, copy and recommendation rules changed without a developer |
Integrations
How the moving parts plug in
The customer's answers, the catalogue and the order all resolve against the same services.
Customer input
- Guided questionsSkin type and concerns
- BrowsingFor customers who already know
- Basket actionsAdd, change, remove
Commerce layer
- Recommendation rulesAnswers matched to products
- Catalogue & pricingOne source for both paths
- Selection stateAttached to the basket
Order & fulfilment
- Order record
- Payment
- Selection context
- Fulfilment
Because the selection context lands on the order, support can answer "why was I sent this?" months later without guessing, and the brand can see which answers lead to which purchases.
Security & data
What protects customer data at checkout
The store holds personal details and answers about someone's skin, which is health-adjacent information and treated accordingly.
-
Payment handling
Card details go to the payment provider and are never stored by the storefront.
-
Personal answers
What a customer says about their skin is attached to their order, not exposed in URLs or shared with third-party scripts.
-
Checkout integrity
Prices and availability are confirmed server-side at checkout, so what is charged matches what was shown.
-
Data minimisation
The flow asks only what changes the recommendation, which is also the smallest amount of personal data worth holding.
The brief
A catalogue is the wrong shape for a personalised product
Most skincare stores show a grid and let the customer work it out. That suits a brand with ten products and a customer who already knows what they want. It does not suit a range where the right choice depends on the individual, and where the wrong choice means a refund and a lost customer.
Universkin needed the opposite: a short, guided path where the customer describes their skin and concerns, and the store responds with a small, explained selection rather than everything it stocks.
- Guided selection before catalogue browsing
- A short, explained shortlist instead of a long grid
- Product pages that justify the recommendation
- Checkout that does not lose the personalisation
What the store had to get right
- 01Speed: a guided flow that stalls loses the sale on the first step
- 02Clarity: every recommendation has to explain itself
- 03Mobile first, because that is where the traffic arrives
- 04The customer's answers have to survive into the basket and the order
Process
Designed around one question: does this person know what to buy?
Every decision was tested against whether it moved a customer closer to a confident purchase, or added another thing to read.
-
Understanding the range
We worked through the product range and how the brand itself matches products to people, then turned that into rules the store could apply.
-
Designing the guided flow
The questions had to be few, plainly worded and clearly finite. We designed the flow so a customer can always see how much is left.
-
Building the storefront
A responsive storefront with the selection state held reliably from the first question through to the order record.
-
Checkout and payments
Payment and address flows kept short, tested on real phones, with failure states that explain themselves.
-
Launch and refinement
Post-launch work on copy, step order and the wording of recommendations — the details that decide whether someone finishes.
Technology
A storefront built for a considered purchase
A responsive commerce front end with the guided logic, the catalogue and the order record kept consistent.
Storefront
- Responsive web store
- Guided selection flow
- Design system
Commerce
- Catalogue and variants
- Basket and checkout
- Order management
Payments
- Card payments
- Address validation
- Order confirmation
Content
- Editable product content
- Recommendation rules
- Analytics
Business impact
What changed for the brand
Three things that followed from leading with guidance rather than a grid.
-
Better-matched purchases
Customers arrive unsure and leave with something chosen for them, which is the whole premise of the product.
-
A store the brand can run
Ranges, copy and matching rules change without a release, so merchandising stops waiting on developers.
-
Built where the traffic is
Phone-first design means the majority of visitors get the intended experience rather than a compressed one.
The result
Customers arrive unsure and leave with the right product
The store leads with a short guided flow rather than a catalogue, explains each recommendation, and carries the customer's answers all the way into the order.
It works on a phone first, which is where most of the traffic arrives, and the brand can change the range and the copy without a release.
- Guided selection replacing an undifferentiated product grid
- Recommendations shown with their reasoning
- Personalisation preserved from first question to order
- Mobile-first storefront the brand can maintain
What we would do again on personalised commerce
- 01Ask the fewest questions that still change the answer
- 02Always show why a product was recommended
- 03Carry the customer's answers into the order record
- 04Design the phone version first, not last
Verified reviews
What clients say about our web development work
Verified reviews from clients of ours on similar work, published on Clutch. They are not from this project.
-
Web Development
Custom Web Development for a Software Solutions Company
We can rely on them to handle almost any task with confidence, as they consistently deliver good results.
Casper Hougaard Jensen
CEO & Co-Founder, Iterator IT Jul 2021 – Sep 2022
-
Web Development
Web & Mobile App Development for a Software Development Company
They efficiently organized tasks and deliverables while promptly addressing questions.
Damien Retzinger
Founder, Graycore Jun 2021 – Feb 2023
-
Web Development
Website Development for a Software Engineering Company
They have a broad understanding of different technologies.
Eugene Bosikov CEO, Ezibeline LLC Mar 2022 – Ongoing Verified review on Clutch (Eugene Bosikov, opens in a new tab)
Free discovery call
Have an idea? Let's turn it into AI-powered software.
Book a free discovery call with our experts. Share your idea and we will help you shape the scope, timeline and budget, under NDA.
- Free consultation
- NDA before we talk
- Transparent estimate