Chelsea Chong

 

 

UNC Health Site Redesign

UNCH Banner.png
 

Overview

2023

The University of North Carolina’s healthcare system’s online experience was scattered between 13 different sites for each of their large hospital entities. They approached us to create a centralized main site with a new, modern design system in AEM that would put the spotlight on patients and bring users closer to the care they need.

My role

  • Led IA refinement and testing

  • Created wireframes and helped evolve designs into defined components and templates in a bespoke design system

  • Developed concepts for future-facing features

  • Led user testing and analysis throughout the project

 
 

The Problem

How can we streamline the patient experience and better connect users to the care they need, whether it be doctors, locations, medical services, or administrative tasks?

How do we measure progress in the healthcare space where privacy and HIPAA are key issues?

 
 

The Work

What were the old sites like?

Before getting pulled into our central UNC Health site, each hospital entity used a similar design to the one shown below.

  • Little to no template structure or components

  • Cluttered layout and an overload of content

  • Overwhelming and repetitive subnavigation structure

  • Lack of hierarchy and no clear CTA, too many links

  • Outdated design patterns and aesthetics

Additionally, each entity had slightly different content and navigation leading to extra confusion.

UNCH REX location search before redesign
 

One of the first tasks UX took on was to evaluate the current state IA and navigation, replicating 2 of the largest entity site architectures in Optimal Workshop for tree testing.

We found that both sites only scored a 53-54% success rate, largely due to:

  • Non-patient-facing categories in the navigation

  • Vague, catch-all buckets such as “Patients & Visitors”

  • Repetitive lower-level categories

  • Confusing medical terminology within service lines

Users showed great difficulty in finding the right category for a particular medical service or offering, due to a lack of knowledge or indecision between multiple categories (e.g. is a mammogram under Breast Health? Primary Care? Radiology?).

Optimal Workshop: shows 54% success and 74% directness
Navigation example before redesign

We continued to do 2 more rounds of iteration and testing on an improved IA for the central site. We experimented with different labels and strategic approaches such as segmenting by patient journey stage, or emphasizing some categories over others. Each time, we found that words like “services”, “tools”, or even “caregivers” can mean very different things to patients.

In the end, the most successful approach was one that slimmed down the top-level navigation to 3 simple and distinct categories, which would make it easier to funnel the user into the correct section. From there, they would be able to explore the L2 items and more easily find what they were looking for.

This approach tested at a 73% success rate and, after some slight modifications in partnership with the client, we landed at an IA for MVP launch. In tandem, we had also tested several different designs for the navigation UI and landed on the structure seen below for desktop and mobile.

Improved success rate by 20% 🟢

Sitemap diagram
UNCH navigation on new live site

Components and templates

We went through imagining the new experience and defined templates in AEM for differentiated areas such as:

  • Search tools (find a doctor, find a location, global search)

  • Detail pages (doctors, locations)

  • Areas of care (departments, conditions, treatments)

  • Content-heavy pages (billing, records, how-to)

Each template began in wireframing with UX, and evolved into a collaboration with visual design, dev, content, and requirements as items solidified.

Doctor search wireframes

Doctor search wireframes

Doctor search designs

All components and their statuses were maintained in a Figma design system file, updated as requirements or designs changed. This provided easy access and visibility for all team members including the client.

For example, these variations of a provider card component:

Provider card variations

As each component came to life within these templates, the team aligned on the intended usage, behavior, and data sourcing/authoring expectations. Annotations in Figma were extremely helpful in documenting these notes, both for our team and the client.

Annotation example, on location search

Example of annotations on Location Search designs

 
 
 

Bridging the gap to care

The bigger ongoing goal of this initiative was and is ultimately to empower and enable access to care for patients in North Carolina in a personal way - without violating HIPAA concerns.

Improving the experience of the site’s current scope certainly assisted that goal, but we also developed and tested several concepts that, if properly enabled by data in the future, could have a huge impact on a patient’s ability to navigate healthcare.

I. The Doctor Match Tool
The user goes through a short wizard indicating their needs and preferences when it comes to looking for a provider. The tool then shows them their top matches in the UNCH network as well as a breakdown of how each doctor stacks up against the user’s preferences.

Testing of this concept showed that:

  • Extremely valuable with 90% of users wanting to use a tool like this

  • Perceived as time-saving, more efficient than manual research, an advanced level of data, relevant to real-life concerns

  • 70% of users rated experience as very easy, 30% somewhat easy

  • Acknowledgement of diverse healthcare needs is a really positive differentiator in the industry (e.g. wanting to be seen by someone experienced with LGBTQ+ care, care for the Black community, etc.)

    • Some wariness around how this data is determined

  • Substantial appetite for personalization in exchange for efficiency - in context of making tasks more efficient, rather than curated content

    • Would generally be willing to create an account with UNCH to see existing information in a protected, authenticated space

It would save me a huge amount of work....it’s put that kind of data together in a way that I could never find otherwise.
— doctor match testing participant

II. The Triage Tool
This experience is meant for the patient who is experiencing a medical issue, but is not sure what the best course of action is. We walk them through a comforting, step-by-step questionnaire that leads them to a recommended next step with actions such as booking an appointment, viewing doctors, or ways to alleviate symptoms.

For UNCH as a business, this tool would also address an existing pain point where patients book with the wrong type of provider or crowd ERs when unsure of what to do.

Testing of this concept showed that:

  • Extremely valuable - 90% of participants claimed they would use this tool in relevant situations

    • Usage depends on familiarity with symptoms, severity of symptoms, how urgently they need help

    • 80% of users claimed they would use the tool to help someone else as well

  • 80% of participants rated the tool as very easy, 20% as somewhat easy

  • The humanized, patient-first tone of the copy and bite-sized steps were key in a situation where a patient is not feeling well

  • Cost transparency when booking is extremely important for users, including insurance information

  • Users prefer this type of “next step” guidance to a diagnosis tool, which may or may not be accurate or actionable

Thought it was very user-friendly...it just felt like I was already talking to a doctor, just leading me down the path to take care of my problem.
— triage testing participant

III. The Provider Availability Network
A common pain point in healthcare (as you may know) is that patients may find a provider they are interested in, but that provider is not available for a long time. This feature would present similar providers who are available sooner, in the vein of cross-selling in eCommerce.

This particular tool has more to do with the logic backing such questions as:

  • How does the threshold for “too long” change with specialties?

  • What determines “similarity” to the original provider? Which aspects are most important to users?

  • How much control can, and should, we give the user over the recommendations versus directing them back to search?

As of November 2023, this concept has only undergone initial research with users who indicated that:

  • 100% of users found this concept very valuable - a common situation, would make the search for a doctor more seamless

  • All users indicated that the threshold for “too long” depended on the situation - non-urgent situations could range from 2 weeks to 6 months

  • Most users expected similarity to be based on specialty/field and level of expertise or qualification

  • Similarities in Specialty, Accepted Insurance, Soonest Available, Provider Type (nurse vs. doctor vs. PA), and Care Style ranked most consistently as extremely important when determining which other providers should be recommended

 
 
 

Key insights on patient behavior

Throughout the project’s numerous user testing sessions, surveys, and tree tests, consistent themes about patient behavior emerged.

Patients don’t speak the language of medical institutions. 🔈
Especially when it comes to navigating content or seeking care, patients do not understand departments, specialties, and medical terminology the way institutions do. Some issues could also belong in multiple categories - where is the line between Women’s Health, Breast Health, and OB/GYN? What about Primary Care vs. Internal Medicine vs. Family Medicine? Does a user visit Imaging or Gastroenterology for information on a colonoscopy?

Instead, healthcare sites can:

  • Allow users to browse or search by conditions, symptoms, and services - they are more likely to be familiar with the problem they have or the treatment they need to book

  • Incorporate robust synonyms into searches so that users are not dead-ended when searching for things like “heart” vs. “cardiology”

  • Use patient-friendly terms and categories that accommodate all levels of medical knowledge, such as using “stomach” or “digestion” rather than “gastrointestinal”

Patients are not looking for an encyclopedia of medical content - they want actionable care. 🎬
With a plethora of other sites like WebMD or MayoClinic, patients are no longer looking for a library of definitions and medical explanations. When it comes to a healthcare site, they want quick access to care based on their needs and a transparent understanding of what that entails. Users may also be looking for different things depending on their context; for instance, someone evaluating a potential new primary care doctor, vs. someone looking for a clinic to get their regular mammogram, vs. someone who has an urgent need and is not sure where to start.

An effective healthcare site should:

  • Tailor content to be specific and relevant to what the institution provides

  • Provide helpful bits of content in contexts where they support a larger task or action

  • Make it easy for users to find providers, facilities, and even events or other offerings

  • Provide entry points into the process of finding care wherever the patient is on their journey, from diagnosis to treatment to recovery

Patients needs must rise above internal politics to make the site successful. 🌟
In the world of healthcare where the users are facing real medical problems, caring for their own health or the health of loved ones, and trying to navigate a complicated system - it is more important than ever to get the organization on board with the true mission of helping people, which in turn builds trust and profit for the brand. From the tone of the copy, to the design strategy, to the data made available - everything should support and acknowledge a patient’s need for care.

As much as possible, a healthcare business should:

  • Provide contextual transparency about insurance and cost information, to the best of their ability

  • Show visibility into appointment scheduling and doctor availability, guiding users to the appropriate type of care instead of obscuring information

  • Simplify the experience to meet patients where they are, keeping in mind that they may be in urgent or difficult situations, instead of overwhelming the user with marketing or jargon

 
 
 

The Result

In April of 2023, the UNC Health site successfully launched with our new design system. Today, you can use the live site at unchealth.org and view the latest designs.

In 2024 Q2, our Analytics team was able to implement Adobe CJA and Healthcare Shield. Although it has only been a few months and we are still gathering data as a baseline against which to measure progress, we have already been able to use this tool for A/B testing for optimizations.