Concept project · Website with an online skin consultation
A cosmetology clinic website with a skin consultation and therapist booking
Vellum · Institute of Cosmetology is a Primessio concept project: a three-language website for a cosmetology clinic that starts with an online skin consultation, shows a treatment plan with the course price and hands it straight to booking with the chosen therapist. The brand, people and data are fictional; the technology, design and process are what we deliver for clients.
A Primessio showcase for beauty and cosmetology: visual design, content in three languages, a skin consultation, booking with live costs, skincare memberships and a WebGL hero — built with Astro and verified by automated tests using real clicks, on the live site too.
Primessio (ACTIVE IT) is a software house based in Warsaw: websites and online stores, custom software and IT systems, SEO and AI SEO, social media and content, branding and project management — for clients in Poland and the DACH region. Below is one of our projects.
Live site
A working demo at vellum.primessio.com — the consultation, booking, memberships and the WebGL portrait transition are interactive; the data is fictional and never sent anywhere. · Open the site in a new window ↗
Challenge
Clients of a cosmetology clinic rarely know which treatment they need — they know what they want to improve. Typical websites still show a price list of technology names, and how many visits are needed and what the whole course costs only becomes clear at the clinic. That holds back the first visit and makes courses and memberships harder to sell.
Then there are the industry's rules: treatments must stay within a cosmetologist's competence, results can't be promised and before-and-after images need honest labelling. At the same time the site has to look modern and run smoothly on a phone.
Solution
A website built around the question “what would you like to improve?”. Choosing a skin concern filters the treatments, and every treatment has a “what it is, how it works, afterwards” description, duration, number of visits and course price. The online skin consultation (7 questions) builds a plan — main treatment, support, intervals and cost — with a clear note that it is an initial consultation, not a medical diagnosis.
The plan moves to booking in one click, across four steps: therapist (with her skills and working days), treatment or a discounted course, a slot within opening hours, and details with validation — with a live cost summary and a calendar file. Skincare memberships offer monthly or yearly payment and a plan comparison.
What we delivered
Visual design
A “clinical chic” direction after a UX audit: Instrument Serif + Geist type, layouts on a design canvas and revisions before code.
Content EN · PL · DE
Transcreation with localised URLs (skin-consultation / diagnoza / hautanalyse) and a description of every treatment.
Skin consultation
Seven questions, a plan calculated in the browser (nothing is sent), logic covered by unit tests.
Therapist booking
Four steps, slots within working hours, discounted courses, inline validation and an .ics file.
Memberships
Three plans, monthly or yearly payment, a comparison table and a demo-mode summary.
WebGL hero
A silk-like transition between two portraits (OGL, 16 KB gzip) with a fallback image without WebGL or with reduced motion.
SEO / AEO and accessibility
hreflang, BeautySalon and FAQPage structured data, llms.txt; WCAG AA contrast and ≥ 44 px touch targets checked automatically.
Testing and launch
Real-click tests, a WebGL test, a quality audit and a deploy script that checks the live site.
On-site assistant
A conversation with suggested replies and free-text questions in EN/PL/DE: answers from the site's content, refers medical questions to a consultation and guides the booking step by step — no AI model, no data sent.
By the numbers
A concept project has no sales figures — these are verifiable facts from the repository and from tests on the live site.
How we worked
From a design audit to a live site — with the look approved before code, an independent code review and tests that measure what clients actually see.
Direction
Industry research, style choice and an audit of the design for appeal and accessibility.
Design
Four screens on a design canvas, photos swapped for natural portraits — before any code.
Build
Astro, Preact islands, a WebGL scene, content in three languages and treatments within a cosmetologist's competence.
Testing and review
Click tests, a WebGL test and a quality audit; an independent code review and fixes backed by regression tests.
Launch
Upload over FTPS and an automatic check of the URLs and the full test suite on the live site.
Technology
A static Astro site with small interactive islands and one lightweight WebGL scene: fast loading, simple hosting and no database. The consultation runs in the browser, animations respect reduced motion, and without WebGL the portraits cross-fade with plain CSS.
- Astro 7
- Preact
- TypeScript
- WebGL (OGL)
- Rule-based assistant
- GSAP
- Lenis
- View Transitions
- WebP
- Schema.org
- hreflang
- WCAG AA
- Playwright
- EN · PL · DE
Frequently asked questions
Is this a real clinic's website?
No. Vellum · Institute of Cosmetology is a Primessio concept project — the brand, therapists, prices, address and reviews are fictional, and the forms send nothing. The technology, design and way of working are the same as in our client projects.
Is the online consultation a medical diagnosis?
No, and the site says so plainly: it is an initial consultation that organises needs and shows an indicative plan. At the first visit the therapist examines the skin and confirms or adjusts the plan. The result is calculated in the browser — no data is sent.
Can the booking be connected to the clinic's system?
Yes. The booking flow is the interface: in a live build, slots come from the clinic's booking system and membership payments go through a payment provider. The logic for therapists, courses and prices stays the same.
Is the on-site assistant AI?
No. It is a rule-based assistant: it recognises questions by keywords in three languages, answers only with the site's content and runs the booking by the same rules as the form. It sends no data and gives no medical advice. In a live build the same conversation can be connected to a language model.
Doesn't WebGL slow the site down?
The scene loads only when the hero is visible, weighs 16 KB compressed and pauses off-screen. The photo is visible from the first frame, and with reduced motion or no WebGL the site shows regular photos.
How do you keep beauty content honest?
Treatments stay within a cosmetologist's competence, descriptions don't promise results, the before-and-after comparison is labelled as a simulation and reviews as samples. We apply the same rules for clients in health and beauty.
Related services and projects
Do you run a cosmetology clinic, beauty salon or aesthetic clinic?
We design and build websites that take clients from a skin concern to a treatment plan and a booking — in several languages, with prices visible from the start.
Let's talk