Work / HiDoctor / Booking and payment

HiDoctor: improving the booking and payment experience

People came to HiDoctor ready to talk to someone, and too many left before paying. I redesigned the two places they left: payment first, then choosing a psychologist. After both went live, paid sessions rose about 50%.

Payment live in October 2022, the booking steps after it. Desktop and mobile web.

The old payment page: one long column, unlabelled card fields, the button below the first screen The redesigned payment page: appointment details on the left, a labelled card form on the right, the total and the button in the first screen
Role
Product designer: research, UX, UI and handoff
Product
HiDoctor, online therapy and health consultations
Timeline
From summer 2022, in two releases
Worked with
Product, marketing, customer support, psychologists and developers

In short

Problem
People left while choosing a psychologist, and at payment after already picking a time.
What I did
Turned a cross-team journey map into 80 scored issues and fixed the flow backwards, with one rule: a line stays only if it answers a question people have at that moment.
Result
Paid sessions rose about 50% from before to after release. The first-session discount ran the whole time, so it doesn't explain the change.

Overview

Four steps, two places people left

  1. Step 1Choose a psychologist
  2. Step 2Choose the session
  3. Step 3Pay
  4. Step 4Join the call

I worked backwards: payment first, because the people leaving there had the strongest intent, then the choosing steps.

Research

From a journey map to 80 scored issues

I built a customer journey map from usability tests of the live product, a competitor review and a heuristic evaluation, with product, marketing, customer support and business in the sessions.

It followed Ece, 32, a business analyst in Istanbul who had just had her first panic attack, through seven stages from finding HiDoctor to booking her next session.

Customer journey map with seven stages, from discovery to the next session, each with actions, touchpoints, behaviour data, needs and pains, teams and possible fixes
The journey map. Each stage lists actions, touchpoints, behaviour data, needs and pains, teams and possible fixes.

A map is easy to agree with and hard to act on. So I turned every pain into a row: 80 issues across 13 parts of the product.

Each one was scored for UX, product, purchase and frequency. The team reviewed the list in August 2022 and gave every row an owner.

UX / UI1 to 5×Product1 to 5×Purchase1 to 5×Frequency1 to 5=Priorityup to 625

The rows this case answers

#What testers saidStepPriority
45"Typing the card number would be easier if it were split into four blocks."Pay150
46"While I was accepting the terms of use, it also wanted to store my card in Masterpass. That bothered me."Pay120
50"I should be able to switch between paying from my wallet and paying by card."Pay120
49"When I pay, show me the psychologist, the date and time and how many minutes I'm buying."Pay18
36"The about section was hard to read. Education mattered most to me, and it got lost."Choose96
29"I clicked to make an appointment, then had to click again to see the calendar. One psychologist had no free times, and I only found out at the end."Choose72
32"When the psychologists I picked were only free on later dates, my search just ended. I wish I could filter by who is free today or in the next few days."Choose64
39"What is the difference between 30 and 45 minutes? How do I choose?"Choose27

The top of the list, a matching feature and rebooking after a session, were projects of their own. Payment was the most contained start: its top three rows scored 4 or 5 on purchase, all on one page that was losing people who had already chosen a time.

Phase 1

Payment

The last step, where the most motivated people were leaving.

Phase 1 · Problem

People reached the last step and stopped

Picking a time held the slot for 15 minutes, then the booking was lost. In June and July 2022 data, checkout abandonment was climbing among returning visitors, people who came back with a psychologist already in mind.

The page failed in three ways, the same three I use for the rest of this case.

Trust missing answers Attention things competing with the button Effort work the form asked for

The old HiDoctor payment page
The payment page in summer 2022. The psychologist's name and photo are blurred.
  1. Trust · missing answerNo date or time. The card showed who and how long, not when. The banner's discount wasn't in the price either.
  2. Attention · extra noiseAn open discount field near the top. It sent people without a code looking for one.
  3. Effort · extra workFields without labels. Placeholders vanished on typing, and the card number was one long string.
  4. Attention · extra noiseA boxed paragraph of consent. Accepting the terms also saved the card to Masterpass, in three lines of small print.
  5. Attention · extra noiseA loud Masterpass logo. The brightest colour on the page sat next to the button, not on it.
  6. Attention · extra noiseThe button out of sight. It started 1,055 px down, below the first screen on most laptops.

Phase 1 · Design

One rule for every line on the page

The CEO wanted more colour and longer explanations to reassure people. I agreed on reassurance, not on more text: at the moment of paying, every extra line adds load and takes away trust. That disagreement became the rule.

A line stays on the page only if it answers a question people have at that moment. Everything else is folded away, shortened or removed.

Two competitor patterns answered the same doubts our testers had.

A competitor's payment page with the appointment's date, time, length, expert and fee listed beside the card form
The appointment next to the form. Date, time, expert and fee stay visible while people type. Issue 49
An order summary with the original price, a discount line, the final price and a cancellation note above the buy button
Reassurance at the button. The discount spelled out and a cancellation promise above the buy button.

On our page, the rule added missing answers and removed what competed with the button. Tap a number to see each change.

The redesigned payment page
The new payment page.
  1. Trust · answer addedThe appointment, in full. Psychologist, title, session length, date and time. Issue 49
  2. Trust · answer addedThe discount, visible. Fee, 35% first-session discount and total, so the price matches the banner people clicked.
  3. Attention · noise removedThe discount code, folded. One "Use a discount code" button, which people with a code still find.
  4. Trust · answer added"Secure payment" and an SSL badge. The title names the step before anyone types.
  5. Effort · work removedCard or wallet, side by side. Paying by card works even with a balance in the wallet. Issue 50
  6. Effort · work removedFields people can type into. Labels above every field and the card number in four blocks. Issue 45
  7. Attention · noise removedConsent in one line. Masterpass required one checkbox for both, so I kept it, cut the text to one sentence and made the logo quieter. Issue 46
  8. Trust · answer addedThe total, right above the button. The timer moved inside the button.
  9. Trust · answer added"If I'm not satisfied, what do I do?" A journey map question, answered under the button: free cancellation up to three hours before, and a money-back guarantee.
~200 pxhigher: the button moved from 1,055 px to 858 px down the page
~100 pxshorter page on desktop, while showing more
2columns, so the appointment stays in view while people type

Phase 1 · Mobile

Where the rule cost length

With no second column on a phone, the new answers stretched the page from 1,768 px to 2,101 px. Cutting them would have brought the doubts back, so I solved the length instead.

A fixed bottom bar keeps the total and the button on screen from the start, however far people read.

The old mobile payment page
Before. The button starts 1,056 px down.
The new mobile payment page, full length
After, full page.
The first screen of the new mobile payment page with a fixed bar showing the total and the payment button
After, first screen.

The same layout worked for packages: the card shows the number of sessions and their validity instead of a date.

The payment page for a package: the appointment card shows 6 sessions and 3 months of validity instead of a date
A package of six sessions. One card, two kinds of purchase.

Phase 2

Choosing and booking

The steps before payment, for the people who never got that far.

Phase 2 · Problem

Two booking buttons almost nobody looked at

The journey map showed that about 35% of people who opened the psychologist list from the home page left from there.

In August 2022 I ran an attention analysis on a profile and the list. The profile's two booking buttons drew 2.1% and 1.3% of attention, the photo and long text most of the rest.

Attention heatmaps of a psychologist's page and the psychologist list, with clarity scores of 31 and 53
Where attention went. A psychologist's profile (clarity score 31) and the list (53).

The profile had the same three kinds of problems as payment.

The old psychologist profile page with four tabs, a 30 or 45 minute choice, a booking menu and a long block of text
A psychologist's profile in summer 2022. Name, photo and personal details are blurred.
  1. Attention · extra noiseA summary no one could compare. Each psychologist wrote it differently: topics, schools or a sentence about themselves.
  2. Trust · missing answerNumbers without words. A camera, a phone and "TR", each with a number, left people guessing what was counted.
  3. Attention · extra noiseFour tabs for two questions. Video or phone, single session or package, all mixed in one row.
  4. Trust · missing answer30 or 45 minutes, with no reason to pick either. Issue 39
  5. Effort · extra workFree times behind another click. "Make an appointment" opened a menu, so people only learned a psychologist was fully booked at the end. Issue 29
  6. Attention · extra noiseOne block of text. Topics in a long comma list, and education, the thing people looked for most, buried at the bottom. Issue 36

Phase 2 · Research

What other platforms and our psychologists told us

I compared the booking flows of ten online therapy platforms, from Psikoloji Merkezi, Hiwell and Terappin to Talkspace and BetterHealth. Three patterns kept coming back: a short matching test before the list, packages sold as their own product, and psychologists writing for the blog.

A research board with the booking screens of ten online therapy platforms, grouped in rows, and paper sketches on the right
The benchmark board. Each flow from first screen to booking.

I sketched the flow on paper first: a topic choice, a list where each card answers the basic questions, a profile with booking beside it, and packages as their own choice.

Four paper sketches: a topic choice, the psychologist list with filters, a selected card, and a profile with a booking panel
The first sketches.
A sketch of the package option: two sessions of 45 minutes, valid for one month, with the old and new price
Packages. Sessions, validity and the saving in one card.

Then I showed them to psychologists on the platform. Their feedback changed more than the visuals.

Phase 2 · Design

The same rule, earlier in the flow

Each screen answers the questions people have at that step, and nothing else. When choosing a psychologist, those questions are simple: who is this, what do they help with, what does it cost, when are they free?

Colours match the problems above. Tap a number to see each change.

The redesigned psychologist profile: profile and about on the left, a booking panel with session cards and the total on the right
The new profile. Name, photo and personal details are blurred.
  1. Attention · noise removedThe same structure for everyone. About, specialties, education and certificates in fixed blocks, so two profiles can be compared. Issues 16, 36
  2. Trust · answer addedNumbers with words. "387 video, 354 phone, Turkish sessions" instead of three icons and three numbers.
  3. Attention · noise removedTwo tabs, not four. Video or phone on top. Single sessions and packages of 2, 4, 6 and 10 sit below as cards.
  4. Trust · answer added45 minutes preselected. The first-session discount is on the card itself. Issue 39
  5. Effort · work removedBooking opens on a calendar. "Randevu Oluştur" goes straight to dates and free times. Issue 29
  6. Trust · answer addedEducation people can check. School, degree, years and certificates, each block marked as verified. Issue 36
  7. Trust · answer addedThe total, with the saving. Old and new price and the multi-session discount, right above the buttons.

The list does more of the work

Most people never needed the profile to decide, so the list started answering "when are they free?" before anyone clicks.

The redesigned psychologist list with the four booking steps on top, filters, psychologist cards, a matching banner and recently viewed psychologists at the bottom
The list, full page. Scroll inside the frame. Online psychologists can be called right away, the rest show their nearest free slot. Further down, a matching banner, and recently viewed profiles at the bottom. Issues 12, 29, 31
The available time filter: a calendar to pick days and six time ranges from night to evening
Filter by free time. Pick days and time ranges to see only who is free then. Issue 32
Quick booking from the list: a window with the psychologist, a calendar, free times and the total
Quick booking. Date, time and total in one window, without leaving the list. Issue 29

On a phone the long profile borrowed the payment page's fix: a fixed bar with the total and both buttons, plus a full-screen calendar for picking a time.

The mobile psychologist profile with session cards, about, education, certificates and reviews
Profile. Booking first, then the details.
The mobile profile scrolled down, with a fixed bar showing the session price and the two booking buttons
Fixed bar.
A full-screen date and time picker with the total and a confirm button
Date and time. One screen, total included.

Outcome

More paid sessions, from both ends of the flow

~50% more paid sessions after both phases went live, measured before and after release.

There was no A/B test, so I can't split the result between the two phases. The 35% first-session discount ran the whole time, so it doesn't explain the change.

Both parts kept evolving for three more years. These are the first versions, the ones that moved the number.

Looking back

What I'd do differently