~/work/dermaclub · Custom software
The Derma Club Website Rebrand and Online Booking System
Overview
A new website for The Derma Club and Women's Wellness Centre in Mississauga: 31 prerendered pages, a page for each of its 20 treatments, a filterable shop of 51 AlumierMD products, and an online booking system built to replace Jane.
The challenge
The clinic's site had to explain medical treatments in plain language and rank for local searches, keep every old WordPress URL working, and let clients book 108 services online without two people landing on the same slot.
Not live yet: the clinic is reviewing the design, and the booking system has been tested locally.
problem / solution
What we set out to fix
Problem
- An older WordPress site with treatment information spread across pages.
- Booking lived in Jane, outside the clinic's own website.
- Moving to a new site risked losing the old URLs that search engines knew.
Solution
- A page for every treatment with an at-a-glance summary, visit steps and FAQs.
- Online booking with live availability by practitioner, where the database refuses double-bookings.
- A staff calendar with day view, status, call-backs and time off.
- 301 redirects from the old URLs, with structured data and a sitemap on every page.
process
How we built it
01
Audit
Read the old site and Jane's public booking page to list every treatment, service and URL.
02
Design
A rounded, calm visual language with light and dark themes, responsive down to 360px.
03
Build
Prerendered HTML for search, with one set of templates handling navigation, booking and shop filters in the browser.
04
Test
Booking API tests, including double-booking protection, run against a local Postgres database.
features
What it does
feature 01
A page for every treatment
- 20 treatment pages, filterable by category, plus a finder by concern.
- Each page has a summary, visit steps and FAQs.
feature 02
Booking on the clinic's own site
- 108 services with durations and practitioners.
- Live availability from staff hours, bookings and time off, with double-bookings refused by the database.
feature 03
A shop and two themes
- 51 AlumierMD products across 9 categories.
- Light and dark themes that follow the visitor's system setting.
stack.md
The tech stack, and why we used it
Prerendered HTMLEvery page reaches search engines and slow phones as finished HTML, which matters when a clinic depends on local search.Node.js on VercelBooking runs as small server functions, so there is no server to keep running between appointments.PostgreSQLThe database itself refuses a double-booking, so two clients cannot land on the same slot even at the same moment.users.md
Who it is for
This one is not live yet, so these are the people it was designed for.
Clients
Find a treatment, read what to expect and book a slot without calling.
Clinic staff
See the day, call-backs and time off in one calendar at /admin.
benefits.md
Benefits
- Treatment information lives in one consistent place for all 20 treatments.
- Old WordPress links redirect, so search ranking is not thrown away.
- Clients can cancel from a private link without phoning the clinic.
cost.md
Cost benefits
- Booking moves onto the clinic's own site instead of a separate booking product.
- Serverless functions and prerendered pages keep hosting small for a site of this size.
screens · 8
Every screen
Scroll sideways through the product.
Typography
Aa
Figtree + DM Mono
Figtree keeps a medical subject warm and easy to read; DM Mono sets small details such as prices and times.
colours
built with