Overview

A mental health center, WellPower, needed to design a mobile application in order to help patients manage appointments. They wanted patients to be able to schedule a new appointment, reschedule appointments, change in-person appointments to video meetings, and cancel appointments within the app.

User Flow

I mapped out a user flow to demonstrate how the user will interact with the app in order to complete each task. The user will be able to schedule a new appointment, view appointment history, and view appointment details from the Appointments page. The user will be able to manage their existing appointments (reschedule appointment, cancel appointment, change to video meeting) from the Appointment Details page.

Mid-Fidelity Wireframes

Once I solidified how the user will interact with the app in regard to appointment management, I created mid-fidelity wireframes of each page in Figma.

After designing the wireframes, I created a clickable prototype to test for usability.

Usability Testing

To measure the usability of my designs and user flow, I asked users to complete 4 separate tasks:

1. Schedule a new appointment

2. Reschedule an appointment

3. Cancel an appointment

4. Change an in-person appointment to a video meeting

Usability Testing Results

• 100% of users tested were able to complete each task successfully

• 80% of users tested expressed frustration with the Scheduling Calendar

• 60% of users tested initially selected the incorrect option using the radio button controls

Scheduling Calendar

It was difficult for users to easily view all available dates and times to schedule or reschedule an appointment with this format. Users had to select each day to view available times which resulted in several clicks to find the desired day and time.

Selection Controls

Though radio buttons worked as a solution for the user to select a provider and appointment type, they have a touch point that is too small for most users to quickly and accurately select an option without making a mistake.

Hi-Fidelity Design

I implemented the feedback I gathered from the usability testing results into the hi-fidelity design.

Appointment Calendar

To help users view available dates and times for an appointment, I only displayed those dates and times for each provider.

Selection Controls

To give users a larger touchpoint to make their selection for a provider and appointment type, I utilized a button style selection control instead of the radio button.

Style Guide

In order for the developers to accurately implement the designs for the mobile application, I created a basic style guide to handoff along with the final designs.

Conclusion

The appointment management feature that allows users to reschedule an appointment, cancel an appointment, and change an in-person appointment to a video meeting within the app resulted in a reduction of patient appointment no-shows by 70%.