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.


Appointment status
Highlight services request statues with three colours. Enhance the readability of appointment information.
Visual Langauge & Style Guide
