Serai Skin Studio: how a JB beauty salon turns "anywhere good nearby?" into a booking

seraiskin.my

The Serai concept demo: a cream page, loud orange type, and one hand-written word. Under the fold, the very next thing is the full price list, because that's the question every salon visitor is actually carrying.

Picture the visitor: she's in Taman Molek or Bukit Indah, she's typed "facial JB" into Google, and she has four tabs open. Every salon promises glowing skin. What she's really afraid of is the thing no one writes on their site: lying on the bed with a mask on while someone talks her into a RM 3,000 package. The homepage wins by answering that fear before she has to raise it.

01Why is the price list the second thing on the page?

Because price is the first question and the hardest one to ask. Most salon sites hide it behind "WhatsApp us for pricing", which to a first-time visitor reads as "it depends on how much you look like you can pay". Serai puts fifteen treatments with duration and price in three groups (facials, brows and lashes, waxing and body) directly under the hero, and heads it "Full price list, no surprises". The line under it does the real work: every price includes the consultation and the aftercare talk; what you read here is what you pay at the counter.

The order was a deliberate change. The first draft had the price list halfway down, after the trust strip and the signature treatments. Moving it up meant the navigation had to change too, Prices now comes before Treatments in the menu, so the menu order matches the scroll order. A menu that jumps you backwards and forwards feels like a site that doesn't know what it wants you to read.

02Are you open right now? The page answers that live

A weekly timetable makes the visitor do maths: what day is it, what time is it, is today the odd one. Serai's hours block does the maths for her. It reads the visitor's clock and shows one line ("Open now, until 20:00", "Opens today at 10:00", or "Closed now, opens tomorrow") above the full week, with today's row highlighted. Tuesday is the closed day, and it says so in words, plus a line that public holidays are announced on Instagram. The logic was checked against nine edge-case times, because a live status that is wrong once is worse than no status at all.

03What does a JB salon need that a KL one doesn't?

Singapore customers. A real share of JB beauty bookings cross the causeway, and they think in SGD. So under the price list sits one plain sentence: RM 188 is roughly SGD 56; we are 15 minutes from JB CIQ and parking is free. Three facts, and each one answers a question a Singaporean would otherwise have to go and look up. One of the three reviews is from a Singapore regular who crosses every six weeks for lashes: the right review to show the right visitor.

The rest is Malaysian basics that overseas templates always miss. Waze sits next to Google Maps, because more drivers here open Waze. The address line says "look for the orange door", because a shoplot row all looks the same from the road. The footer lists DuitNow QR, Touch 'n Go, GrabPay and FPX before the card logos. Every treatment name carries its Chinese name on a second line (Hydra Glow Facial, Misty Brow Embroidery and the rest) because that's how a lot of JB customers search and ask.

04A first-visit price that promises less, not more

The offer block is RM 88 for the Hydra Glow Facial, usually RM 188. Every salon has a trial price; what makes this one work is the sentence after it: seventy-five minutes, full consultation, and no package signing at the end. The discount gets her curious. The "no package" line is what gets her to actually book, because it names the exact thing she was worried about and takes it off the table.

Packages still exist (six facials for RM 998, a member card, lash refills) but they sit in a quieter card headed "If you come back". The order is the message: try us first, then decide. The brand story says the same thing in its own words ("nobody will push a package on you while you are lying down"), and the trust strip repeats it once more as Price on the wall. One promise, said in three places, is what makes a small salon believable.

05Why the phone carousels have a pause button

On a phone, fifteen prices and four signature cards would be a very long scroll. So below 768px both become swipeable carousels that advance every three seconds, with each card bleeding off the edge so the next one peeks in. That auto-advance is also a problem: a customer reading the lash prices gets the card pulled away mid-sentence. That's why a pause button sits next to the dots, not as decoration, but because moving content that starts by itself needs a way to stop it (WCAG 2.2.2).

It also stops on its own when it should: when a finger touches it (and resumes six seconds later), when the section scrolls off screen, when the tab goes to the background, and entirely if the phone has reduced motion turned on. The WhatsApp button changes shape on the phone too, from a small round icon that disappeared into the hero photo, to a full-width bar with the words "Book on WhatsApp" on it, with room left at the bottom of the page so it never covers the last line.

06Why a loud orange instead of beige and gold

Beige, brass and espresso is the most common beauty-salon palette there is. It looks calm, and it also looks like every other salon in the four tabs she has open. The owner's reference was a bright, playful studio, so Serai goes the other way: a warm cream background #FBF3E1, one orange #F4561E, a peach pink #EC6E8C, and no cool colours anywhere, even the neutrals are warm. Headlines are Archivo Black in capitals; one hand-written font, Caveat, is used just five times on the whole page, so it stays a signature rather than a theme.

Bright orange is where accessibility bites. On the cream it measures about 3.1:1, and white text on it about 3.4:1, both fine for big headlines, both failing for a button label. So the bright orange only ever fills shapes and sets large type; every button and chip uses a deeper orange #A63009, where white text clears 6.9:1. The panels that are orange carry dark ink body text (4.9:1) instead of white. The pink got the same treatment: the brand pink is only 2.7:1 on cream, so the hand-written words use a darker #D94A6E that passes for large text.

The blobs, sparkles, flowers and wavy lines are all inline SVG, not images: six shapes defined once and reused everywhere, coloured by the theme. They stay sharp at any zoom and add nothing to the download. The photos are a different story, and it's worth being plain about it: every photo and every customer face on the demo is AI-generated, and the reviews, the 4.8 rating and the address are placeholders. Each image slot is marked for replacement, and customer photos only go live with written permission from real clients.