United Healthcare
Type-ahead enhancements
United Healthcare
Type-ahead enhancements
Over 30 million members use the search function on United Healthcare's insurance website to search for a doctor. I worked with the product and development teams to improve the search functionality to streamline the way users find the care they need.
Over 30 million members use the search function on United Healthcare's insurance website to search for a doctor. I worked with the product and development teams to improve the search functionality to streamline the way users find the care they need.
Role: Product Designer
Platform: Responsive Web
Year: 2021-Present
The Problem
When users typed a keyword into the search box, it wasn't always clear what was and wasn't part of the actual search query in the list of suggestions. For example, when typing in "chi", "Pediatrician" would appear as an auxiliary category but there was no indication on what words matched. I was tasked to explore ways to let the user know what words in their search query matched for every suggestion provided.
When users typed a keyword into the search box, it wasn't always clear what was and wasn't part of the actual search query in the list of suggestions. For example, when typing in "chi", "Pediatrician" would appear as an auxiliary category but there was no indication on what words matched. I was tasked to explore ways to let the user know what words in their search query matched for every suggestion provided.
When typing in "chi", "Pediatrician" would appear as an auxiliary category but there was no indication on what letters in the search query matched.
My Role
I was the principle designer for Typeahead exploration, re-design and user testing.
I was the principle designer for Typeahead exploration, re-design and user testing.
Listing the Opportunities
As I began my research, I discovered other opportunities to improve the type-ahead search experience. I reached out to the product manager and let them know that I would be providing 2 designs: 1 that stayed within the scope of the original ask, and another that would be more of a dream state.
I began by writing out a list of opportunities that could be further explored. I used this list as a reference when conduction the landscape audit so I knew what I needed to understand at a deeper level.
As I began my research, I discovered other opportunities to improve the type-ahead search experience. I reached out to the product manager and let them know that I would be providing 2 designs: 1 that stayed within the scope of the original ask, and another that would be more of a dream state.
I began by writing out a list of opportunities that could be further explored. I used this list as a reference when conduction the landscape audit so I knew what I needed to understand at a deeper level.
Areas to explore:
Areas to explore:
- How can auxiliary categories be included in the layout so users can easily determine what is and isn’t part of the actual search query suggestion
- Is there an opportunity to surface information using the empty space?
- How can the typeahead content be laid out in a way that is more easily scannible?
- What UI can be used to bring more focus to the typeahead area?
- Does the scrolling behavior help or detract from the content? Increase/ decrease cognitive load?
- How can micro-interactions be used to improve the experience?
- What size test is best for legibility? What is the best balance between legibility and fitting the right amount of content?
Research & Discovery
I audited over 60 search patterns in both healthcare and non-healthcare products and took note of their solutions for each of the seven items from the list above.
I audited over 60 search patterns in both healthcare and non-healthcare products and took note of their solutions for each of the seven items from the list above.
I collected screenshots of products that solved similar problems.
Target uses indented arrow icons to surface the auxiliary categories
Great use of the empty space to surface high level information
Iterate
I explored and iterated on different UI patterns, interactions, layouts and color to get an idea of what changes might improve scannibility.
I explored and iterated on different UI patterns, interactions, layouts and color to get an idea of what changes might improve scannibility.
Auxiliary data in italics to show visual distinction from the actual search query suggestion
Indented auxiliar data
Use of indented arrow icons
Exporation on the use of empty space
High-level details surface on hover
With provider icons
Usability testing
We are scheduled to start the first round of usability testing in October 2021.
We are scheduled to start the first round of usability testing in October 2021.
- Do users find it easier to scan when the differences or similiarities to the actual search query or in bold?
- Is there a difference in usability when the type-ahead dropdown is connected/ not connected to the search box?