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
Old site's heatmap of doctor search results

Old site's heatmap of doctor search results

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

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 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)

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

  1. Select the area to call the hospital.

  2. 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