PetDesk Booking Experience Redesign

Leveling up PetDesk‘s experience of booking pet services appointment

PetDesk is a mobile app that connects pet owners with local animal service providers. This project aims to facilitate PetDesk's user flow from searching and selecting service providers to booking appointments with them.

DURATION

It’s a self-directed project for one semester (14 weeks)

TOOL

Figma

MY ROLE

User Research

UI/UX Design

Prototyping

SCOPE

Individual Project

INTRODUCTION

As a person who lives with three cats, I downloaded PetDesk when pandemic happened because my veterinary clinic encouraged clients to book an appointment through the app. However, I still remember the bewildered feeling when I first booked an annual exam for my cat on the app. Although the app has been updated a few times since then, it is still awkward for the new user.

Therefore, I redesigned the service booking flow and interfaces for first-time users to navigate without missing any important message from providers.

DESIGN OUTCOMES

Pet Profile

Pet profile screen with three sections show your pet’s information & body data, medical history and recent prescription.

Search near service

You can search near pet service providers. The providers collaborating with PetDesk are marked purple, and the others are kept white.

Provider profile

Provider screen shows the opening hour, location and news of the provider.

You can contact and book an appointment with the provider through their profile. If the provider has more services, such as online pharmacy, it would also be displayed on this screen.

Research

Analysis current interfaces

Reviewing and to analyzing each interface in the app is my first step in this project. Then marking out all the pain points I discovered. It allows me to fully understand the app and evaluate the existing problems.

FINDING PROBLEMS

01

First-time user do not understand booking process

Submitting the service required form does not mean the appointment is confirmed. The user needs to wait for approval from the provider. On some occasions, the provider's approval booking time is different from the request time.

02

Search provider results does not provide enough information

The search results on the map only display locations and opening times of institutions. After selecting one provider, the user has to add it to the list to execute the following action.

03

Jumble Provider screen

Service, contact and information buttons are designed the same and listed on the provider screen. If the provider has more information on PetDesk, a user needs to scroll all the way down to find other providers on the list.

Problem Statement

"How might we make the searching and booking experience smoother and contextual so people can avoid unnecessary actions?"

Task flow

After scoping the entire app and defining the project's area of focus, the task flow was re-evaluated and reorganized. My goal is to make a fluent experience from searching service providers to booking an appointment.

Wireframe

The wireframe was created based on the user task flow to check the user journey. While re-built the interfaces, the intent was to:

Easier navigation to search a nearby service
Unify provider's service list display
Select detailed date and time
Adding provider profile
Highlights key information

Final Design

View all your pet's data in one screen

I reworked the pet profile from a modules list to a one-page profile to provide users with a more intuitive pet data. One page profile contains the most necessary information about the pet. In the first section, the user can monitor the pet's weight change and vaccination date. Users can also access the prescription refill at the bottom of the page.

Before

The pets modules list all the pets with their age and image in the front, but they did not provide any helpful information.

After

Users can quickly switch their pet's profile on the top left corner. The new profile page displays the most frequently viewed information in the front.

Search nearby services

On the navigation menu, I changed the "Providers" to "Service" because I found it was confused for many users. The provider with the user's account will automatically appear in the list. Users can also search services on the map and manual add providers to the list.

Before

Provider list presents contact information, point collection and request service functions parallel on one block. The research result map only shows the name, opening hour and location of providers.

After

Simplify provider into modules in the list, adding rate from google map, highlight the request service button and reduce different contact into one icon button. The search result map shows the user's location, and with the selected provider, a block module would bring the user to the provider's profile page.

Adding provider profile in service screen

Adding the provider profile assists users to determine while searching services and helps users receive messages from followed providers. In the original app, all the news and messages from followed providers are collected and listed on the message screen. Therefore, it is hard to follow messages from the same sender.

Although this design has more hierarchy from the service screen, it builds an intuitive information classification. The important message would be pinned on the top of the screen in the provider profile. Users could access services, paw perks and news in the provider profile screen.

Booking service with local providers

Booking service is the most frequently used function on the app. Like most other booking functions, the user needs to fill out a form and submit it, but with PetDesk, many users do not realize their booking is not complete before the provider confirm the appointment.

Before

Booking form was acceptable to use, but with some visual design issues, such as the font colour of available dates and unavailable dates are hard to distinguish. After selecting the date, the user could drag the time bar to require a specific time range, but based on personal experience, most clinics do not have the desired time slot.

Select exact date and time slot

After selecting the desired date, the following available time slots can be chosen, by swiping left or right to move the date. This approach reduces providers and users' effect to negotiate appropriate appointment times.

Submit service request

Confirm request screen remind users to wait for the provider's approval.