Creating an Appointment Booking System for Boosting-First Time Consultations

Responsibilities

UX Writing

UX Design

Visual Design

Collaborators

Duration

3 weeks

Background

The treatment process begins after a user completes a doctor's appointment and receives a diagnosis. However, the current app lacks a system for users to book appointments themselves, requiring Care Managers to manually create and track appointments. This led to delays, errors, and patient frustration.

We needed to design a new Appointment Booking System that allows users to book appointments with little to no Care Manager involvement.

Requirements

Following were the important requirements communicated by the Project Manager at the start of the project.

Display prerequisites and status of all the appointments

Display prerequisites and status of all the appointments

Display prerequisites and status of all the appointments

Easy option to contact Care Managers if users need help

Easy option to contact Care Managers if users need help

Easy option to contact Care Managers if users need help

Marketing displays to guide users to the Jeevam Store

Marketing displays to guide users to the Jeevam Store

Marketing displays to guide users to the Jeevam Store

Exploring and Listing Features

The treatment plan is designed to span 3–6 months, depending on the patient’s chosen plan. It primarily involves a combination of doctor and nutritionist consultations. Between appointments, patients are expected to complete specific tasks, such as maintaining a diet log, tracking symptoms, adopting lifestyle changes, or obtaining medical test results.


The app should help patients manage these tasks effectively and, upon completion, seamlessly book their upcoming appointments.


Following is the list of the features the team agreed upon.

1. Next Actionable Step: View pending tasks required to book the next appointment or directly book if all tasks are completed.

2. Progress Tracker: Visual representation of milestones to track treatment progress.

3. Appointment Database: A database of upcoming and previous appointments.

4. Appointment Details for each appointment, including date, time, doctor’s name, joining link, and associated medical reports.

5. Calendar View for all the appointments.

6. Health Trackers to monitor symptoms, weight, mood, exercise, medication, and other health metrics.

7. Care Manager Support: In-app chat for assistance and queries with care manager.

8. Step-by-step instructions on how to join online appointments.

Low Fidelity Wireframes

Iteration 1 - Date-Based Top Bar

The top bar displays dates, with those containing appointments highlighted. Tapping on a date shows the events for that day.

But this approach lacked the display of a clear call-to-action (CTA) when no appointments were scheduled. Considering our user base, this design risked users missing out on booking appointments or completing prerequisite tasks.

This structure might work well for daily habit tracking, but that was a feature for a later release.

The top bar displays dates, with those containing appointments highlighted. Tapping on a date shows the events for that day.

But this approach lacked the display of a clear call-to-action (CTA) when no appointments were scheduled. Considering our user base, this design risked users missing out on booking appointments or completing prerequisite tasks.

This structure might work well for daily habit tracking, but that was a feature for a later release.

The top bar displays dates, with those containing appointments highlighted. Tapping on a date shows the events for that day.

But this approach lacked the display of a clear call-to-action (CTA) when no appointments were scheduled. Considering our user base, this design risked users missing out on booking appointments or completing prerequisite tasks.

This structure might work well for daily habit tracking, but that was a feature for a later release.

Iteration 2 - Full Month Calendar View

By expanding from a single-day view to a monthly calendar, we addressed the navigation challenges of Iteration 1, allowing users to see a broader overview of their appointment dates. This approach improved visibility and planning for upcoming tasks.

However, like Iteration 1, this design still lacked a direct CTA for unplanned dates. Users could still overlook critical tasks if they didn’t proactively explore future dates.

Iteration 3 - Appointment List View

Dates and the calendar were completely ditched in favor of a list view of the appointments. Tasks with prerequisites or the next booking step were prioritized at the top of the list. Tapping an appointment tile reveals additional details.


The challenges of navigating individual dates in the calendar view led us to rethink how tasks were displayed. Instead of relying on users to find appointments by tapping on dates, we prioritized high-value tasks at the top of the list. This shift ensured that actionable tasks were immediately visible, addressing the core issues of earlier iterations.

This design streamlined the experience by focusing on what mattered most—helping users stay on track with their treatment plan without additional effort.

Iteration 4 - Highlighting the Actionable Task

To further emphasize actionable tasks, the appointment tile requiring user action was moved to the very top and paired with a bold, prominent CTA button.

While Iteration 3 effectively prioritized actionable tasks, we realized that emphasizing the most critical task even further could make the experience more intuitive. By isolating the top-priority task, we ensured users were immediately directed to take action without scanning the list.

This provided maximum clarity, ensuring patients stayed on track with minimal effort.

New Appointment
Booking System

New Appointment Booking System

Dynamic Card for the next Actionable Step

An appointment system should allow users to book, join, cancel, reschedule, or view details of their upcoming appointments. However, some appointments require certain tasks to be completed before they can be booked.

The dynamic card highlights any pending tasks that need to be done before booking(Basically, the CTA for the next actions).

If there are no prerequisites, it shows the current status of the next appointment. The call-to-action (CTA) on the card changes based on the appointment’s status.

Upcoming and Previous Appointments

Below the dynamic card, a list of the upcoming and previous appointments is displayed.

Following is the home of the appointment booking page with the Dynamic Action Card and the appointments list.

The appointment detail card serves as the entry point to a page with full appointment information.

Extra Utility Options in Appointment Details

We also added some utility options to provide relevant assistance during different stages of the appointments.

The entry point for these utilities is on the expanded appointment screens.

Selecting Slots for the appointment

ITERATION 1🙅🏽‍♂️

The lengthy list of time slots increases the decision making time and seems cluttered

ITERATION 2👏🏽

Choosing time slots by the parts of the day, feels more intuitive

Reducing the length of the Health Profile Questionnaire

The original 5-step questionnaire was divided into two sections:

• Basic Details

• Health Profile


The basic details, which require minimal input, are collected during onboarding.

The Health Profile section, however, is introduced later to allow users to explore the app first without expecting too much time commitment upfront. Health Profile is essential for booking the first appointment and several others in the treatment plan.


Although we initially planned to redesign the question format, this would have significantly extended the project timeline. Instead, we focused on improving the existing structure. Since the Health Profile section had the highest drop-off rates, we simplified it by removing unnecessary questions, shortening question lengths, and reducing the number of options in multiple-choice questions. These adjustments reduced the time required to complete the questionnaire by about 35%, making it faster and more practical for users.

Prototype

Results

Manually Booking appointments was a big gap in the experience of the user's treatment journey. So, digitising this process was an urgent priority to stitch a seamless experience.

After working closely with the operations staff to change our overall appointment booking process, we launched the testing version and crossed our fingers.

Massive 45% reduction was observed in the completion time of the Health questionnaire(more about the Health Questionnaire in this case study), directly leading to 18% more users booking their first appointment right after the onboarding.

Drop-offs rates during the first-appointment booking process were reduced by 22%. During monthly reviews, patients shared that they now feel more confident in navigating their treatment and feel better supported.


Care Managers noted that they could now spend more time on assisting patients with their treatment instead of handling support inquiries.

copydon't

sneha, 2024.

imitation is flattery, but also wrong.

copydon't

sneha, 2024.

imitation is flattery, but also wrong.

copydon't

sneha, 2024.

imitation is flattery, but also wrong.