Aesthetics clinic / skincare
Klinik Aruna
A clinic landing page that reads clean and calm, with a before/after slider anyone can operate and a page that opens almost instantly.
Both screenshots above are taken from the real page, not mocked up in a design tool.
The challenge
Patients pick a clinic on trust, not on discounts. That means the page has to feel calm and ordered. The opposite of a clinic site crowded with badges, oversized red text, and promises of instant results.
One constraint here is not negotiable: the page must never imply results that nobody can actually guarantee.
What was built
The mood is a full inversion of the restaurant demo: airy white, a quiet teal, rounded corners, and looser spacing between elements. Every card carries a soft shadow, so the page has depth without becoming busy.
The part that convinces patients most is the before-and-after comparison, so it was made interactive: drag to compare, and arrow keys work too for visitors who don’t use a mouse. Service cards wipe upward into view as you scroll, a short and smooth movement that keeps the clinical tone.
I am careful about claims here. Every testimonial and figure on the page is labelled as an example, and the page never presents itself as a clinic that actually exists. For a real client, that is where the clinic’s official details would go.
What it measures
This is the fastest of the four examples. Almost all of its movement runs without extra program code, so what a visitor has to download is essentially just the page and its images. The numbers are in the panel below.
How this page measures
Measured with the scoring tool already built into Google Chrome, so you can run it against this page yourself (it is called Lighthouse, under developer tools). Scores run 0 to 100, higher is better. The test is set up like a phone on a slow signal, not an office computer.
- Speed (Performance)
- 99 / 100How quickly the page appears and becomes usable. This is what decides whether a visitor waits or closes the tab before anything shows up.
- Accessibility (Accessibility)
- 100 / 100How usable this page is for people with disabilities. Through a screen reader, for instance, or with only a keyboard and no mouse at all.
- Search-engine readiness (SEO)
- 100 / 100How ready the page is to be read and understood by search engines. This is the groundwork; ranking on Google still takes content and time.
These come from measuring the current version of this page. They are not targets I was hoping for, and not estimates. Where I have not measured something, it says “not measured yet”.