MARS Vet Health Client App

For pet owners to set appointments, purchase products, & learn about pet care

I was on the Mars Vet Health team at WillowTree Apps (design consultancy agency) where I worked on creating an app for pet owners during the second half of my internship. I worked on creating the brand vision, wireframes, mid and high-fidelity prototypes, and illustrations.

Company

Role

UX/UI Designer

Duration

5 weeks

Overview

Objective

Create a veterinary app for Mars Inc. to be used for pet owners. The app will be concerned with all things pet care. The goal of this design sprint is to complete high-fidelity prototypes of the veterinary appointment-booking flow.

Process

The project began with product vision exercises with the client, followed by ideation of visual designs for the brand identity. User research findings were incorporated into user flows and wireframes which were then tested for usability. I concluded with high-fidelity prototypes.

Product Definition

What it is

The MVH Client App is a mobile pet healthcare app for pet owners that makes any relevant pet matters accessible to the owner. The app will allow pet owners to book appointments (across a network of 2,500 clinics under the Mars brand), purchase products, and learn about pet care.

User Journey

I created two preliminary user journey maps to show how we imagined the user would book an appointment through the app: one for a routine wellness check and one for an emergency visit.

Ideate

Comparative Analysis

I analyzed several different pet-related brands/companies and noticed that color choices were centralized around "cool casual." Playful imagery and and soft, rounded shapes were also utilized to give off a friendly feel.

Design Ideation Round 1

Because I was designing a new app, the design sprint began with brand identity ideation. I designed and prototyped a confirmation screen, focusing solely on the look/feel.

My design incorporates cool colors juxtaposed with playful imagery to keep the overall tone calm and casual. The pet is "matched" with the doctor to create a sense of teamwork and help put the owner at ease.

Client Feedback

LOVED connection between pet and doctor

Liked the friendly feel

Wanted to continue with my icons

Colors are too clinical

Research

Methods

The research phase began with a user interview session with 10 pet owners. They were instructed to make an appointment on two existing apps (Banfield and Vetstoria Hospitals) as we made notes and followed up with questions. They were also shown my visual design concept.

Insights

Wellness visit- user is not concerned

Users prioritize closest location.
All users surveyed see the same veterinarian.
All users with >1 pet want to book a back-to-back time block.
Users are frustrated when they are being shown places that have unavailable times.
All users expressed wanting to see an option for earliest available.
8/10 users wanted to see ratings and reviews.

Urgent (illness) visit- user is concerned

Users prioritize closest location.
All users surveyed see the same veterinarian.
All users with >1 pet want to book a back-to-back time block.
Users are frustrated when they are being shown places that have unavailable times.
All users expressed wanting to see an option for earliest available.
8/10 users wanted to see ratings and reviews.

Users were delighted to see the doctor profile coming together with the pet profile for the confirmation screen on my design.

QUOTES FROM THE INTERVIEW

“I like this - it’s like I’ve seen the doctor already even if we haven’t met. I’m not walking in blind. It gives me more trust and confidence in them.”

“Putting a face to the name is really more humanizing.”

“I like seeing their picture. I don’t really remember names, I remember faces so having a picture there is helpful.”

User flows & wireframes

Use Cases

The user flow should accommodate three use cases: registered users, unregistered users, and emergency visits. Mars strongly emphasized wanting the app to allow guest mode, where an unregistered user can browse available options before having to sign up.

Registered user- emergency & routine visit

Unregistered user

Challenges

The design process involved incorporating findings from user research as well as feedback from the client, but marrying the two raised numerous directional challenges.

How much freedom do we give the user when selecting time, hospital, and doctor? Too many choices causes anxiety.
The client wanted to maximize space– they did not think it necessary to include the pet's name; however, user research proved otherwise, as pet owners treat their animals like family.
The client wanted the hospital and appointment times to be pre-populated for efficiency purposes, but users wanted to be more involved in the process.
Overall, the client wanted fewer clicks and fewer screens.

Alternative flow

The stacked approach allows users to go back and forth from pet to appointment type to hospital to time all on one screen.

Pre-populates hospital/doctor and time fields with best option based on user data.
Maximize spaces
Shows hospitals before making prior selections.
Shows how inputting/changing one selection affects the prior selection, without having to press the back button.

Usability Testing

Method

Uability tests were conducted with 100 users as they navigated the wireframes.

Unregistered users

Unregistered users completed the booking flow, on average, 4 seconds faster when they were not prompted to register at the start
Unregistered users who are browsing the app do not want to upload a pet profile immediately.

Appointment times

85% (n=85) of users wanted to see available times next to the hospital.
Those who were shown the times next to the hospital took 14 seconds on average to make that choice, while those who were led to another screen took 21 seconds.

Emergency vs. first available time

83% of users (n=83) correctly described the difference between the emergency and first available time button.
Users wanted the ability to click on the address and have the directions and map pulled up.

Handheld vs. stacked

Almost all users preferred the handheld approach. Users wanted to be more involved in the process, and questioned why certain fields were pre-populated.
Users agreed that the stacked approach felt more overwhelming and visually cluttered.

QUOTE FROM THE INTERVIEW

“Every step of the handheld approach is crystal clear and simple- a kid could make an appointment for his dog.”

Takeaways

Embracing non-linearity

Throughout the process I realized how non-linear the design process can be. The back and forth nature of going from user flows to research to high-fi and back again helped me think holistically about the app since it will eventually be used for retail and pet education.