Butter Booking Case Study

Booking virtual care after discharge

Clearer words, simpler and modern design, fewer dead ends, and a way to cancel that didn't exist before.

Scope
UI Redesign, UX audit, Content Design
Platforms
iOS app and web
Client
Virtual care provider, anonymized
Read the story
1Context

Who books these visits

A patient who just came home and needs a follow-up. They want a way to easily get in touch with doctors and get back to resting.

Product
Video appointments with a licensed clinician, booked in the app or on the website.
The flow
Choose a state, pick a time, add details, leave a note, get a link.
The brief
Audit every booking screen for UX and content, then show what better looks like.
Constraint
Clinicians can only see patients in states where they're licensed.

Just home

Many people booking were recently discharged. They're adjusting to a care plan and new routines.

So: say what happens next, in order.

Low on energy

Recovery is tiring. Every extra field, pop-up or unclear button costs more than it would on a good day.

So: ask less, and keep choices in view.

Possibly worried

Something might be wrong. A cold error message or a confusing time can turn worry into a phone call.

So: be calm, plain and specific.

2The audit

We audited every screen in the app and on the website

We went through the whole booking flow in the app and on the website, start to cancel. Each screen was checked for clarity, tone, accuracy and what happens when things go wrong. Here are the original screens, with the main problems marked.

    3What we found

    Six patterns behind the issues we found

    Fixing screens one by one would have left the causes in place. Grouping the findings showed six habits that kept producing the same problems, so we fixed the habits.

    Context

    Context disappears

    Choices made in one step vanish in the next. By the note step, patients can't see the time they picked.

    BeforeEach step starts blank. Nothing carries over.
    AfterA running summary on web. On mobile, "New York · Change" and a time card stay in view.
    Tone

    Language doesn't fit recovery

    Clinical or bureaucratic words where a patient expects a person.

    Before"Tell us about your diagnosis" (Minimum 20 characters)
    After"Anything you'd like your clinician to know? You don't need a diagnosis."
    Clarity

    Copy explains the system

    Sentences describe how the company works, not what the patient should do.

    Before"We use this to make sure you're connected with a provider who is licensed to provide care in your state."
    After"Clinicians can only see you in states where they're licensed."
    Errors

    Errors lead to dead ends

    Errors blame the patient and don't say whether the appointment is safe.

    Before"404. Looks like you're lost." Go back
    After"This page didn't load. That's a problem on our side. Your appointment is still confirmed."
    Actions

    Buttons don't say what happens

    Generic labels make people stop and reread the screen before they commit.

    Before"Are you sure?" No / Yes
    After"Cancel your visit on Sat, Oct 3?" Keep my visit / Cancel visit
    Consistency

    Inconsistent or broken

    Times in the wrong zone, title case next to sentence case, and fields that shouldn't exist.

    Before"If Other, please specify" on a list of licensed states
    AfterYour state, preselected. Others in one regular dropdown.
    4Three levels of change

    Some issues need new words, others need design changes

    Original

    Content only

    Full redesign

    BeforeAfter

    Drag, or use the arrow keys

    5Cancelling

    Fixed in the app, new on the website

    The app already let patients cancel, but with one unclear option and no undo. The website had no way to cancel at all, so patients had to contact support.

    BeforeAfter
    6Copy, rewritten

    Most of the improvement came from the words

    A sample of lines from both platforms, before and after.

    7The playbook

    Content rules that apply beyond this flow

    The six patterns became six rules for the whole product, so the next flow gets them right from the start.

    1

    Keep context in view

    Show what the patient has already chosen, and let them change it in place.

    2

    Write for someone recovering

    Plain, warm and short. Ask what they'd like to share, not for a diagnosis.

    3

    Explain only what helps

    Give a reason when it helps someone decide. Leave out how the company works.

    4

    Errors own the problem

    Say what happened, what's still safe, and what to do next. Never blame the patient.

    5

    Buttons name the action

    "Book appointment", "Keep my visit", "Cancel visit". Sentence case, always.

    6

    One word, one meaning

    Same term for the same thing everywhere, and times in the patient's state.

    Glossary

    Words to use and words to avoid

    The app says "visit" and the website says "appointment", each one used consistently.

    UseInstead ofWhy
    ClinicianDoctor, providerAccurate, and it's who they'll see
    ContinueNextSteps move forward. The last one says "Book"
    Eastern Time (New York time)EDT, IDT, local time zoneTied to where the patient will be
    Check your phonePhone VerificationSays what to do
    Your noteAdmission info, diagnosisPatient language, not intake forms
    This page didn't load404, you're lostOwns the problem
    Cancel visitYesThe button says what it does
    8What we delivered

    The redesigned flow is ready for usability testing

    21New screens, 11 app and 10 web
    9Content-only screens in the old UI
    6Product-wide content rules
    1New web flow, cancel with undo