Clair Search Results Revamp
Proposed, designed, and built an end-to-end revamp of Clair's clinical search interface, focused on signup incentive and loading states. Free-plan signups rose 34% and drop-off fell 10%.At CaryHealth, we have a product called Clair that harnesses clinical AI. Clair's mission is to make intelligently sourced clinical data accessible to the general public and easy to retrieve without digging for answers.
The user experience is simple -- ask a question and receive a search result. This search result itself is divided into three sections: an answer, a more in-depth summary of the references used in the search result, and of course, the references themselves. This way, the user can take as little or as much as they want, catering to both professionals and non-professionals (like students or parents).
With the launch of Clair a few months prior to this effort, we were bullish about tightening the user experience to patch any interface hiccups or roadblocks.
We also wanted to add more areas of motivation for the user to sign up for a free account (beyond the current benefit of unlimited queries). This way, we could put ourselves in a better position for marketing and sales initiatives in the future.
The Problem
There were a few drawbacks of our original search result UI that we had been mulling over for a couple of months:
01
Major Layout Shift
Our API doesn't come back with a search result immediately — as to be expected! Within our original design, though, we didn't capture well enough the different UI states that come with multiple levels of loading.02
A Lack of Signup Incentive
To drive outcomes, we needed to add more free-tier perks as well as market them to unauthenticated users.03
Vertical & Horizontal Exhaustion
There are two things a user hates: having to scroll too much and having to read across a large horizontal space such as a desktop screen. Unfortunately, both of these issues were prevalent in our original design.
Our old search results experience. Notice the long lines of text that users would have to read across large screens. Loading was also a disjointed experience-sections would pop into existence without any indication.Approach
With these problems in mind, I worked with my designer to get some solutions set up in Figma. While my designer tackled problem #3 on our list, I focused on the other two objectives of minimizing layout shift and creating motivation around free plan signup.
Tackling Problems: 'A Lack of Signup Incentive' & 'Vertical & Horizontal Exhaustion'
To start out, I tacked down some potential ideas for us to incentivize signup:
Our main objective here was to pick some low-hanging fruit: efforts that would be easy to implement with a sizeable user impact. With our long-standing objective of keeping Clair user-friendly for both professionals and non-professionals, we focused on efforts that would benefit both of these user groups. After a conversation with leadership, we picked two efforts from the bunch:
01
Tooltip Keywords
When authenticated users search, the result will populate highlighted words that, when hovered over, provide tooltips with definitions. This way, users can exit their Google tab and stay on Clair for any necessary definitions.02
Follow-Up Questions
When authenticated users search, a few follow-up questions appear that add depth to the user's search. Upon clicking one of these follow-up questions, a new tab will populate its search result. Both professionals and non-professionals can utilize this feature to dig deep into a topic. This is helpful when the user isn't 100% sure what to search for when they query Clair.After our designer finished up her revamp of the search result layout, I got to work designing for the above two efforts.
All in all, we landed on the below design:
The new layout from our designer (Solution to #3, "Vertical & Horizontal Exhaustion") with my follow-up questions and tooltip keyword initiatives added to the mix.The Problem "Vertical & Horizontal Exhaustion" was a tricky one. In order to decrease on horizontal reading fatigue, more vertical space would be needed. Our solution was to add a functional sidebar with a menu to the right side of the screen. When the user clicks on a button from this menu, they are automatically scrolled down to the corresponding section; this not only shows the user that these sections exist, but also gives them a quick navigation tool to use.
Above, you can also see the Tooltip Keywords and Follow-Up questions in action.
Tackling Problem: 'Major Layout Shift'
With the solutions to issues #2 and #3 designed and approved, all that was left was to tackle issue #1: the layout shift apparent with multiple API requests. To add to the madness, these requests were sometimes chained and all with different loading speeds.
We needed to give users a visual indication that information will flow in, just not yet.This was not only apparent within the search result itself, but also in the sidebar in the image above. Loading skeletons fit the bill perfectly for the smaller pieces of data on the sidebar — there's a lot of data over there, and utilizing these placeholders kept data from popping out of nowhere. Spinners for the larger sections were chosen to give the user a more sophisticated visual of exactly what section was loading in.
See the below video for a visual of how I tackled our layout shift issue.
Outcomes
Upon design approval, I updated the UI and hooked up new APIs for our tooltip keywords and follow-up questions. This initiative took three weeks total: two weeks to design and one week to develop.
The above video shows and authenticated user's experience. When asking a question, the page populates sequentially, utilizing skeletons and spinners to cater to the amount of data loading in. At the same time, follow-up questions and keywords begin to populate, allowing the user a one-stop shop for the information they need.
This was the first effort at CaryHealth I took from concept to production myself: my proposal, my designs for the signup and loading experiences, and every line of the front-end code. This fact made conversations more streamlined and tasks more efficient, and as a result, we were able to ship far more quickly.
Our overhaul of the search results section was a major success; free plan signup increased 34% over the next two months and drop off from the search result page decreased about 10%. This meant that those who visited stayed.
I'm very thankful for the chance to work on this initiative — Clair is an awesome tool that I use in my daily life (WebMD, who?), and owning a piece of it end to end is the kind of work I want more of.
Check out Clair here!