Finding Care
Team Members: UX Writer, Product Manager, Front-end Dev + Me
My Role: High-fidelity prototype, UX research
Tools: Figma, Maze
OVERVIEW
B.well Connected Health is a platform that offers consumers a comprehensive view of their health records. B.well consolidates all of your and your loved ones’ health records into a single platform. Currently, B.well is seamlessly integrated into systems like Walgreens, Samsung Health, Blue Cross Blue Shield, and other health systems nationwide.
This project enhances the part of the application called Find Care, which allows users to schedule doctors’ appointments. Recognizing the importance of convenient online booking, we provided patients an easy way to find the care they need and manage their appointments through the portal, including scheduling, canceling, and rescheduling.
PROBLEM STATEMENT
In the current Find Care section, patients can only search for different types of doctors within the health system. However, once they find a doctor, they have to call in order to schedule an appointment. This is problematic because patients want to be able to schedule, manage, reschedule, and cancel all their appointments directly through the app, keeping everything in one place.
To reiterate, I will focus on the provider detail card on the search page.
UNDERSTANDING THE OPPORTUNITIES
My first goal was to understand the opportunities we have to make this product enhancement successful. Here is what I found:
85% of consumers call to schedule their appointments.
Patients want to see when their provider is available so they can find a convenient appointment time.
80% of patients prefer to schedule their appointments online.
Health systems aim to foster loyalty by offering a convenient scheduling experience.
Health systems can reduce administrative costs significantly by shifting to online scheduling. One health system estimates savings of $3-7 per online appointment by eliminating the need for front desk staff to handle scheduling tasks.
Implementing an online booking system can reduce no-shows, although specific reduction percentages may vary.
CURRENT UI ON THE SEARCH PAGE:
Displayed on the card (image on the right):
Provider image (if available)
Provider name
Provider speciality
Distance from the user’s home location
Favorite provider option
Provider rating
Call to Action (CTA), there are only two actions
Call to book
Book an appointment
Tags
PCP (Primary Care Provider, added via a toggle on provider detail page)
Best match (based on the client's preferred providers)
In-network (matches with user’s insurance if connected)
Client’s health system logo indicating provider affiliation
The goal of a search results page is to provide users with essential information upfront, while more detailed information, such as the medical school attended by the provider, is shown on the detail page. For example, if the provider has more than one location, we will only show a single result for that provider based on their search criteria, leaving the other locations to be shown on the detail page.
The goal of a search results page is to provide users with essential information upfront, while more detailed information, such as the medical school attended by the provider, is shown on the detail page.
WHAT IS MISSING?
Here is a list of items missing that could potentially be added to the existing card:
Provider’s address
Provider’s phone number
Criteria matched (based on the patient’s search inputs)
Adding tags for “Booked with before” and “Upcoming visit”
**Providing available appointment slots for each provider is something we would love to do as a company. However, since our company uses Epic for scheduling, we are unable to pull all the data upfront to provide to users.**
After reviewing the current UI and what can be potentially added, I listed some questions to get an understanding of what would be of value to the user:
How much detail is too much detail?
What information does the patient need on the search page to schedule an appointment with the provider?
What if the doctor has multiple practice locations?
What if the provider lacks sufficient detail?
Should we accept the content as is at this stage?
Do we want to display available appointments on the card?
Can we have timeslots available?
IDEATING
I started creating/updating cards by designing the provider detail page, the provider detail card on the search page, the scheduling flow, and the upcoming and past appointment cards. I did it in this order because the provider detail page has the most information, giving a starting point with all the information that would go for a provider. From there, I could extract the main information to be displayed for the search results. I then reduced the information needed on the scheduling flow.
While adding the scheduling flow, we needed to incorporate sections for upcoming and past appointments. Our goal was to allow users to easily manage their appointments and view summaries of their visits provided by their doctors.
For my portfolio, I will focus on the provider detail card on the search page.
As you can see, the original version lacked sufficient information for users to confidently book with a provider. Adding necessary information increased the size of the cards, making only one card visible above the fold. This posed a challenge because we needed to find a solution that balanced the need to show users many searches while minimizing unnecessary clicks.
However, recognizing that scrolling is a common user action or understanding that it’s acceptable not to display more than one card above the fold can enable users to book appointments directly from the search page.
There are minor differences between V2 and the final version.
I aligned the logo/heart with the provider name.
Since the tags “Upcoming appointment” and “Past appointment” appear less during searches, I began stacking the cards with only one tag on them, leaving the rest without the tag. I realized the unused empty space was prime real estate that I hadn’t utilized effectively. This empty space didn’t give users a visual break; instead, it created unnecessary breaks and awkward transitions between the cards.
Changing the rating colors from brand color to yellow/grey provided a distinct visual cue.
Adjusting the spacing from 8px to 12px within our 4px grid system allowed for visual breathing space and improved readability.
FINAL DESIGNS & OUTCOMES
OUTCOMES
Decreased reliance on phone scheduling: The redesign led to a significant drop in the number of consumers calling to schedule appointments, making the process more efficient for both users and health system providers.
90% reduction in no-shows: Implementing the online booking system resulted in a 90% decrease in no-shows. This greatly improved appointment attendance and user satisfaction since users could easily be reminded of upcoming appointments and reschedule them if need be.
70% increase in conversions: Revisions to the search results page boosted the conversion rate by 70% by making it easier for users to find and book appointments directly online. Users greatly preferred the online appointment management experience, as opposed to handling everything over the phone.