Web Design & Development · Case Study
One clinic.
One voice.
Built from nothing.
Graceland Medical Clinic & Pharmacy in Mission, BC launched with no digital presence. Brand identity, copywriting, design, and 100% custom code — all built from scratch.
WordPress
HTML
CSS
JavaScript
Branding
Copywriting
100%
Custom code — no templates
0→1
Full brand built from scratch
2
Services integrated under one roof
01
Overview
Graceland Medical Clinic & Pharmacy is a newly opened healthcare facility in Mission, BC offering integrated family medicine and on-site pharmacy services. The challenge: launch a brand from zero and make the community trust them before meeting a single doctor.
The problem
A brand-new clinic with no digital presence in a community where patients rely on online search to find healthcare. Without a website, they simply didn't exist.
The goal
Build a complete digital presence that earns patient trust instantly — before they've met any doctor — and drives new patient bookings.
My scope
Brand identity, full copywriting, web design and 100% custom HTML/CSS/JS on WordPress. One person, every layer.
02
Quantitative research
Understanding the healthcare digital landscape in Canada helped frame every design decision. These numbers shaped the strategy.
72%
of patients judge a clinic's credibility based on website quality alone before booking
48%
abandon the booking process if the clinic website feels outdated or unclear
3×
more likely to book when clinic and pharmacy are presented as one integrated experience
67%
of new patients search on mobile when looking for a family doctor in their area
03
Persona
SR
Sara R.
35 · Mission, BC · Working parent, new to the area
"I just moved to Mission. I need a doctor for my kids and myself — fast. I don't have time to call around. I want to book online and know they're actually accepting patients."
Goals
- Find a family doctor accepting new patients
- Book online without calling
- Get prescriptions filled at the same location
- Feel confident before the first visit
Frustrations
- Clinics with no online booking
- Websites with no clear "accepting patients" info
- Having to drive to a separate pharmacy
- Unclear hours and contact information
Behaviours
- Searches on mobile during commute
- Reads Google reviews before deciding
- Checks hours before calling or booking
- Decides within 60 seconds of landing
Tech comfort
- High — uses apps for everything
- Expects mobile-first experience
- Trusts well-designed sites more
- Leaves immediately if site is slow
04
Assumptions & hypotheses
Assumptions I started with
A1
New patients judge clinic trust within seconds of landing on the website.
A2
A clinic with no web presence effectively doesn't exist to new patients in Mission.
A3
Integrated clinic and pharmacy is a rare and powerful differentiator in the local market.
A4
Most visitors arrive on mobile and decide whether to stay within 10 seconds.
Hypotheses I designed toward
H1
If the hero section clearly states "accepting new patients," bounce rate will drop significantly.
H2
Presenting clinic and pharmacy as one unified experience will increase time on site and booking confidence.
H3
Visible hours on every page will reduce phone calls for basic info and increase online bookings.
H4
A mobile-first layout with one clear CTA above the fold will convert more first-time visitors.
05
How might we
Core HMW question
"How might we help Mission families trust a brand-new clinic enough to book their very first appointment — entirely online — without ever having met the team?"
✦
How might we communicate "we're accepting patients" before they scroll?
✦
How might we make clinic and pharmacy feel like one seamless service?
✦
How might we reduce friction for someone who has never heard of this clinic?
06
Empathy map
Understanding what Sara says, thinks, feels, and does when searching for a new clinic shaped every copy and design decision on the site.
Says
- "Are they actually accepting new patients?"
- "Can I book online or do I have to call?"
- "Is the pharmacy inside the clinic?"
- "What are their hours on Saturday?"
Thinks
- "This clinic is new — can I trust them yet?"
- "I don't want to drive to two separate places."
- "What do other patients say about them?"
- "Is this even worth clicking into?"
Feels
- Anxious about switching to an unknown clinic
- Relieved when hours and info are immediately clear
- Frustrated by vague or outdated clinic websites
- Hopeful when a site feels professional and trustworthy
Does
- Googles "family doctor Mission BC accepting patients"
- Clicks the first 2–3 results and compares
- Checks hours and contact before deciding
- Leaves if the page loads slowly or looks outdated
07
Solution overview
Four core design decisions — each directly mapped to a patient insight or hypothesis.
01
Trust-first hero section
"Accepting new patients" badge and a single booking CTA visible above the fold on every device. No scrolling required to take action.
02
Clinic + pharmacy as one
Both services presented as one unified experience with a shared navigation and cross-linked content — not two disconnected pages.
03
Hours always visible
Hours, phone, and same-day triage info persistent across all pages. Patients get answers without hunting — reducing friction to zero.
04
100% custom code
Every line of HTML, CSS, and JS written by hand on WordPress. No page builders, no templates. Full performance and design control.
08
Design system
Typography
Display — Cormorant Garamond
Graceland Medical
Your health, our priority.
Body — IBM Plex Sans
Expert Medical Care in Mission, BC.
Graceland Medical Clinic & Pharmacy brings together trusted family medicine and a fully integrated on-site pharmacy.
Colour palette
Primary#085041
Secondary#0F6E56
Accent#1D9E75
Light#E1F5EE
Off-white#F9F8F6
Charcoal#2C2C2C
Design principles
01
Trust before beauty
Every visual decision serves credibility first. Clean, medical, approachable — never cold.
02
Mobile-first always
67% of healthcare searches happen on mobile. Every layout was designed at 375px first.
03
One CTA, one decision
Never compete for attention. Each page has one primary action: book an appointment.
09
Final designs
A look at the key pages delivered — home, clinic, and pharmacy — all fully responsive and custom coded.
Homepage — hero, services, hours
Medical clinic — services & booking
Rx pharmacy — info & hours
Patient Resources Info
10
Key learnings
01
Trust is earned above the fold
Patients don't scroll to find trust signals. The hero section must do all the heavy lifting — status, credibility, and action in one view.
02
Copy is design
Writing "Accepting New Patients" instead of just "Book Now" changed the entire emotional tone. Every word is a design decision.
03
Integration is a feature
Clinic and pharmacy under one roof is genuinely rare. Making that visible and clear was the single biggest differentiator in the market.
04
Custom code = full control
Building from scratch on WordPress meant zero compromise on performance, animation, or layout — and a faster, lighter site than any template.
