How Clearstep simplifies the experience of finding care online | Figma Blog (opens in new tab)

Clearstep built a symptom-checking and care-routing platform to make finding healthcare less stressful and more actionable. The platform helps users determine whether they need care, identify suitable providers based on location and insurance, estimate costs, and schedule appointments. The team relied on iterative design, shared styles, and real-time collaboration in Figma to manage complex patient flows and customized health-system branding.

Designing a Complex Healthcare Experience

• Clearstep launched its platform in 2018 to guide patients from symptom evaluation to appropriate care.
• Its features include:
  • Symptom checking and care recommendations
  • Provider matching based on location and insurance network
  • Insurance eligibility checks
  • Cost estimates
  • Direct appointment scheduling
• Because the product influences thousands of patients’ healthcare decisions, the team prioritized both speed and accuracy in design.

Testing Information-Dense User Flows

• The team iterated extensively on how users move through symptom checking and compare care options.
• Figma’s Smart Selection made repetitive tasks, such as reordering care options, faster through drag-and-drop editing.
• Typography and button copy were refined through user testing because small changes affected navigation and decision-making.
• Automatically resizing button text allowed the team to test different wording efficiently.

Managing Custom Branding

• Clearstep licenses its platform to health systems, requiring white-labeled versions with different customer branding.
• Designers created new Figma files for each client and quickly added custom color palettes.
• Color Styles enabled multiple designs to be updated at once.
• Approved styles could be published to a shared Library so every editor worked from the same branding system.

Collaborating Remotely

• Figma’s multiplayer features allowed Peter Garber and Annie Kramer to edit, review, and improve designs simultaneously.
• Shared text and color styles kept design and engineering work synchronized.
• Prototypes could be shared through browser links, allowing the broader team to review changes in real time.
• Named, color-coded cursors, observation mode, and comments reduced reliance on screen sharing and made feedback easier to track.

Moving from Design to Implementation

• Engineers used Figma’s Color Styles, Code panel, spacing labels, and export tools to translate designs into working interfaces.
• Developers could access assets directly rather than relying on manual downloads or lengthy handoff conversations.
• Centralized styles helped preserve consistency between the final designs and implementation.

Clearstep’s approach shows how collaborative design tools can help healthcare teams simplify complicated workflows, support customer-specific branding, and move efficiently from tested interface concepts to implementation.