UX

Clara Health App

I planned, designed, and iterated Clara’s application to solve the business goal of getting patients signed up for clinical trials.

Client

Clara Health

Role

Head of Design

Tools

Photoshop, Illustrator, Figma

Overview

The Clara app encompasses multiple projects over my year-long tenure at Clara. It included numerous features such as building the app from the ground up, filtering, information architecture, the onboarding experience, and more. As the sole designer at Clara, I was responsible for both product management work and UI/UX design. By the time I finished my part on the project, we had significantly increased signups on our platform, with the end goal being ultimately enrolling patients in clinical trials.

I designed the Clara search page with a primary focus on filtering capabilities and precise search results. One of my most important goals to achieve with this design was to refactor backend data such that it was congruent with user-facing filters. We needed to ensure that there would be no internal inconsistencies between study data and filters because certain phases and study types were incompatible. We did not want to allow users to select these mismatched filters, which would result in a frustrating user experience. However, after these filters were first implemented, I discovered that users did not know what specific clinical trial jargon meant, such as phase or type.

Before a new filter redesign could be done, I used this information to focus on funneling users into a signup process that would address this issue. I designed a new signup flow that featured a much more user-friendly onboarding process to return search results based on their user profile; this is featured further on this page.

Clara search results page

I opted to move the filters into a full-screen menu for responsive mobile to keep the focus in one place and avoid bugs. The left screen is an older style of study listings, and the rightmost screen is the new style.

Clara trial search mobile page

When I first designed the study details page, I found that the primary challenge was to display study information clearly. The clinical trial descriptions as written by researchers were filled with jargony, scientific, and complicated words that most people would not understand. Part of the reason why it was so unreadable is that the Institutional Review Board (IRB) requires specific language within the clinical trial context such as "human specimens" instead of "patients" or "participants." As a designer, accessibility and readability are central tenets of usability, and I knew that our users would find this to be an obstacle.

To address this language limitation, we opted to describe the language surrounding the data in accessible terms. We also chose to rephrase the title and short description of our top 100 studies based on search in a way that was more patient-friendly.

The studies also included features such as saving studies, mapping the clinical trial locations, and sharing studies with loved ones.

Clara trial details page

When I discovered from filters that patients do not benefit from restrictive clinical trial language (such as phase or trial), I designed an onboarding process to walk users through steps to fill out a profile. By using a profile wizard, a user could select possible clinical trials without exposure to complicated language and still find relevant results. This approach allowed accurate clinical trial matching while enabling users to make informed choices.

Signup screenOnboarding process

The patient's dashboard included saved studies as well as messages and notes on their studies. If the researcher were not on Clara’s platform yet, the messaging system would relay directly to Clara.

Patient dashboard zero statePatient dashboard with studies

The patient profile reflected all their basic information as well as their onboarding information.

Patient profile

This is where I included Clara’s referral link. If another patient signed up with a referral link, then both people would receive an incentive. This was an excellent way to enhance the efficacy of Clara’s grassroots growth strategy.

Patient settings

This is Clara’s component library, which ensured that all design elements were consistent within Figma and across Clara’s app.

Component Library