Modern Animal Booking Flow

What I Did

I was the only Product Designer at Modern Animal when I worked on this project. I did research to define the problem, synthesized the research, created wireframes and high-fidelity mock-ups. I worked with engineering to build this new flow to design specifications and release it in our mobile app.

What is Modern Animal?

Modern Animal is a startup creating a better veterinary experience for pets and their owners. We opened a veterinary clinic in the midst of the COVID pandemic in Los Angeles and are on track to open more in 2020. I am responsible for the end-to-end user experience for the mobile app used to book veterinary appointments, video chat with doctors, and access medical records.

The problem

Customers and investors were sharing feedback that it was frustrating to try and book an appointment.

 

Heuristic Evaluation

I started with my own evaluation of the booking flow, pretending I was booking an appointment for my dog. Below is the complete booking flow and some of my personal findings.

 
 

Competitive Analysis

I researched booking flows in similar apps. I looked at booking flows in the veterinary space, like Airvet, and apps for human medicine, booking reservations, and booking exercise classes.

Key Takeaways

  1. For those veterinary clinics with a mobile app, the design and flow was confusing and difficult to use so there was ample opportunity for us to stick out in the crowd (see Zoom Care below).

  2. The One Medical app was easy to understand and consolidated all variables onto a single screen. This made it easy to change the selections a user made like day or time and compare availability. 

  3. Apple Maps inspired me in how they visually differentiated between types of appointments or dinners. Within the button itself they included the type of seating which is a pattern I later applied to urgent vs. regular appointments in our app. 

 
 

Clinician interviews

I also conducted interviews with veterinarians and other in-clinic staff to understand qualitatively what problems they were encountering with the booking flow. This was important because our in-clinic staff is a user of the mobile app, hears feedback directly from customers, and I wanted to make sure they felt included in the process.

  • In-clinic techs were defining different types of appointments after the appointment was booked to attach the right doctor and guess how long the appointment would last

  • Customers who have an urgent matter can’t designate that in the app and get frustrated

Goal definition

  • Reduce number of clicks to complete booking

  • Create customer-facing urgent appointments

  • Allow for booking at multiple locations as business scales

Brainstorming and Initial Mocks

I created a user flow of some initial ideas to reduce the number of screens in the flow.

Key Changes

  • Removed the choose a location screen because we only have one location currently and can add that into the flow when it becomes relevant

  • Consolidated picking a day, time, and doctor to see all onto one screen

  • Added urgent appointments in red and explored using iconography to indicate this is a different kind of appointment and should be booked with caution

  • Brainstormed empty state visualsWe brought this idea to life with some low-fidelity mocks, one of which you can see to the right.

High-Fidelity Mocks and Implementation

Through many rounds of feedback with product and engineering, we landed on a new booking flow that reduced the number of steps to book an appointment and incorporated urgent appointments.

Key Changes

  • Removed selecting a type of visit at the beginning of the flow. I came to the realization that users shouldn’t be forced to decide whether they would like to drop off their pet or stay with their pet during the appointment when they are first booking an appointment. They should be able to make that decision the day of their appointment based on their own comfort level and schedule. I removed this screen all together and added language at the end of the flow explaining the options. 

  • Added a “Jump to Next Available Date” button. Our app defaults to today’s date when showing appointment availability. In the case where there wasn’t availability today, I decided to show add a button to jump the user to the next available date, removing the step of opening the calendar and tapping on a new date themselves.

  • Added a progress bar. While the new booking flow had fewer steps than before, it was still 5 steps long. It would be valuable for the user to know where in the flow they were and set expectations. 

  • Consolidated instructions and appointment confirmation screen. On the appointment confirmation screen we added instructions for the day-of the user’s appointment. We also updated any out-of-date COVID instructions.

  • Added a pre-appointment questionnaire after the appointment had been confirmed. This was something that our doctors requested, knowing that it was an extra step so we added it to the end and made it skippable.

Challenges

After the first version of the new booking flow was released, we quickly got feedback on pain points and iterated.

  1. Released urgent appointments, but every customer felt like their appointment was urgent so it didn’t free up availability.

  2. Better distinction between appointments with doctors and techs.

  3. Book appointments for multiple pets in the same flow.

Final prototype

Came to a final prototype that moved the decision of what kind of an appointment to make to the very first screen.

Final prototype link

 
 
 

Results

  • Increased rating from 4.79 to 4.90 in App Store

  • Qualitative feedback from customers that app is easy and delightful to use

  • More appointment availability due to operational efficency

Date August 2020 - November 2020