Interactive Before-and-After Website Ideas for Beauty Brands

Search for advice on beauty websites and the same recommendation comes back from every direction: add a before-and-after slider, because it proves the product works. It is offered as a settled question — a widget to install, a conversion tactic, a way to give visitors tangible evidence.

It is also the single riskiest thing a beauty brand can put on a page, and the advice almost never mentions why. A before-and-after is not a design decision in this category. It is an assertion about what a product does, and it is judged as one.

What the first screen has to settle

Before any of that, a visitor is working out what they have found. Which category this is — colour, skincare, tools, a service — what the brand’s point of view is, what the product is for and who it is for, and how to buy or book. A beauty homepage that is purely atmospheric makes a visitor do that work themselves, and many will not.

The brands that do this most clearly tend to be the least decorative about it. The Ordinary’s homepage reads closer to a catalogue than a campaign — product names carry the active and its concentration — and nobody is confused about what they are looking at.

Why transformation sits at the centre — and where the line runs

Beauty is built on visible change, and several of those changes are completely uncontroversial to show. Bare to made-up. Plain to styled. One shade against another. A finish photographed under the same light. These are cosmetic changes in the literal sense: they alter appearance, immediately and temporarily, and a photograph of one is simply a photograph of what the product does.

Skincare is a different proposition, and the difference is not a matter of taste. Under US law a product is a cosmetic or a drug depending on its intended use, which is established by the claims made for it — in labelling, in advertising, on the internet, or in any other promotional material. Cosmetics beautify and alter appearance. Products intended to treat a condition, or to affect the structure or function of the body, are drugs, and a cosmetic that is marketed as doing those things is being sold as an unapproved one.

A pair of photographs is promotional material. If a before-and-after implies that a cream changed the skin rather than the way the skin looks, the image has made a structure-function claim without a word being written. This is not hypothetical: in 2014 L’Oréal settled FTC charges over claims that its Génifique and Youth Code lines boosted gene activity and produced younger-looking skin in seven days, and the order barred repeating them without competent and reliable scientific evidence.

The consequence is narrow and useful: the question is not whether to show transformation, but which transformation the business is entitled to show.

Ways to show change without overclaiming

Lead with application, not outcome. A product going on — the sweep, the blend, the finish arriving — is a demonstration of what it is. It shows change without asserting a result the brand would have to substantiate.

Compare shades and finishes rather than states. Swatch grids and shade tools are the workhorses of the category precisely because they answer the question most visitors have. What a colour looks like on skin is a fact about the product, not a claim about its power.

Let the language do the qualifying. The vocabulary that keeps cosmetic marketing on the right side of the line — the appearance of, the look of, visible — exists for a reason. Use it deliberately rather than accidentally.

Separate campaign work from evidence. A styled editorial image is not pretending to be documentation, and nobody reads it as such. Trouble starts when the two are presented in the same visual register.

Where interaction adds something useful

Two images on a page ask a visitor to compare. An interaction asks them to perform the comparison — to control where the change happens and how far it goes. That is a real difference: the difference appears in place, rather than having to be reconstructed across two frames.

In beauty there is a second, less obvious argument. A comparison the visitor drives is harder to stage: they choose the position, so both states have to hold up everywhere, not only at the two points the brand selected. A pair that works solely at the extremes falls apart once someone can stop halfway.

That is a claim about how the format behaves, not a promise about sales, and it does not suit everything. A skincare brand whose case rests on formulation is better served by its ingredient page, and a brand with forty SKUs should not turn its catalogue into forty widgets. The interaction earns its place at the top of a page, on the one thing chosen to represent the brand.

Example: Before → After

This is the idea behind RevealCraft’s Beauty experience. The page opens on the unmade-up state, and the visitor works across the portrait with a powder brush. The finished look arrives under their own hand — same face, same framing, same light — and settles as the completed image the rest of the page sits on.

See the RevealCraft Beauty Before → After experience→

The portrait in that demonstration is a demonstration. A brand would use its own model, product, artistry, typeface, palette and call to action. What carries over is the structure of the moment — and, in this category, the discipline that both states are the same person, framed and lit the same way.

How the concept adapts across beauty businesses

These are genuinely different situations and should not be treated as one:

• Makeup and colour cosmetics: bare to finished look. The most natural fit in the whole category — the change is real, immediate, visible, and nothing about it implies a claim that needs substantiating.
• Skincare: better used for application, texture, absorption and routine than for outcomes. Where results are shown, they need evidence behind them and language that stays on appearance.
• Beauty services: styling, colour, nails, lashes — closer to makeup, since the result is the service and the photograph is a record of work performed.
• Campaign work: plain to campaign look, framed as creative rather than as documentation, and visually distinct from anything that reads as proof.
• Clinical and medical aesthetics: a separate world with its own rules, not a harder version of skincare. In the UK, prescription-only medicines — Botox among them — cannot be advertised to the public at all, before-and-after imagery included. Anyone in this space should be taking advice specific to their jurisdiction and treatment, not borrowing conventions from cosmetics.

Keep the comparison believable

The UK advertising codes are unusually specific here, and the principles travel even where the rules do not. CAP’s guidance on before-and-after photos asks advertisers to hold signed and dated proof that images are genuine and unmanipulated, and to have evidence for the effect shown rather than treating the pictures as representative examples.

On retouching, the position is more nuanced than it is usually reported. Post-production is not prohibited, and a degree of glamour is expected in beauty imagery. What is not allowed is retouching that exaggerates what the product can do — which gives a clean working rule: never retouch the thing the product claims to affect. Removing wrinkles in a wrinkle-cream ad, or adding lash inserts in a mascara ad, is the specific failure. Retouching only the after image is another.

The rest is craft, and it is the same craft as any honest before-and-after: the same camera position, the same lens, the same light, a comparable expression, and no staging of the before to make it worse. Small print does not rescue a picture that has already made its impression.

Keep the rest of the hero simple

The comparison is a visual, not the whole message. It still needs a headline that names the product or the look, a line of copy that says what it is, one obvious call to action, and type that holds up over photography. On a phone it has to work under a thumb and fall back to a strong still image for anyone scrolling past.

Give it a keyboard route and a description too. A transformation that exists only inside a drag gesture does not exist for someone shopping without a mouse.

Have a visual transformation worth showing?

The brands that handle this well are not the ones that avoid showing change. They are the ones that are clear about which change they are showing, and let the picture claim exactly as much as they can stand behind.

RevealCraft can adapt the Before → After concept to your brand, your product and the site you already have.

Start a project→