Loading…
← Portfolio
Web Design · Development · SEO · 2025
St Luke's Medical Laboratory
A diagnostic lab website that earns clinical trust on the first scroll.
Client
St Luke's Medical Laboratory
Ja-Ela, Sri Lanka
Industry
Healthcare · Diagnostics
Services
- Web Design
- Web Development
- Local SEO
- Performance Optimization
- Social Media Design
Live site
Visit ↗Built with
- Next.js· Framework
- React· UI
- TypeScript· Language
- Tailwind CSS· Styling
- Vercel· Hosting
- Schema.org· SEO
24h
Report turnaround
500+
Partner doctors
20+
Collection centres
4.9 / 5
Average rating
The Problem
A trusted Ja-Ela medical lab serving 500+ partner doctors had no digital front door — patients and partners couldn't find services, pricing, or home-collection coverage online, and the lab was invisible on local search for high-intent queries like 'blood test Ja-Ela' or 'medical lab near me'.
Our Approach
We rebuilt the site from the ground up: a calm, clinical-grade UI that surfaces 24-hour reports, ISO certification and equipment specs above the fold; service-led information architecture organised around how patients actually search; a home-collection flow that maps to real service areas (Ja-Ela, Kandana, Welisara, Ragama, Wattala); and a local-SEO foundation tuned for medical search.
The Result
A site that converts trust into bookings — the lab's first ranked organic presence on Colombo-area medical search, a frictionless path from 'I need a test' to 'I've booked one', and a foundation the team can extend into corporate health screening and partner doctor programmes.
Design rationale
Every pixel had a reason.
Healthcare design lives or dies on credibility. Two failure modes dominate: cold corporate sterility that signals 'machine' instead of 'care', and friendly amateur warmth that signals 'unqualified'. We aimed for a third register — clinical-grade, but human — by anchoring every visual decision in either trust (the lab is competent) or care (the patient is seen). Nothing on the site is decorative.
Colour palette
7 tokens#1FA64A
St Luke's Green
Primary brand — logo, secondary CTAs ('Book Home Visit'), trust ticks, package badges
#E63946
Care Red
Primary CTA — the action that matters most on every page ('Book Home Visit' pill, urgency moments)
#0F1B2D
Clinical Ink
Headlines on light surfaces, navigation, footer — earns the clinical register without pure black
#FFFFFF
Lab White
Page canvas and copy-on-photo — readability above all in healthcare
#F4F8F6
Soft Mist
Section backgrounds and callout surfaces — a faint green-cast white that ties back to the brand
#F5B500
Star Gold
Reviews and ratings — the 4.9/5 stars, partner-doctor endorsements
#22D3EE
Trust Cyan
DSR badge ring, accent dots, micro-trust signals — adds clinical air without competing with the green
Typography
display
Inter
500 / 600
Trusted Medical Laboratory in Ja-Ela
Inter's neutral geometry reads as clinical and modern without feeling cold. Medium and semibold weights carry hierarchy without screaming.
body
Inter
400 / 500
World-class diagnostic services, delivered with the care your family deserves.
Same family across display and body — fewer mental gear-shifts for the reader. Optimised for screen at 16–18px.
mono
JetBrains Mono
500
REPORT · 24H · CODE: CBC-001
Reserved for codes, IDs, lab references, and trust badges — small caps with letter-spacing for a 'medical chart' feel.
UI principles
Principle 01
Trust signals earn their place
Every credibility claim is concrete: the equipment is named and pictured, the 4.9/5 rating sits next to the partner-doctor count, the ISO badge links to the certificate. Generic 'world-class' marketing language was removed.
Principle 02
Patient-search architecture
Pages are named the way patients type their query — 'lipid profile', 'home blood collection', 'blood test Ja-Ela' — not the way the lab files its services internally. SEO is downstream of empathy, not a separate workstream.
Principle 03
Calm whitespace, generous touch targets
Forms, buttons, and inline links use larger-than-usual padding because the audience skews older. Tap-friendly on mobile without feeling padded on desktop — measured per breakpoint.
Principle 04
Local credibility over global polish
Suburb names are surfaced everywhere (Ja-Ela, Kandana, Welisara, Ragama, Wattala). Patients want to know if you'll come to their door — not whether you're 'serving Sri Lanka'.
Motion principles
01 / 03
Restraint over flair
Healthcare audiences read 'busy motion' as 'unprofessional'. Animations are limited to 300–600ms ease-out reveals on scroll, gentle hover lifts on cards, and the page transitions. Nothing oscillates or auto-plays.
02 / 03
Purpose only
Motion exists to either guide attention (the booking CTA pulse) or confirm a state (form success, copy-to-clipboard for the phone number). Decorative motion was cut in review.
03 / 03
Respect reduced-motion
`prefers-reduced-motion: reduce` is honoured everywhere — animations either disable or collapse to opacity-only transitions. Tested in Safari, Chrome, and on iOS.
Building a great experience for patients
Every page is shaped around how patients actually search — by symptom, by suburb, by urgency. Forms are larger than usual, copy is plain-spoken, and trust signals (ISO badge, equipment specs, doctor count) earn their place above the fold.
Local SEO from the foundation up
Suburb-level service pages (Ja-Ela, Kandana, Welisara, Ragama, Wattala) ship with LocalBusiness and MedicalClinic structured data, named author bylines on the blog, and titles tuned to high-intent queries. SEO is downstream of empathy, not a separate workstream.
The brief
World-class diagnostics, invisible online.
St Luke's has run ISO-certified equipment, partnered with 500+ doctors and turned reports around in 24 hours for years. The science was world-class. The website didn't say so.
- 01
No price list patients could find
Patients arrived at the door without knowing what a test would cost — friction at the moment of decision.
- 02
No credible link doctors could share
Partner doctors had nothing to send to referrals. The lab was a phone number, not a brand.
- 03
Home-collection coverage was a guess
Families in Kandana, Welisara, Ragama and Wattala didn't know if a phlebotomist would actually come.
The cost
And on Google, the lab was invisible for the exact queries its patients were typing — 'blood test near me', 'lipid profile Ja-Ela', 'home blood collection Wattala'. We were brought in to fix all three: design, build, and rankings.
The approach
Healthcare design fails two ways. We aimed for a third.
“Clinical-grade, but human.”
- Equipment, not adjectives
The hero doesn't say 'world-class diagnostics' as a tagline. It shows the equipment, names it, links the spec sheet.
- Rating beside reality
The 4.9/5 rating sits next to the 500+ doctors who actually refer — credibility earned by being specific.
- Promise built into the flow
The 24-hour report turnaround isn't a banner — it's how the booking flow is structured, end to end.
Information architecture
One page per real patient query.
We mapped every page to a search a real person was already typing — not the way the lab files its services internally.
Tap or hover a card to see the query it ranks for
Local SEO foundation
The technical layer matters more than the words.
Four moves did most of the heavy lifting on the ranking side.
- 01
Structured data for LocalBusiness + MedicalClinic
Google reads these to populate the Maps pack and Knowledge Panel — the surface most local patients see first.
- 02
Registered properly across mapping services
Consistent name, address and phone across Google Business Profile, Bing Places and Apple Maps — the unsexy plumbing that makes everything else work.
- 03
Meta + titles tuned for local intent
Every page title carries the suburb or the symptom. No generic 'Welcome to St Luke's' titles wasted on high-traffic queries.
- 04
Blog seeded with named clinician bylines
Author boxes link to credentials — the way Google's E-E-A-T criteria reward expertise, authoritativeness and trust on YMYL content.
What changed
A digital business card became an acquisition channel.
- OrganicBookings now arrive directly
Real patients finding the lab via the queries we built for — not a phone-only funnel anymore.
- SharedPartner doctors send the link
A credible site that adds to a referring doctor's reputation rather than subtracting from it.
- ExtensibleFoundation, not a finish line
Corporate screening, partner portal, online report delivery — all live on the same architecture without a rebuild.
Healthcare SEO is a long game. We're still optimising suburb pages, expanding the blog and watching rankings move on the high-intent queries. This is what a project looks like when design, engineering and SEO are treated as one discipline rather than three handoffs.
Process
Wireframes
Selected views
Social media design
Frequently asked
Questions about this project
- Where is St Luke's Medical Laboratory located?
- St Luke's Medical Laboratory is based in Ja-Ela, Sri Lanka, and serves the surrounding suburbs of Kandana, Welisara, Ragama and Wattala through 20+ collection centres.
- Does St Luke's offer home blood collection?
- Yes. St Luke's runs home blood collection across Ja-Ela, Kandana, Welisara, Ragama and Wattala. A phlebotomist visits the patient's home and reports are turned around within 24 hours.
- How fast does St Luke's deliver test reports?
- Standard turnaround is 24 hours for the majority of tests, including CBC, lipid profile, biochemistry and urine analysis. Some specialised panels may take longer and are flagged at booking.
- Is St Luke's Medical Laboratory ISO certified?
- Yes. St Luke's runs ISO-certified equipment and is referenced by 500+ partner doctors across the Colombo region. Certification details and equipment specs are surfaced on the site for transparency.
- What health packages does St Luke's offer?
- St Luke's offers transparent, symptom-led health packages — including diabetes, heart, women's wellness and full-body screening — with no hidden charges. Pricing is published openly on the packages page.
- Who designed and built the St Luke's website?
- Uniix Studio designed, built and ranks the St Luke's Medical Laboratory website end-to-end — including brand-aligned UI, the booking and home-collection flow, structured data for LocalBusiness and MedicalClinic, and the local-SEO programme.
Related services
Want this for your brand?
More work
Let's build
Got a project in mind?
Let's make it real.
Book a free 30-minute strategy call. We'll review your goals, audit your current presence, and tell you honestly if we're the right fit — no pitch deck, no pressure.
Emailhey@uniixstudio.com
StudioColombo, Sri Lanka
ResponseWithin 24 hours