top of page

UX Design Case Study

BCHP Main Website

Project Title:

Boston Children's Health Physicians Website.

Overview

​

Boston Children’s Health Physicians (BCHP) is a leading pediatric multi-specialty group offering care throughout New York and Connecticut. The goal of this redesign was to modernize the digital experience, support patient self-service features, and align the brand’s online presence with its high standards in pediatric care.

​

​

​

​​

My Role

​

  • UX Researcher

  • UX/UI Designer

  • IA Strategist

  • Front-End Liaison (collaborated with BCHP's web dev vendor)

Tools Used:

Figma | Adobe XD | Wix Studio | Miro | Google Analytics | Lucidchart | WordPress CMS (for integration checks)


.

 

Development Cycle

​

Phase 1: Discovery & Requirements Gathering
Reviewed legacy site analytics (bounce rates, mobile visits, FAQ usage)

Conducted stakeholder interviews (medical directors, communications, patient services)

Collected patient feedback from surveys and front-desk staff.

 

Phase 2: Information Architecture & Content Audit
Audited and restructured over 80+ legacy pages

Consolidated sections into 6 primary categories:

  • About BCHP

  • Find a Provider

  • Locations

  • Specialties

  • Resources & Forms

  • News & Events

 

Phase 3: Wireframes

  • Created low-fidelity wireframes focusing on:

  • Streamlined homepage experience

  • Clear CTA blocks for “Find a Doctor,” “Request Appointment,” “Patient Portal”

  • Improved mobile hierarchy for quick access

  • (Wireframes are included below)

 

Phase 4: Visual UI Design

  • Implemented a calming, medical-grade blue and white theme

  • Used clean sans-serif typography and card-based layouts

  • Integrated trust signals: “Castle Connolly Top Doctors,” U.S. News rankings

  • Designed visual modules for specialties, testimonials, and provider search

 

Phase 5: Testing & Validation

  • Used screen recording tools for usability tests

  • A/B tested homepage call-to-action phrasing

  • Refined design post-stakeholder walkthrough

 

Phase 6: Handoff & Launch

  • Delivered annotated mockups for each page (desktop/mobile)

  • Supported front-end dev handoff with color styles, fonts, component notes

  • Ensured ADA compliance (contrast, font size, image alt tags)

 

Wireframes

​

​

​


Low-fidelity concepts were created for the following:

  • Homepage: Primary CTAs, hero statement, specialties overview

  • Find a Provider: Filtered search with categories

  • Patient Portal Info Page

  • News/Events: Blog-style with previews

  • Forms & Policies section for parent access

High-Fidelity Mockups

Visual refinements included:

  • Simplified navigation bar with floating access to key actions

  • Responsive layout: priority given to mobile tap zones

  • Trust modules highlighting physician excellence

  • Visual contrast for quick-scan cards and service tiles

Final Website link​

Click on the link below to launch the final site

​

BCHP Site

​

Final Design Wins
Improved site speed and mobile usability

Reduced bounce rate on “Find a Provider” by 22%

Increased click-throughs to the “Request Appointment” form by 30%

Positive feedback from parents who previously relied on the office staff for directions/forms

 Future Enhancements
Add a chatbot for quick triage navigation

Enhance patient portal integration with real-time appointment check-in

SEO optimization for specialty-specific conditions (e.g., pediatric cardiology NY)

Reflection
This redesign emphasized the value of aligning institutional trust with digital usability. By streamlining navigation and surfacing key interactions, we built a platform that reflects the excellence of BCHP's care, online and off.

​

​

© 2023 by Kelvin Perez 

bottom of page