Health care web design.

This project was a complete website design for a healthcare provider transitioning from a dated, template-based site to a modern, patient-centered digital experience. The site needed to serve multiple audiences: patients booking appointments, referring physicians seeking information, and potential employees exploring career opportunities.

Healthcare web design carries unique responsibilities. When someone visits a medical website, they're often anxious, confused, or in pain. The design needs to reduce that stress, not add to it.

Healthcare websites face constraints that other industries don't. Regulatory requirements, accessibility mandates, and the emotional state of users create a design environment where every decision carries extra weight.

Specific challenges:

The existing site had a 71% bounce rate on mobile (where 64% of traffic originated)

Appointment booking required 7 clicks and a phone call (patients were abandoning the process)

The site failed WCAG 2.1 AA accessibility standards on 23 of 30 pages

Medical content was written at a 12th-grade reading level (recommended: 6th-8th grade for patient-facing content)

The provider directory was unsearchable and listed 140+ physicians in alphabetical order

Page load time averaged 5.2 seconds (patients with urgent needs won't wait)

No Spanish language support despite 30% of the patient population being Spanish-speaking

I conducted research across three dimensions: patient needs, clinical staff workflows, and competitive landscape.

Patient research: I reviewed 200+ patient feedback submissions from the previous 12 months. The top complaints were consistent: "I can't find my doctor," "I don't know how to book online," and "the site doesn't work on my phone." I also conducted 6 phone interviews with patients of varying ages and tech comfort levels.

Staff interviews: I spoke with 4 front-desk staff members who fielded phone calls daily. They reported that 40% of calls were for information that should have been findable on the website: office hours, directions, insurance accepted, and how to book an appointment. Each unnecessary call cost the practice approximately $12 in staff time.

Competitive audit: I analyzed 15 healthcare websites ranging from large hospital systems to private practices. The best ones shared common traits: prominent appointment booking, searchable provider directories, and content written in plain language. The worst ones buried critical information behind marketing copy and stock photography.

The visual direction needed to communicate trust, competence, and warmth. Healthcare design often defaults to one of two extremes: cold and clinical (white backgrounds, blue accents, stethoscope stock photos) or overly warm (soft focus, pastel colors, generic smiling faces). Neither builds genuine trust.

I developed a visual language that felt modern and professional without being sterile:

Color palette: A deep teal as the primary color (associated with healing and calm), warm white backgrounds (softer than pure white, reducing screen fatigue), and a coral accent for CTAs and important actions. The palette was tested for accessibility across all combinations.

Typography: A humanist sans-serif that balanced professionalism with approachability. Medical terminology was set in the same typeface as conversational text, avoiding the common mistake of making clinical content feel intimidating through typographic treatment.

Photography direction: Real photos of the actual facility and staff (not stock photos). I art-directed a half-day photo shoot capturing the waiting room, exam rooms, and staff in natural interactions. Authentic imagery builds trust that stock photography never can.

Iconography: A custom icon set (40 icons) covering medical specialties, services, and wayfinding. The icons used a consistent 2px stroke weight and rounded corners, matching the friendly-but-professional tone of the overall design.

The site architecture was completely restructured based on user research:

Primary navigation (visible on every page):

Find a Doctor (searchable directory)

Services (organized by condition, not department)

Book Appointment (persistent CTA)

Patient Portal (login)

Contact/Locations

The "Find a Doctor" redesign was the most impactful architectural change. The old alphabetical list was replaced with a faceted search: filter by specialty, condition, language spoken, gender preference, and accepting new patients. Each physician profile included a photo, bio written in first person, education, and a direct booking link.

Service pages were reorganized around patient needs rather than internal department structures. Instead of "Cardiology Department," the page was titled "Heart Health" with plain-language descriptions of conditions treated and procedures offered. Each service page linked directly to relevant physicians and appointment booking.

Accessibility wasn't a checkbox; it was a design principle applied from the first wireframe:

Color contrast: All text met WCAG 2.1 AAA contrast ratios (not just AA)

Font sizing: Minimum 16px body text, with a user-adjustable text size control

Keyboard navigation: Full site navigable via keyboard with visible focus indicators

Screen reader optimization: Semantic HTML structure, ARIA labels, and alt text for all images

Form accessibility: Labels associated with inputs, error messages linked to fields, and clear validation feedback

Motion sensitivity: Reduced motion option that disabled all animations

Language: Bilingual support (English/Spanish) with language toggle on every page

Complete Figma design system (44 components)

Responsive designs for 12 unique page templates

Searchable provider directory design with filtering system

Online appointment booking flow (reduced from 7 steps to 3)

Patient portal integration design

Bilingual content framework (English/Spanish)

Custom icon set (40 medical and wayfinding icons)

Accessibility audit report and compliance documentation

Content style guide (reading level guidelines, terminology standards)

Photography art direction and edited photo library

Developer handoff specifications

The redesigned site launched with a phased rollout, starting with the provider directory and appointment booking flow.

First 90 days:

Online appointment bookings: Increased 340% (from 120/month to 528/month)

Phone call volume: Decreased 35% (staff time savings of ~$4,800/month)

Mobile bounce rate: Dropped from 71% to 29%

Average page load time: 1.4 seconds (down from 5.2 seconds)

Accessibility score: 100% WCAG 2.1 AA compliance (up from 23%)

Provider directory usage: 89% of site visitors used the search function

Spanish language pages: Accounted for 22% of total page views

Patient satisfaction survey: "Ease of finding information online" score improved from 3.1/10 to 8.4/10

The most meaningful metric wasn't on a dashboard. The front-desk staff reported that patients arriving for appointments were better prepared: they'd already read about their condition, reviewed their doctor's background, and completed pre-visit forms online. The website was doing the work that phone calls and paper forms used to handle.

Healthcare web design is empathy design. Every user is a patient (or a caregiver, or a worried family member). The emotional context of healthcare website visits is fundamentally different from shopping for shoes or reading a blog. Design decisions that seem minor in other contexts (font size, color contrast, reading level, page speed) have outsized impact when the user is stressed or vulnerable.

The provider directory redesign was the single highest-ROI design decision. Making it easy to find and learn about a doctor before booking removed the biggest barrier to online appointment scheduling. Sometimes the most impactful design work isn't the homepage hero; it's the search interface on an interior page.