Skip to content
Back to portfolio
Concept Build logo
Concept BuildConcept Build2026Visit live site ↗

Lantern Family Practice

A concept website for a fictional four-doctor family practice in Observatory, Cape Town, built to answer the three questions every patient has before they call: are you open, can I be seen today, and what will it cost?

Industry: Medical Practices, Healthcare| Type: Concept Website, Brand System, Patient Tools and Booking
Next.jsOutfitLexendConcept BuildMedical PracticeOnline BookingVaccine PlannerAccessibilityPOPIA
The situation

Most GP websites are a list of services, a phone number and a contact form, so a parent with a sick child at 7pm still has to phone to find out whether anyone is there. Medical practices also work within strict rules. The HPCSA's ethical rules say advertising must be truthful and must never cause unwarranted anxiety about health, with no canvassing, testimonials or superiority claims, and rule 5 says a private practice must carry a registered practitioner's name. Under POPIA, health information is special personal information that needs explicit consent. The brief was to build a family practice site that feels clinical and trustworthy, stays warm enough for families, and is genuinely useful at any hour.

What we built

We built a fast, twenty-one page static Next.js site with a clinical white and soft blue design. A utility bar on every page carries the emergency number, the on-call line and opening hours. The home page opens on the live practice status board beside a consultation photo, with a trust strip below for HPCSA-registered doctors, same-day visits, medical aid and the on-call doctor. Below that come the three-question guide, six services, the four doctors, the vaccine planner, fees, joining as a new patient and common questions. Every service page has what is included, how it works, fees, the doctors who offer it and questions. There are pages for fees and medical aid, after hours and emergencies, contact and three patient guides checked against current South African sources. A text size control in the header helps older patients. Because the practice is fictional, every tool runs in the browser and every confirmation says plainly that nothing was sent or stored. The site also includes a POPIA privacy notice, a disclaimer, MedicalClinic, Physician, MedicalWebPage, FAQPage and breadcrumb schema, a web app manifest and a full sitemap.

Key strategies
  • Checked the roadmap name first: Eastgate Medical Centre is already a GP practice in Australia and Eastgate is a well-known Johannesburg mall, so we chose Lantern, a light left on for the family, which gives the practice a clear symbol without the usual crosses, stethoscopes and heartbeat lines
  • Rebuilt the approved ChatGPT logo as clean vectors from measured outlines, mirrored on a centre axis so it is exactly symmetrical, and placed every letter of the wordmark on the original's own letter centres
  • Took the ink blue, flame amber and slate from the logo, added cool clinical tints of the same blue for backgrounds, and checked every text and background pair against WCAG AA contrast
  • Used Outfit, the logo's own descriptor font, for headings and Lexend for body text, a typeface designed for easy reading, with metric-matched fallback fonts measured in the browser so pages stay still while they load
  • Designed a hero unlike any of our other builds: a reception-style practice status board where the lantern is lit while the practice is open, glows low while the on-call doctor answers and goes dark when closed, with the next free appointment and the doctors in today, all worked out from the current time in Cape Town
  • Built a three-question guide that routes patients by urgency and time of day to a booking, the on-call line or emergency numbers, without ever trying to diagnose
  • Built a vaccine planner on the 2026 South African public schedule, including the measles and rubella change, that works out every due date from a date of birth and downloads calendar reminders
  • Added a four-step booking flow that knows each doctor's consulting days, skips Sundays, lunch and public holidays, and a new patient form with POPIA consent written for health information
  • Wrote every word within the HPCSA's advertising rules, with the practitioner's legal name in the footer and schema, interests described as experience rather than specialist registration, and no invented reviews or results
Results achieved
  • Custom logo rebuilt as clean, exactly symmetrical vectors, with a full brand kit and a favicon that reads at 16 pixels
  • A hero built around the patient rather than a template: a live status board that knows whether the practice is open, on call or closed, including public holidays
  • A vaccine planner on the 2026 public schedule with every due date and calendar reminders, and a three-question guide to the right care
  • Four-step booking with doctor-specific consulting days, and a new patient form with POPIA health information consent
  • Lighthouse on mobile: 100 for accessibility, best practices and SEO on every page tested, 94 to 100 for performance, and 100 across the board on desktop
  • Every tool and form tested end to end on desktop and mobile, 48 of 48 checks passing, and no horizontal scrolling on any page from 320 to 1920 pixels wide
  • Pure static build with no database, so pages load fast and there is very little to maintain
The outcome

The concept shows that a GP practice website can do the reception desk's first job at any hour: telling a patient whether the doctor is in, when they can be seen and where to go if it cannot wait, in plain English and within the HPCSA's rules. For a real practice, the same foundation can connect to its practice management system, so bookings land straight in the diary and reminders go out automatically.

Want a similar outcome for your business?

Tell us where you are and we will take it from there.

Get in touch

CodeLab AI

Typically replies instantly

Hi, I am the CodeLab One AI. Tell me about your business and where you want to grow, and I will show you exactly how we can help.

Quick questions:

Powered by CodeLab One AI