Old site's heatmap of doctor search results
Chris Zappala
UX Designer
Overlake Medical Center & Clinics Website
Designing search for doctors, locations, and services
Overview
About the Organization
Overlake Medical Center & Clinics is a nonprofit regional healthcare system based in Bellevue serving the Eastside community. The health system includes a hospital and a network of primary, urgent, and specialty care clinics.
Problem Statement
Patients, visitors, and staff had a difficult time finding doctors, locations, and services while using the website.
My Role
I was responsible for all aspects of design including flows, wireframes, interactive prototypes, and finished visual comps. As well as working with engineering to build matched designs.
Project Goals
Improve search and filter experience
Create a solid site foundation for further optimization and additional features
Increase engagement with the organization through the integration of blog and class offerings
Prioritizing features due to budget and deadline
Enhance site accessibility
Improve patient, visitor and staff experience through the improved structure of information
Business Constraints
Forms and integrations must be HIPAA compliant
Staying with current systems and integrations for booking (MyChart, Clockwise, Learning Stream, and phones)
Differentiating between employed and affiliated providers and locations
Discovery
Research Methods
Online surveys
Hotjar video recordings
Heuristic review
Competitive analysis
Hotjar Heatmaps
Google Analytics
What I learned
The majority of users felt search results didn't match their expectations
Search result cards didn’t provide enough context
Using search filters were a laborious experience
Informational pages had a high cognitive load
Pages often buried important information
Provider’s locations were unclear
Structure
Mapping out the new site structure using sticky notes
Information Architecture
After reviewing Google Analytics, surveys, and internal feedback with my manager, we learned that:
Users weren't seeing the connections between service lines, doctors, and locations
Location types and their naming conventions were a source of confusion
There weren't clear content lanes for patient information or information about the organization
So we focused on:
Making Services have a clearer sense of hierarchy
Simplifying location types and developing clear naming conventions
Organizing patient and visitor content into one section
Having the About section shine a light on the values, community focus, and leadership of the organization
Task Flows
Main task flows for doctors, locations and services
Main Tasks
There are a wide variety of tasks that a patient or visitor would visit the site to accomplish. We looked at business goals and customer goals and determined these were the focus:
Finding and scheduling with a new doctor
Finding and scheduling at a new location
Learning about services
Wireframes
I did 10 explorations. Then narrowed my ideas down to the strongest sets of wireframes, incorporating successful elements from discarded versions. Here are a few examples including notes on how they differ.
For this version of the Find a Doctor task flow, I optimized the real estate, surfacing search fields at the top. For search results, I focused on giving enough context for the user to see key differences between doctors, and make an informed decision on whether they want to dive deeper into the doctor profile.
For this version, the main Find a Doctor search page uses a large photo and includes actions directed at new and returning patients. The search result cards highlight ratings, provide additional information about the doctor's location and feature a button to prompt users to view the profile page. On the profile page, the doctor's rating is elevated, and a map graphic is shown as a header background.
For this desktop version, search results are displayed in a single column list. Applied filters are displayed in the left-hand Filter By column. Specialty, address, and phone are prioritized over ratings.
For this desktop version, search results are displayed in a multi-column layout with a view all button prompting the user to select a doctor profile. Ratings are prioritized at the top of each card.
Testing
Option 1 (left), Option 2 (right)
Remote unmoderated tests were conducted using UsabilityHub and Optimal Workshop.
In this example, two options for the mobile menu were being tested.
The Tasks
Select the area to call the hospital.
Select the area to access MyChart
Results
Preference for design option 1
Least failure to find info and carry out tasks to call the hospital and find MyChart also reside with Mobile Nav 1
On option 1, users are accomplishing tasks fairly quickly (around 2 to 3 seconds.)
Visual Design
Outcomes
Results
The site's search usage increased more than 2x in the first 5 months since launch.
The website won gold awards from Marcom in the website redesign and digital media - medical website categories.
Reviews with stakeholders have been positive.
Post-launch feature development has been scheduled for continued growth
Technical debt inherited from the old site is no longer an impediment
Site accessibility has been improved