Bookings App - Appointments

Redesign of patients' booked appointments

The Problem

When starting my new role at HotDoc, I noticed some difficulties within the patient app, especially regarding the process after booking a doctor's appointment. It was challenging to understand whether my appointment was successfully booked, where to go, and if there were any pre-appointment tasks to complete.

The current layout posed readability issues due to a mix of hierarchy and styling, including colors that did not meet accessibility standards.

Main issues

Getting a quick snapshot of my appointment details.
Understanding whether your appointment was booked and, if not, its status.
Understanding what to do next after booking your appointment

My Role

Lead UI/UX designer in this project and worked closely another developer

Project Date

2018

The Process

The primary objective was to redesign the current layout to be accessible, find the date of your appointment easily and if there were any next steps prior to appointment.

This current layout was difficult to tell if you appointment failed, why did it fail and what to do next.

Me and a few developers workshopped ideas on how we might incorporate some our newer features (Patient Registration Forms and Place in Queue). We liked the idea of an activity feed and timelines using inspiration from the Uber app.

Inspiration

For the UI design I mostly looked towards references of calendars, timelines and checklist design.

We really liked how Uber and other delivery apps presented so I investigated how similar apps and layout out their information.

Questions & Concerns

The Solution

My goal was to establish a clear hierarchy that gives top priority to appointment details. In addition, I implemented an activity feed below to showcase the completed steps. This feed enables further explanation of details like reasons for appointment cancellations or pending confirmations. Furthermore, it provides guidance for the next actions, such as filling out a registration form or checking in.

We opted for the most intuitive, user-friendly language as beforehand there was minimal, tech-sounding copy.

To elevate the visual experience, I enhanced the color palette by incorporating accessible Design System Colors. Additionally, I revamped the iconography and introduced relevant imagery when needed.