Handl Health is a startup prioritizing price transparency in healthcare. I designed their MVP product that allows users to search and compare prices of care before booking an appointment.

Final mobile designs for Handl’s MVP home feed

The Challenge
Shopping for healthcare is a new concept for users, one that’s confusing given the lack of information about variability in US healthcare costs. For users to feel confident using Handl Health, they need to understand how Handl can help them make better decisions about their healthcare.

The home feed needed to teach users the value of Handl, help them track their upcoming appointments, and visualize their healthcare spending.

Role
Lead designer

Responsibilities
I was responsible for the end-to-end design of the home feed for Handl’s MVP which included refining requirements and scope, defining the feed’s IA, UX/UI design, testing and delivery.

Timeline
2 sprints (4 weeks), part-time

Tools
Figma, FigJam, Miro

HMW make a home feed that feels dynamic and personalized without having the development capacity to fully do so?

My first step was to review the requirements to outline the features and content that would be accessible from the home feed. This surfaced questions around what was feasible given our timeframe and limited engineering resources, so I aligned with the product manager on the scope before moving forward. To keep the team aligned while working, asynchronously, I documented our decisions in Figma along the way.

How Might We…

To anchor and guide my process, I generated a few How Might We statements that would serve as my north stars.

Determining information architecture: I outlined user scenarios for each content bucket in the home feed to create a sense of personalization

Since a truly dynamic, personalized home feed was out of scope for our MVP launch, I wanted to identify a finite set of content that could be delivered based on basic logic so we could still show users relevant information based on their level of engagement with Handl, upcoming appointments, and healthcare spending.

This is also where I started to identify how the home feed would overlap with our notifications feature. It became clear we would need to determine how these two features would interact with one another to create a consistent experience throughout the user journey.

Experimenting with existing patterns in the Handl app revealed the need for new card styles

I was also building our first design system at this time, and as we continued to define our product-market fit, it was crucial to revisit our design choices and ensure the user experience was keeping pace with the product’s direction.

So, I decided to audit the existing card styles and create lo-fi wireframes to experiment with how current patterns could meet the needs of the home feed.

While some of our existing styles could support secondary functions in the home feed, we didn’t have a strong call to action style to engage our users. The lo-fi wireframes were text heavy and felt dense, so I knew we needed a new UI pattern to make the home feed more user friendly.

The intersection of IA and UI: Defining card styles for a consistent, learnable experience

Before ideating on the design for the card styles, I worked with our design advisor to determine the types of cards we would need based on the IA of the home feed. This created a consistent and learnable experience while reducing development time.

This collaboration session also led us to eliminate the “Up Next” section which was competing with our notifications feature. Though the prime real estate made it a good location for the most urgent action items, the duplication between home feed and notifications wasn’t the best use of our resources for the MVP. We also knew users would be accustomed to centralized notifications in an app and would know to utilize this feature to see a stream of updates about their account.

Competitive analyses spurred my creativity, and I defined 3 new card styles to support CTAs, education, and data gathering

Next, I wanted to see how other applications focused on explaining complex topics leveraged home feeds to engage users. So I looked at Credit Karma and Mint which gave me new inspiration to ideate on our card styles.

I defined new card styles that utilized the same components in different combinations: Header (1-3 lines depending on style), Body text (2-3 lines), Image/Icon, and Primary button. This created consistency throughout the home feed while still allowing enough variation that each card could serve a unique function.

At this point I brought in our content writer as well so she could start working on the variants of card content that would fit within the “dynamic” model I’d designed for the home feed.

Usability testing validated feature discoverability and revealed users’ desires for local navigation within the home feed

I wanted to ensure we tested the home feed before going any further, so I gathered 5 participants with a range of ages, family structures, and levels of experience with the US healthcare system.

Our goal was to learn if the home feed met users’ expectations and instilled confidence in using Handl. We asked them to explore the home feed while sharing their thoughts, then provided a series of tasks related to appointment management.

The findings validated that we were on the right track to making users feel confident using the app and giving them information they needed to understand their health insurance. The tests also uncovered opportunities to better meet our users’ needs around home feed navigation, hierarchy, and UX copy.

Final design allows users to tab between summaries of primary pages while maintaining a feed for them to explore Handl’s services and learn about their insurance

I iterated based on the usability findings to create a tabbed design that would allow users to jump between summaries of the primary app pages at the top of the home feed. We also prioritized appointments as the most important content in the home feed based on feedback, rather than spending data.

PREV: embld

Next: FLASH