United Healthcare
Re-imagining the filters architecture
United Healthcare
Re-imagining the filters architecture
United Healthcare offers an all-encompassing health app that includes a wide-range of features. The most common feature, finding a doctor, is used by over 30 million members. I worked with the product and development teams to re-imagine the search filters architecture to make it easier and faster for users to find the care they need.
United Healthcare offers an all-encompassing health app that includes a wide-range of features. The most common feature, finding a doctor, is used by over 30 million members. I worked with the product and development teams to re-imagine the search filters architecture to make it easier and faster for users to find the care they need.
Role: Product Designer
Platform: Responsive Web
Year: 2020-Present
Highlighted in yellow is the existing list of filters in an expanded accordion pattern. Users would have to scroll up and down to see all of their filter options.
The Problem
When searching for a doctor, users can refine their search by location, reviews, specialty type and more. With the list of provider attributes rapidly growing, the list of filters was becoming very long, making it difficult for users to easily scan and select their filters. I was tasked to design a more scalable filters architecture that made it easier for users to see and understand the filter options they select.
When searching for a doctor, users can refine their search by location, reviews, specialty type and more. With the list of provider attributes rapidly growing, the list of filters was becoming very long, making it difficult for users to easily scan and select their filters. I was tasked to design a more scalable filters architecture that made it easier for users to see and understand the filter options they select.
My Role
I was brought on to:
I was brought on to:
- Conduct a competitive analysis and landscape audit of filter patterns
- Evaluate the usability of different filter patterns
- Design and test UI elements and interactions
A compiled list of assumptions, motivations, and pain points I collected with the Product Manager to build more empathy for our members navigating the filters.
Understanding our Users
The filters redesign would initially be seen by the Employee and Individual population, a group of 50,000 members under 65 years. I worked with the Product Manager to understand their pain points and motivations when it came to filtering for providers. We used iPerceptions data collected from members over a one-year period.
From this brainstorm session, our priorities became:
1. Make it easy to filter
2. Prioritize filters in order of usage
3. Make it easy to clear filters
4. Minimize scrolling
The filters redesign would initially be seen by the Employee and Individual population, a group of 50,000 members under 65 years. I worked with the Product Manager to understand their pain points and motivations when it came to filtering for providers. We used iPerceptions data collected from members over a one-year period.
From this brainstorm session, our priorities became:
1. Make it easy to filter
2. Prioritize filters in order of usage
3. Make it easy to clear filters
4. Minimize scrolling
Research & Discovery
While having regular discussions with the product manager, I began a competitive audit of filter patterns to gain a better sense of what patterns users were accustomed to interacting with. I researched over 80 responsive web apps and native mobile apps including healthcare and non-healthcare products. Despite a few edge-case patterns, most of the products followed two basic structures. Firstly, a side panel on the left side of the screen where filter options expand and collapse. The second predominant pattern were top filters on a horizontal strip above the search results.
While having regular discussions with the product manager, I began a competitive audit of filter patterns to gain a better sense of what patterns users were accustomed to interacting with. I researched over 80 responsive web apps and native mobile apps including healthcare and non-healthcare products. Despite a few edge-case patterns, most of the products followed two basic structures. Firstly, a side panel on the left side of the screen where filter options expand and collapse. The second predominant pattern were top filters on a horizontal strip above the search results.
Top Filters were Predominant on Healthcare Products
The majority of health tech products followed the top filters pattern. My assumption was that top filters were more common because they can accommodate more filter categories and are easier to add additional attributes down the road. Also, since they all can live above the search results, they are easier to scan and interact with all.
The majority of health tech products followed the top filters pattern. My assumption was that top filters were more common because they can accommodate more filter categories and are easier to add additional attributes down the road. Also, since they all can live above the search results, they are easier to scan and interact with all.
Similar top filter pattern on Zocdoc and oladoc
Slightly cluttered and difficult to scan, but still a top filters pattern
Anthem top filters pattern with categories looking pretty tight
Initial Mockups Round 1
In order to test the concept of top filters quickly, I put together a very simple prototype. I used patterns from our design system as much as possible with a dropdown component, apply button and selected state. This was all we needed to test the efficacy of the top filters.
In order to test the concept of top filters quickly, I put together a very simple prototype. I used patterns from our design system as much as possible with a dropdown component, apply button and selected state. This was all we needed to test the efficacy of the top filters.
Usability Testing
Together with the research team, we conducted a qualitiative think outloud with 15 participants. We asked them to filter for "provider specialty" and "providers accepting new patients" using the side panel filters and the top filters. Our goal was to determine which was easier to use.
Together with the research team, we conducted a qualitiative think outloud with 15 participants. We asked them to filter for "provider specialty" and "providers accepting new patients" using the side panel filters and the top filters. Our goal was to determine which was easier to use.
Research Insights
93% of participants (14/15) preferred the Top Filter design over the Current Filter design. There was also an average of 20 seconds less time spent on the top filter design versus the side panel.
93% of participants (14/15) preferred the Top Filter design over the Current Filter design. There was also an average of 20 seconds less time spent on the top filter design versus the side panel.
“It was a LOT quicker to filter results with the top filter because I didn't have to keep scrolling up and down the page if I wanted additional filters added.”
“It was a LOT quicker to filter results with the top filter because I didn't have to keep scrolling up and down the page if I wanted additional filters added.”
Participant using the left side filters
Participant using the top filters
Top filters were overwhelmingly preferred.
How would top filters work on myuhc.com?
Now that the top filters pattern had proven to improve usability, I began a deep dive into the interaction patterns of filter categories, filter tags, and dropdown menus. I wanted users to enjoy interacting with the filters by employing useful hover effects, selected/deselected states and have an easy way to quickly view the filter options that they had selected.
Now that the top filters pattern had proven to improve usability, I began a deep dive into the interaction patterns of filter categories, filter tags, and dropdown menus. I wanted users to enjoy interacting with the filters by employing useful hover effects, selected/deselected states and have an easy way to quickly view the filter options that they had selected.
Filter categories
Dropdown menus
Filter tag behavior
Challenges
The transition from side to top filters was a dramatic change for the company requiring a heavy lift on the engineering side. Despite the overwhelming evidence for the efficacy of top filters, there was a lot of resistance from designers and engineers. The product manager and I set up several 1 on 1 syncs with team members to communicate the value that top filters would bring to our users. It took up considerable time but it was necessary to convert stakeholders into advocates for top filters in order to move forward.
The transition from side to top filters was a dramatic change for the company requiring a heavy lift on the engineering side. Despite the overwhelming evidence for the efficacy of top filters, there was a lot of resistance from designers and engineers. The product manager and I set up several 1 on 1 syncs with team members to communicate the value that top filters would bring to our users. It took up considerable time but it was necessary to convert stakeholders into advocates for top filters in order to move forward.
Filter options are shown as tags
Filter categories are replaced with the filter option selected
Usability Testing Round 2
Since there’s been an established preference for the top-filters design, for the second round of usability testing, we wanted to start to understand the interactions of the design to make sure it's viable. Participants were asked to perform the actions of searching by filters and then removing those filters( Top Filter and Current Filter).
Since there’s been an established preference for the top-filters design, for the second round of usability testing, we wanted to start to understand the interactions of the design to make sure it's viable. Participants were asked to perform the actions of searching by filters and then removing those filters( Top Filter and Current Filter).
- 40% of participants (6/15) prefer to have 3 filters displayed before they’re added/hidden to/within the (+1) icon.
- Most participants found filtering their results to be easy, with an average mean score of 6.5 across all 3 tasks.
- The top 3 (out of 11) preferences that participants ranked when it comes to searching for doctors and/or medical care are:
1) Speciality
2) Accepting New Patients
3) Preferred Providers
1) Speciality
2) Accepting New Patients
3) Preferred Providers
High-fidelity Prototype
The result of the research and exploration was a more streamlined way to manage filters. The top filters are more scalable where more categories can be added while improving the user experience.
The result of the research and exploration was a more streamlined way to manage filters. The top filters are more scalable where more categories can be added while improving the user experience.
Preview of filter interactions
The Future
The new filters are set to launch in Q1 2022. I'm currently working with front-end engineers on quality assurance. After launch, we will be monitoring user behavior to track any difficulty in interacting with the top filters.
The new filters are set to launch in Q1 2022. I'm currently working with front-end engineers on quality assurance. After launch, we will be monitoring user behavior to track any difficulty in interacting with the top filters.