Dr. Sherbat Khan website — home page on a laptop and a phone, over a mountain line that turns into a heartbeat

Case study · Healthcare · Quetta, Pakistan · 2026

Dr. Sherbat Khan — Gastro & Liver Center

A bilingual clinic website that brings patients through the door. Walk in, no appointment needed.

Role
Strategy, design & development
Year
2026
Platform
Website, 33 pages (two home pages, 29 guides, a 404 page and an offline page)
Languages
English & Urdu (right-to-left)

The challenge

Prof. Dr. Sherbat Khan Mandokhail, former Professor and Head of Gastroenterology at Bolan Medical Complex Hospital, sees patients from across Balochistan. Most of them search on mobile phones, and many prefer Urdu.

In Quetta, online appointments don't work well: people book and then don't come. The clinic needed one clear, trustworthy place online that answers a patient's questions and brings them to the door: walk in during clinic hours, no appointment needed.

English

Urdu, right to left

What we did

  1. Two real home pages

    Two fully built home pages, / in English and /ur/ in Urdu with a complete right-to-left layout, linked as language pairs for Google instead of a translation switch. The language button keeps the reader in the same section.

  2. A portal home page

    Treatment tabs, a condition finder across all 23 Urdu guides, dropdown menus for treatments and every guide, and site search in English, Urdu or Roman Urdu.

  3. Walk-in first

    No booking form. One consistent message across the site: come to the clinic during clinic hours and register at the reception, with Call and WhatsApp there for questions.

  4. Reaching the clinic

    Every Directions button offers Google Maps or the route video, small corner quick actions follow the reader down the page, and the live hours sit on a day timeline.

  5. A heartbeat opening

    The mountains around Quetta draw themselves in and flatten into a heartbeat beside the portrait, whose gold outline is a stethoscope that hears every beat.

  6. Fast, found and secure

    Self-hosted fonts, validated structured data, access for AI crawlers and an llms.txt summary, strict security headers, and offline support for pages a patient has opened.

The first screen of a phone
Urdu home page
Menu, walk-in note first
Body map

From presentation to portal

The previous version read like a magazine spread: beautiful, but one large section after another. Version 5.4 keeps the identity and changes the information architecture, so the home page works like a medical portal.

A slim clinic bar carries the address, the phone number and WhatsApp. Two real dropdown menus, Treatments and Patient guides, open with a mouse, a tap or the keyboard. Straight after the hero come the treatment tabs, each lighting the organs it reaches on a small body figure, beside “Find your condition”, with search and filters across all 23 Urdu guides. The page now follows a patient's questions: is he open, what is treated, where is my problem, how do I come in.

Treatment tabs beside the condition finder
Find your condition
The Treatments menu
Every guide, grouped by body area
The body map: choose an organ to see its problems and tests
Short videos from the doctor

Walk in, no appointment

So the site no longer takes bookings. The hero, the menu, the visit section, every guide page, the search panel, the footer, the FAQ and the structured data that search engines and AI assistants read all say the same thing first: walk in during clinic hours and register at the reception.

WhatsApp opens with a ready-made question in Roman Urdu or Urdu, not a booking request. The live status speaks the same language: “Open now · Walk-ins until 9:30 pm”, calculated from the published hours in Pakistan time.

The walk-in section, in Urdu
Four steps to the reception
Visit the clinic: steps, live hours, the address and a route video

Reaching the clinic

Every Directions button opens a choice: open Google Maps, or watch the route video along Zarghun Road. The same sheet can share the location or copy the address; on phones it is a bottom sheet you drag down to close.

Live hours sit on a day timeline with a “Now” marker and a week strip, beside a “what to bring” checklist for the first visit. Short links such as /directions, /hours and /whatsapp work on print and social media.

Directions: Google Maps or the route video
The same choice as a bottom sheet
Live hours
Route video and what to bring
Clinic hours, in Urdu

Design, from Quetta itself

The design system is named Zarghun, after the road the clinic is on and the mountain it is named for. Juniper green from the forests of Ziarat and Zarghun, brass gold from the clinic's logo, warm Chiltan stone and high-altitude daylight white, with pomegranate red kept for warning signs. Instrument Serif and Instrument Sans for English, Noto Nastaliq Urdu for Urdu. The portrait sits in an arch taken from the doorway of the clinic's waiting room.

One orchestrated opening: the mountain line around Quetta draws itself in, then flattens into a single heartbeat. The gold outline of the portrait is a stethoscope; its chest piece rests on the heartbeat, and with every beat a pulse of light runs up the tube, so the stethoscope hears the heart. The loop pauses off screen, and visitors who ask for reduced motion see the finished drawing.

On a 1366 × 768 laptop, the whole hero fits the first screen
The stethoscope around the arch
The doctor’s story
Urdu, Pashto, English, Persian
Inside the centre: 13 photographs in one colour grade
An Urdu guide on a laptop
Warning signs, in plain Urdu

Built for real patients

Phones first: on a 360 px phone the first screen shows the live status, the doctor's photo, his name in both languages, the hours and walk-in rule, and Directions, Call and WhatsApp. Once those scroll away, three small corner buttons take over, mirrored to the left in Urdu.

On laptops the portrait fills the height of the text beside it, and the body map stays in view while the details scroll. Body text is 18 px and secondary text is darkened to a 6.5:1 contrast for older patients, and pages a patient has opened keep working offline. Tested from 320 px phones to 1920 px screens in both languages, with no sideways scrolling.

Treatment tabs
Body map, in Urdu

Scope of work

  1. Strategy
  2. Web design
  3. Development
  4. Bilingual content
  5. SEO
  6. Analytics
  7. Hosting

See it live