Ribbon Health

Designing and developing Ribbon Health’s core search experience and unified provider data API

Hero Image - Desktop view of Ribbon Health search page

Platforms

Web

Amazon Web Services (AWS)

Expertise

UI/UX Design

Design System

Frontend Development

Backend & Infrastructure Development

Data Transformation

Integrations

Interested in learning more?

Send us a message 👋

About Ribbon Health

Ribbon Health is a health care data platform that provides the critical infrastructure that health insurers, medical providers, and digital health solutions need to enable accurate provider directories, reliable referral management, and efficient care navigation. They offer a seamless API layer that integrates into each health care organization's existing workflow to build connectivity across the industry and continuously improve the accuracy of its data.

The Ribbon team had a two core challenges they needed to solve for. One of them was that their platform lacked a search experience to allow users of the platform to find the right care for them. The other was that they didn’t have a single self-serve platform (frontend, API and database) that would unify all of the data provider sources Ribbon relied on for their overall platform. That’s when Lazer was brought into the picture - to design and develop this search and filtering experience and design this unified self-service unification platform.

Full length cross pattern image

Our Approach

Working collaboratively with product folks at Ribbon, we had worked efficiently to solve for the 2 core challenges we were presented with. We knew we need to operate in a highly efficient manner, due to the urgency of the projects, and in a considerate manner ensuring we throughly thought through all edge cases and core user experiences.

Devising the core search experience users yearned from the Ribbon Health platform

Diving deeper with the product team and Ribbon’s core users, we designed the search experience based on certain criteria that they wanted to input. In addition to the standard experience of searching by name of a specialist, users wanted to also search by relevant insurance plans, locations, ratings, distances near them, languages and more. Search results would also become overwhelming, so we additionally needed to create a filtering experience at would let them narrow the results further.

Ribbon Health provider search page

Understand dynamic features - every client is unique

When making a provider referral, each Ribbon client has a different set of criteria and business needs for searching. For example, some companies have preferred search/filter fields that they'd want to highlight in addition to Ribbon's existing fields.

Diving deeper, we learned that Ribbon's API allowed clients to add custom fields and filters that suit their needs. We wanted to ensure Ribbon clients could use these criteria on the front-end as well, without needing extra development effort.

Ribbon Health onboarding process page

Leveraging design systems and components to enable dynamic features

To enable these dynamic features, we created a design and component system across the platform. For filtering specifically, we defined different input patterns according to the filter type. Each filter type had a logic rule (single-select, boolean, etc) and a user interface (UI) pattern that go hand-in-hand. When adding a new custom filter, clients can specify the type of filter and options they'd need - and voila! A working filter with no extra dev work.

Ribbon Health plan search page

States, states, states

This wasn't the only place we leveraged components to speed up development. When showcasing each provider and facility, we built out components for each state which account for the availability of data. It's not enough to just design the 'happy path' flow or pass off screens to a developer. We leveraged component guides to communicate the states of the UI, to help the development team understand what the building blocks of the user experience was and to make it easier for them.

Ribbon Health clinic search page

Leveraging React for a performant and scalable frontend

Once designs were properly in place, we leveraged React to develop the appropriate components that could be reused across the frontend. It led to a highly performant user experience, and ensured that the Ribbon team could carry on with development efforts once Lazer left.

Ribbon Health appointment booking page

Wireframing and designing a unified self-service data provider platform

To solve for Ribbon’s other core challenge, we wireframed and designed a self-service platform that would allow users to unify all of their provider data into a single platform. Think of it an ETL flow for all their existing data sources - creating a unified database which can then be used as an API back towards their own platforms. The new tool would also allow them to enrich their data through Ribbon’s proprietary dataset.

Ribbon Health platform details page

The Result

Working with the Ribbon team was a true pleasure. The challenges they solve for are not at all easy, but they play a crucial role in critical infrastructure healthcare needs. We successfully were able to design and build a top-notch search experience alongside designing a well thought-through data provider unification platform.