AMWELL
Filtering Feature for Patient App
Overview
Amwell’s direct-to-consumer telehealth app offers patients virtual health visits with providers.
I created a filtering feature to improve the provider selection process with an eye towards usability and consistency across interfaces. The constraint was designing a filtering feature that would blend within the current experience so that it could meet the release deadline.
Company
Amwell
Role
Individual Contributor — UI/UX Design
Team
Agile team consisting of PM, Design, and Eng. Presented designs regularly to our executive sponsor.
Duration
August - November 2020
Business issues highlighted need for filtering
Some employer groups had primarily ESL employees who were not signing up for their telehealth offering because the white label app did not support a language filtering function.
Some health plans had providers who spoke multiple languages. Without a filtering feature, plans would have to create a practice page for every language type.
User interviews with patients confirmed need for filtering feature
Through interviews conducted by research, I learned that the majority of patients mentioned the need to filter when asked open-ended questions about provider selection. When presented a prototype, all patients indicated the need to filter. Regardless of demographics, majority of patients consistently wanted to search by gender, language, and specialty.
Audited original experience to understand pain points
I conducted an audit of the current experience of provider selection to understand the pain points.
Visit Now Flow
Patients could automatically match with the next available provider through the “See Next Provider” CTA or choose a specific provider from the list of available providers.
Appointments Flow
Patients could schedule a visit for later and browse through a list of providers on a specific date.
Original mobile experience
For both mobile flows, the experience of finding information about providers involved tapping providers one at a time to view details in a new page.
Original web experience
For all web flows, the experience of finding information about providers involved clicking providers one at a time to view details in an overlay.
Specifically for web, the scheduling visit flow was further segmented into two sections. Patients could either select the date first and view the profile of provider or browse through providers first, select an appointment, and view their profile.
The audit showed finding providers based on gender, language, and specialty was cumbersome
Since there was no ability to filter, patients would be faced with a mixed list of providers that may meet preferences. Not only did the original process demand a high interaction cost, but the cognitive overload of comparing a lot of choices would also increase the time to make a decision. The following scenarios highlight frustrations patients could face.
Patients may feel more comfortable seeing a provider matching their own gender, but would have to browse through a mixed list of genders.
Patients who prefer to see a provider that spoke their language would have to flip back and forth between the list of providers and provider details in a new page or overlay.
Patients may want to view a specific provider type. For example, a patient who is looking for care for their children is likely to search for pediatricians or family physicians. They would find it frustrating to browse through a list of providers across all specialties.
Turning insights into mobile solutions
In all wireframes, I placed the filter icon below the “See Next Provider” CTA so that patients would understand filtering applies to everything except the automatic matching flow.
Opt 1: Filter bar & side panel overlay
The filter bar could only fit a few categories before a patient had to scroll to view other categories. Additionally, a patient could only view selection options within a filter category one at a time.Opt 2: Filter icon & inline panel overlay
The inline panel overlay was confined to a small area, which limited content view. To view additional filters, patients would face friction in the need to constantly scroll.
Opt 3: Filter icon & fullscreen overlay
The fullscreen overlay maximized space and made it easy for patients to read content. This interaction pattern offered the most scalable solution to accommodate new filters in the future.
Ultimately, I chose option 3 as it had the lowest interaction cost and met the criteria of simple and intuitive design.
I re-used the same pattern for the appointments flow, but I explored ideas on how to display the filter feature in relation to the date picker. The team agreed on separating out the functions as shown in option 1 because the date selection was what drove the display of provider list options. Since this was an important feature, the product manager asked to keep the date picker visually prominent.
After wireframing, I moved onto designing the UI. I applied native styles so that the mobile designs could be a familiar, intuitive experience for patients.
At the time, a new app product called Virtual Primary Care was released. There were efforts to reskin our core product to align with Virtual Primary Care. So, I also strategically applied Virtual Primary Care styles to this filtering feature.
Filtering on web automatically updated results in real time to help patients find providers quickly
Due to the constraint of a tight deadline, I created wireframes for web in high fidelity to speed up the process. The initial proposal was re-using the filtering pattern from the practice selection page.
However, developers expressed concern with implementation. The practice selection page was built responsively so that side bar filters could adjust accordingly if the page was reduced to a smaller viewport. But, the provider selection page was not built responsively. Since this was a limitation, I moved onto creating alternative filtering patterns that could live within the parameters of the content area.
I re-used the mobile pattern on web for consistency. Since there was more real estate on web, the icon on mobile translated into an inline filter bar with exposed categories that dropped down to menus. This web pattern could live within the content area and developers expressed no concern during a review.
Shortly after, developers notified the team about difficulties with implementing the drop-down menus. The product manager was concerned about meeting the release deadline, so I was asked to come up with a back-up plan while developers were troubleshooting. With a tight turnaround of a few days, I created two other options.
Inline accordion filter chip
I designed an accordion pattern to expand and collapse the filtering functions, but incorporated chips as the mechanism to filter. Developers confirmed this option was feasible and achievable within a tight deadline. However, the cons of this approach was that it did take up more real estate.
Inline filter bar & overlay
I designed the same chips pattern from the original plan, but the chips would trigger an overlay instead of a drop-down menu. This option had the most cons because the overlay added another step of interaction and friction for patients.
Luckily, we were able to move forward with the original plan of using chips with drop-down menus because our developers were able to add more front-end resources and came up with a technical solution.
Maintaining parity of web style with mobile ensured consistency
Similar to applying Virtual Primary Care styles for mobile, I applied these to web as well alongside our styles from core web kit.
Creating components allowed for scalability & consistency
I designed the components for the chip and drop-down menu so that they met WCAG 2.0 standards. Additionally, I documented guidelines so that developers could easily understand the different states of chips and how they behaved with drop-down menus.
Filtering feature improved consumer experience & met client needs
Launching this filtering feature was a huge win for our team as it was met with immediate satisfaction from a previously frustrated client and we were able to keep their business as a result.