Client
A Fortune 500 financial services company
Duration
3 months, 2022
Team
PMs, Researchers, Devs
Role
Product Design
Research
Enhance the search and filter features of a healthcare provider location-finding tool.
Overview
The Context
CareFin, a top healthcare credit card company, is a subsidiary of a Fortune 500 financial services group. It provides 0% interest healthcare financing options for treatments and procedures usually not covered by insurance.
The Locator tool on its marketing website enables prospective customers and cardholders to easily explore and find locations and profiles of healthcare providers and retail partners that accept CareFin. This tool ranks as one of the most frequent features on the CareFin marketing site.
The Locator tool on its marketing website enables prospective customers and cardholders to easily explore and find locations and profiles of healthcare providers and retail partners that accept CareFin. This tool ranks as one of the most frequent features on the CareFin marketing site.
The Goal
The primary goal of the redesign is to drive conversion and encourage card reuse by enhancing the user experience and incorporating new features.
Final Design
Instant result display after launch
The new locator landing page automatically displays nearby locations for users to explore without any initial input required.
Before
After
Convenient search edit
The user can now simply start a new search from the persistent top module to see if their provider accepts CareFin, avoiding the clutter of a messy dropdown menu.
Before
After
Simple and easy-to-access filters
New design is data-centric. The top two popular filters - Category and Distance filters are brought to the persistent action bar for easy access.
Before
After
Easy-to-use map view
For map lovers, new Locator tool provides a more usable map view with higher accessibility and optimized location card reel design.
Before
After
Extended location profiles
Users can learn more about the provider locations from extended profiles and book an appointment without leaving the tool.
Before
After
Consistency across breakpoints
The user can experience a consistent interface with the same features regardless of devices.
Research
1. Define the design approach
From site analytics, I learned the majority of users use Locator from mobile, however, the current design took a desktop-first approach, causing a compromised mobile experience and inconsistency across devices. Given this context, I took a 3-step design approach:
- Address mobile UX problems and identify mobile opportunities first.
- Scale the mobile design for larger screens.
- Make optimizations specifically for desktop.
2. Understand user tasks and IA
I analyzed and listed out the information architecture and key features of the current locator tool. I also mapped out different types of users, their goals, and how they interact with the current locator tool to achieve their goals.
3. Conduct usability inspection
After that, I used common UX design principles to holistically inspect the usability of Locator tool and created a report for the team to review.
4. Frame UX opportunities
Along with the team and client, we identified five key UX opportunities. Extended profiles, though valuable, were deemed secondary due to technical complexity.
Design Execution
Taking the filter redesign process as an example to share my design thinking.
The design problem: Inconvenient and unclear category-related filters
Category filter is the most popular filter with 11.8% click rate. It shows a list of healthcare provider categories that accept CareFin. Each category has a set of sub-filters for users to scope down results, such as specialties, languages, and online locations.
On mobile, category-specialty filters have 2 problems:
On mobile, category-specialty filters have 2 problems:
- Inconvenience: User has to open a messy mega dropdown to select or change filters, and all filter options are not exposed by default, causing inconvenience to use.
- Poor clarity: The parent-children relationship of category filter and its sub-filters is unclear, causing more cognitive load. And there’s no applied filter indicator.
Reshape the filter system: Structural simplification via prioritization, with scalability in mind
The current filter system is a mess. To make category-related filters easy-to-access, I removed the mega dropdown design to put the entrance of category filters directly on Result page. In addition, I put Distance filter on Result page due to the second highest click rate of 8.22%. Considering future scalability of filters, the sort feature and any new independent filters can be put in “More” action in the future version.
Multiple approaches to make category-related filters simpler and clearer
I explored 6 wireframe versions on how to design a simple category-related filter with clear parent-children relationship. Proposals vary in the amount of pages, if has nested elements, and whether options are exposed by default.
In terms of design proposal evaluation, The ideal design proposals should use single filter page and expose all filter options with a plain structure. However, trade-offs must be made due to limited mobile screen real estate.
I believe a multiple-page design is better than single page with a nested structure, because the user might feel overwhelmed about the huge amount of information on one single page. It’s better to let them focus on one task per page. Based on that, Proposal D and E were moved forward as they use a plaint structure and keep category filter options by default.
In terms of design proposal evaluation, The ideal design proposals should use single filter page and expose all filter options with a plain structure. However, trade-offs must be made due to limited mobile screen real estate.
I believe a multiple-page design is better than single page with a nested structure, because the user might feel overwhelmed about the huge amount of information on one single page. It’s better to let them focus on one task per page. Based on that, Proposal D and E were moved forward as they use a plaint structure and keep category filter options by default.
Business and tech needs impacted the final decision
After meetings with developers, we decided to move forward with Proposal E with the sidebar overlay because of CareFin’s SEO strategy. Each category filter option needs to be an individual page in order to be findable by organic search. However, Filter functions in Proposal D can only be achieved by Javascript which doesn't work well for SEO.
And as business stakeholders wanted to highlight retail partners in Locator, I extended the concept of Category filter. Now the category filter is comprised of both a list of types of care and a list of highlighted retail partners.
And as business stakeholders wanted to highlight retail partners in Locator, I extended the concept of Category filter. Now the category filter is comprised of both a list of types of care and a list of highlighted retail partners.
Validate through usability test
Our team tested my Locator redesign. For new filter design, findability is what we want to test for. We tested two tasks with 8 users:
- Given a specific healthcare specialty, can the user scope down results within it through the new filter design?
- What would you do if you want to broaden the result range?
Most participants completed tasks without assistance and shared positive feedback on new filter design. Besides, they have more filter ideas like if providers is accepting new patients, ratings, and insurance accepted, which can be easily incorporated to our scalable filter structure.
Design for edge cases
Desktop filter design is consistent with the mobile version. After the user scoped down results using filters, they may find:
- No result within the given distance range. Locator will automatically broaden the distance range to display more remote results. A popup will appear to remind the distance parameter has been changed.
- No result within the maximum distance range. A message will be shown to recommend removing some applied filters.
- Online results only. The map view will be disabled.
