WellPower: Mobile Application
Client
WellPower
Role
UX Designer
Timeframe
6 weeks
Tools
Figma
MIRO
Overview
WellPower, a mental health center, 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.
Define
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.
Iterate
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.
Prototype & Test
Usability Testing
After designing the wireframes, I created a clickable prototype to test for usability. To measure the usability of my designs and user flow, I asked users to complete 4 separate tasks:
Schedule a new appointment
Reschedule an appointment
Cancel an appointment
Change an in-person appointment to a video meeting
Usability Testing Results & Design Solutions
Overall, the user testing sessions went well with 100% of users tested able to complete each task successfully. However, three major areas for improvement were highlighted.
1.) Scheduling Calendar
80% of users tested expressed frustration with the 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. To help users view available dates and times for an appointment, I only displayed those dates and times for each provider.
2.) Selection Controls
60% of users tested initially selected the incorrect option using the radio button 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. 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.
3.) Schedule Appointment Edits
40% of users tested needed to go back and edit information when scheduling a new appointment. In the prototype flow, users had to wait until the very last step to edit any information before confirming the new appointment. In the final design, I added clickable steppers that users could select at anytime before confirming their new appointment to take them back to the selected step and edit that information.
Deliver
Hi-Fidelity Designs & Prototype
For handoff to the development team, I created a hi-fidelity prototype including the final design solutions.
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%.