Consumers have come to expect an intuitive, user-friendly experience in industries like retail, transportation, and banking, but healthcare has fallen behind. Finding the best next steps for care when you’re sick has historically been an overwhelming task.
That's why Clearstep set out to overhaul the healthcare experience—making it actionable, intuitive, and comforting.
Below, Peter Garber, one of Clearstep's co-founders and Head of Design, and Annie Kramer, VP of Product Engineering, share how they built their symptom checking and care routing platform: testing user flows, managing custom branding, and refining text and color styles, all while keeping the development team up to date.
Think about the last time you didn’t feel well and Googled your symptoms. What were the first thoughts that came to mind? If they were anything like the feelings of dread, uncertainty, and anxiety that most people experience when they search for health advice on the internet, you’re not alone. Finding the best next steps for care when you’re sick has historically been an overwhelming task. That’s why we at Clearstep set out to overhaul the experience.
In 2018, we shipped a symptom checking and care routing platform, enabling patients to determine whether or not to seek care and what type of healthcare provider to see for their symptoms. Along the way, the team added functionality for intelligently pairing users with convenient care resources (accounting for a user’s location and insurance network), generating cost estimates based on the user’s insurance plan, and scheduling care right from the Clearstep symptom checking platform.
Working with a small team on features that affect thousands of patients and their healthcare choices is no small undertaking, which is why speed and accuracy of our design process is instrumental to our success. There’s a ton of important resources and features for us to show and we need to get the experience right every time.
Tons of information, no room for errors
Building all the functionality we needed—symptom checking, provider matching, insurance eligibility checks, cost transparency, scheduling—in one experience required multiple iterations. The team was constantly thinking about how to guide the patient through symptom checking and comparing relevant care options in a way that felt actionable and intuitive.
While perfecting the user flows took quite some time, features like Smart Selection made monotonous work simple; reordering care options in the symptom checker results view, for example, was as simple as dragging and dropping.
Typography and text editing also required multiple rounds of iteration and user testing. While some differences in the presentation of headers and body text seemed subtle, they ultimately affected how users navigated symptom checking and evaluated care options. Button text automatically resizes, so we could easily test different copy options, ultimately saving time for other design tasks that require a higher cognitive load.
Clearstep licenses its symptom checking and care routing platform to health systems, enabling their patients to navigate care resources. In doing so, we often produce briefs to showcase a white-labeled version of our technology with customer branding. We have numerous customers requiring different color palettes, so we have to quickly build custom implementations.
When Peter shares a client brief, he creates a new Figma file in the team’s workspace and can quickly add the brand’s colors to the document colors. If he needs to adjust colors on an advertisement or mockup, he can make multiple changes at once with Color Styles. If he likes the way those styles look, he can add them to the file's Library so all editors have access.
Working remotely, together
With Figma’s multiplayer functionality, Annie can work on handoff while Peter edits designs. She can jump in and flag opportunities for UX improvement or edit designs directly. If we agree on a change to a file’s text or colors, Peter can edit and publish those styles so everything stays up-to-date for Annie whenever she pops back into the file. Once we’re ready to share with the rest of the team, Peter can create a link to the prototype so they can see changes in real time, right in their browser.
Working remotely always presents a unique set of challenges, but color-coded and named cursors allow team members to provide feedback without having to screenshare and present over a video call. When Annie’s walking through a feature, Peter can click on her avatar and go into observation mode to follow along.
Commenting also streamlines feedback. Peter can review comments one by one and address the feedback by either responding to the comment itself or resolving it and making a change to the UI.
From design to implementation
Once the symptom checker and care routing designs are refined and finalized, it's time for to implement those designs. Features like Color Styles, the Code panel, and labels specifying offsets between UI components all help Annie and the Clearstep engineering team bring the designs to life.
This process allows us to avoid clunky conversations about transferring and downloading the assets used in designs. With Figma’s export functionality, Annie and team can maintain their workflow, accessing assets on the fly as they implement designs.
Accessing healthcare should be easy
Navigating healthcare should be simple and intuitive. With Clearstep, our hope is that consumers can spend less time worrying and searching the internet for answers, and more time getting resources and guidance. We’re excited to keep building on our platform to help people find the right care when they need it most.
You can check out more about our customers here, or get in touch with a product expert.
Related Content
