Tanvir.
All work

Healthcare · Website Redesign

ZO Skin Centre

One website for four skin clinics

The ZO Skin Centre redesign on a soft lavender field: the desktop homepage with its facial-treatment hero and location cards, beside the Beverly Hills location page on a phone
Role
Lead Product & UX Designer
Scope
UX strategy · IA · UI · Design system · Prototyping
Read
3 min

01/The project

Four clinics, one website

ZO Skin Centre runs four skincare clinics in Southern California, in Beverly Hills, Laguna Beach, Newport Beach and Pasadena, as part of ZO Skin Health. People come to the site to find a treatment, check who performs it, see results and ask for a consultation.

The hard part was that each clinic had its own website. As Lead Product & UX Designer, I owned the structure, visual direction, design system and every page for desktop and phone, through to handoff. The screens here are the final designs from my Figma file.

  • 01Lead Product & UX Designer
  • 024 clinics, 1 site
  • 03Responsive web

02/At a glance

Where people land now

The old main page, and the homepage that replaced it.

From signpost to homepageThe old page could only send you to one of four sites. The new one lets you start from a treatment, a practitioner or a result.

03/Four websites

Four websites selling the same treatments

The old main page was a fork in the road: four addresses, four buttons, nothing else. Each clinic was a whole website, with its own navigation, service pages, practitioners and reviews, even though most of the services were the same everywhere.

That had real costs for patients. Comparing two clinics meant going back and starting again. A practitioner who worked at more than one clinic was filed under just one of them. And the design had drifted away from the ZO Skin Health brand, so the centre read like a different company.

04/The structure

First, what connects to what

Before drawing any pages, I worked out with the client how treatments, clinics, practitioners and results relate. A service knows where it's offered, a practitioner knows where they work, and a result links to both. Most of the page decisions followed from that.

One site instead of fourRedrawn from the old site and the new structure. Clinics stop being sites and become a setting and a filter.

05/One front door

Choosing a clinic stopped being step one

  • Pick once, change any time. Your clinic is saved and shown at the top of every page, instead of being a site you get sent off to.
  • Browse first, choose later. Treatments and practitioners aren't locked inside a clinic, so people can start from what they want done.
Clinic in the headerSaved once and shown on every page, so you always know which clinic you're browsing.
Clinic as a filterEach service lists every clinic that offers it, yours in bold, and the clinic is one filter beside the categories.
A site became a pageTreatments, the practitioner, results and reviews, inside the shared site instead of a site of its own.

06/Proof

Proof next to the decision

That freed everything else to link up. Someone researching a treatment wants to know who performs it, what the results look like and where it's offered. The old sites kept those answers in different places, so I put them on one path.

One result, four linksProcedures, practitioner and clinic are all named, with the form right below, so a convincing result leads straight to asking.
Results by clinicThe clinic is one filter among treatment, age and gender, instead of a separate gallery on every site.
Every clinic they work atThe old sites filed a practitioner under one clinic. Now the profile lists every clinic they work at, with the map.

07/Booking

A shorter route to a consultation

  • The form comes to the treatment. On a treatment page the consultation form sits right beside it, with the service already chosen.
  • Made for the phone too. On mobile the form is one column, and the confirmation says what happens next.
Booking from a treatmentThe treatment is already filled in, so it's four fields and a button. The details here are sample data.
On a phoneThe confirmation says they'll be in touch within 24 hours, so nobody wonders if it went through. Sample details.
Book before the long readThe button comes right after the summary, so people who've decided needn't scroll past the details.

08/The system

Back to the ZO Skin Health look

The centre had drifted from its parent brand, so the visual direction started there: ZO blue, the wordmark and real treatment photography, with very little decoration around them.

What the brand didn't have were the pieces a clinic site needs. I built those as one set: a clinic card with address and hours, a service card that lists where it's offered, a before-and-after card, a practitioner card, and one consultation form for every page that leads to a booking.

From wireframe to finalThe homepage in low fidelity, where the order of clinics, treatments and results was settled, then the final page on the same layout.
The shared cardsEach one is reused across the site, so a clinic, a treatment or a result looks the same wherever it turns up.

09/Outcome

Handed over as one site

Every page went to development for desktop and phone, with a Figma prototype linking the main journeys. I don't have numbers from after handoff.

The decision I'd watch most is the saved clinic. It saves regulars a step, but someone new might not notice which clinic they're browsing. That's why it sits in the header and shows in bold on every service, and it's the first thing I'd test with real patients.

More work

All work →