Yourcopay

Copay puts honest, real-time healthcare pricing in your hands — so you can find fair care, defend your bills, and stop overpaying. One platform. Two products in your hands today. No more cost confusion. View at: www.yourcopay.com

UX/UI Case Study · Copay · Healthcare Price Transparency

The price was always there. I made it visible.

Copay promises upfront healthcare pricing — but the promise was buried below the fold. This is a redesign that puts the number a worried patient is looking for within five seconds of landing.

MRI — lower back$1,240
Annual physical$185
Strep test$42
Reveal real prices near you
Role
UX / UI Designer
Scope
Research → IA → UI
Type
Self-directed redesign
Tools
Figma · HTML/CSS
01 — The problem

Healthcare pricing is opaque on purpose. That makes people anxious before they ever book.

People don't shop for an MRI the way they shop for shoes. They arrive scared — facing a bill they can't predict, on a site that asks them to sign up, choose a plan, or read a mission statement before showing a single number.

Copay's entire value is transparency. So the core design failure is simple to name: the homepage talks about transparency instead of demonstrating it. The fix is to lead with the thing everyone came for — a price.

02 — Who I designed for

The anxious price-checker

DM

Dana M. · 34 · high-deductible plan

Got a referral for an MRI. Her deductible isn't met, so the cost is hers. She wants one thing: a believable number, fast, before she commits.

"I just want to know what this is going to cost me before I walk in. Why is that so hard to find out?"

Persona synthesized for this exercise from common high-deductible-plan pain points; not from formal user interviews.

03 — Research

Where the current journey breaks down

A mapped journey of Dana's first visit — and the moment her trust slips.

Arrive

Lands hopeful — "finally, transparent pricing."

Scan

Sees a value statement, not a price. Starts scrolling to find the tool.

Hunt

Asked to pick a plan / sign up before any number appears. Friction.

Decide

Either commits effort or bounces to call the provider directly.

Competitive teardown

Compared against other price-transparency tools. The strongest ones surface a sample price instantly; weaker ones gate it behind sign-up.

Key insight

Trust in a pricing tool is established the moment it shows you a real number with no strings. Delay that, and the promise feels hollow.

Design principle

"Show, then ask." Demonstrate value with a live price before requesting anything from the user.

04 — Audit of the current site

Before → after, by decision

B

What's not working

Hero leads with a slogan; the price-search tool sits below the fold.
Core value (an actual price) is gated behind setup steps.
No sample result to build immediate trust.
Visual tone reads corporate, not reassuring.
A

What I changed

Put a live price-search field in the hero, first thing.
Show three example prices on load — no sign-up to look.
Results show price, location and a plain-language label.
Warmer, clinical-calm palette built around a "reveal" teal.
05 — Information architecture

Low-fidelity wireframe

Structure first, in grayscale, so the layout decision stands on its own before any styling.

logo · nav
headline — "see the price first"
[ procedure search ............. ] (go)
↑ sample results, visible on load

The single structural move

Everything reorders around one rule: the search field and a sample result appear above the fold. Education, plans, and sign-up all move below — reachable, but never in the way of the first answer.

This is the whole thesis of the redesign, expressed as layout.

06 — Design system

The tokens behind the reveal

#1A1733 ink
#00B85C signal
#009F4F deep
#5B3FA6 amber
#F3F3F8 mist

Green is the "reveal" color — it only appears on real, visible prices, so the eye learns to associate it with clarity. Purple flags friction. Ink anchors the opaque "before."

InterDisplay · headlines
InterBody · UI
System MonoPrices · labels

Prices are set in mono so digits align and feel precise — like a receipt you can trust.

07 — High-fidelity UI

The redesigned homepage

yourcopay.com/search
YourCopay

See what care
really costs — before you book.

Search any procedure. Real prices near you, no account needed.

MRI — lower back
Available Now
Imaging Center, Provo
2.1 mi · in-network
$890
Regional Preferred
Regional Hospital
4.8 mi · in-network
$1,240

High-fidelity concept mock. Prices and providers are illustrative.

08 — Outcome

What I'd measure

A redesign is a hypothesis. Here's how I'd know it worked.

5s
Target time-to-first-price, from landing — down from a multi-step hunt.
0
Steps required before seeing a real number. Show, then ask.
↑42%
Search-to-result completion rate, tracked against the current baseline.
Previous
Previous

SpudToddos

Next
Next

East West Aircrafters