Renee Moore-Adams
UX designer

Vetter

Enable people to connect with a veterinarian at any time, from anywhere

UX Case Study

Why a veterinarian advice app?

In the wave of COVID-19, healthcare delivery has shifted. The trend of telehealth in both humans and animals is on the rise. About 67% of Americans have a pet (source: American Pet Products Association, survey). The majority of those pets belong to Millennials and Gen-Z and they are wanting their pets’ healthcare on-demand just as they want theirs (source: Animal Policy Group).

Vetter was created to provide pet parents options to meet a variety of their needs. Whether they are traveling, staying at home, need an opinion on the urgency of the situation, are looking for a new vet in their area or just want to search through common questions, Vetter supports all of those needs in one place.

Dashboard of Vetter

Dashboard of Vetter

Project Details

Objective

Enable people to connect with a vet at any time, from any where

Stakeholder

CareerFoundry

UX Immersion Course
Project

6 months
Tools

Adobe XD

Miro

UsabilityHub

Google Forms

Optimal Workshop

My Role

UX Researcher

UX Designer

UI Designer

UX Writer

Design Process

Placing the user at the center of this process was necessary to create a thoroughly designed app, therefore, I followed the UX Design Process to achieve a well-rounded product.

Empathize

Here's the Problem...

Our pet parents need an efficient way to connect with a veterinarian from any place, have all their pet's health records in one place, research questions they may have, and have confidence in the expert they choose because they are entrusting the guidance of a professional to help improve their pets’ wellness.

Possible Solutions...

Create an app that allows users to access a simple interface, with a filtering feature that matches the expert with the best experience regarding the pet’s needs in the moment. The experts will have profiles for users to browse which and receive ratings from users after completion of their call. A chat feature option within the video conferencing portion will allow users to communicate with the expert in either mode of communication that they prefer.

Airvet analysis

Airvet analysis

Competitive Analysis

Similar apps, Airvet and KeepPet were analyzed with SWOT to review their approaches. This analysis would guide me in structuring a comprehensive design for overall pet care.

KeepPet analysis

KeepPet analysis

User Research

Research was conducted via a survey format and remote interviews. Questions were open-ended and allowed participants to expand on their thoughts. Surveys allowed me to reach a wider range of people, while interviews provided me with in-depth responses. From this research, I found a great need for a "one-stop shop" place for people to store their pet's information/medical history, contact vets via multiple means, find health information, and schedule pet care in advance. This led me to thinking very comprehensively about the design.

Vetter

Research Goals

  • To better understand users' thoughts in seeking out veterinary services

  • To determine which tasks users would expect to see using a veterinarian advice app

  • Contexts in which users would use a veterinarian advice app

Survey Insights

Within Google Forms, participants responded to a 10 question survey that sought out their views using an app for pet care and typical interactions with vet services.

Of the 28 pet parents surveyed...

  • 59% open to using pet advice app

  • 64% would contact vet more using an app vs. no digital option

  • Motivations and expectations of use

    • store pet information

    • quickly speak with a vet

    • decide if pet's situation is urgent for medical care

    • seek out health tips

Interview Highlights

Over virtual interviews, participants answered 13 questions regarding their interactions with vets, how they view and handle pet care, and what they find important in pet services.both positive and negatives of vet services.

From the interviews of 4 pet parents...

  • People are flexible with different vets seeing their pets.

  • Participants aren't currently using vet advice apps. Most of their pet apps are for health records and appointment scheduling.

  • Having a structure with categories to describe their pet's needs and just a few steps to get to a vet were frequently discussed.

Define
Personas-Julia (The Budgeter) & David (The Efficient Partner)

Personas-Julia (The Budgeter) & David (The Efficient Partner)

Personas

Based on the surveys and interviews, I set up two main personas. I created journey maps based off of their needs and referred to them throughout the entire product development process.

Julia and David were representative of parent parents with single (Bernie) and multiple pets (Cal and Mena). Basic information, goals/needs, motivations, and pain points were presented on their persona cards.

  • The main goals of Julia

    • Find highly recommended vets

    • Avoid office visit fees

    • Get input on urgency of situations

    • Service with affordable fees

  • The main goals of David

    • Find vets that can attend to his pets' special needs

    • Connect virtually, avoid office when possible

    • Have pets' information in one place (e.g., medical records, visit history)

    • Put in symptoms/concerns before speaking with a vet

    • Research questions about pet needs/ailments

User Journeys

I planned out user journeys by looking at possible scenarios that my users may experience and charted the process to meet their goals in user journey maps. The maps helped me work through possible tasks that my users would need to complete to meet their goals and also empathize with their possible frustrations as they work through their goals. I was also able to brainstorms some feature opportunities that could arise from creating their journeys and therefore add to their benefit when working through flows in Vetter.

Julia's Journey Map for Bernie

Julia's Journey Map for Bernie

David's Journey Map for Cal and Mena

David's Journey Map for Cal and Mena

User Flows

In order to be specific in the users' processes, user flows were formed with their objectives clearly stated with descriptive details of starting and completing their tasks in Vetter. The main flows included: placing an emergency call, setting an appointment for an in-person visit, and finding information on pet behavior.

Emergency Call Flow

Emergency Call Flow

Setting Appointment Flow

Setting Appointment Flow

Find Information Flow

Find Information Flow

Ideate

Sitemap and Open Card Sort

A sitemap was organized to include the necessary components of my personas. After a layout was formed, to understand where users' expectations for headings and groupings would naturally fall, an open card sort was conducted. From results of the card sort, the sitemap was revised to reflect what the majority of users expected and felt natural in the layout for Vetter.

Original Sitemap prior to Card Sort

Original Sitemap prior to Card Sort

Card Sort

Using an open card sort through Optimal Workshop's site, I extracted results through their card sort profiles and I found the Matrix to be incredibly helpful. The matrix from my study, pictured below, shows the percentages of participants that organized card into the same groupings. The deeper the blue and higher the percentage, the more in agreement participants were in those cards or topics being grouped together. From there, I refined my sitemap.

What changed with the sitemap?

Originally I had a "Menu", but reorganized that area to be the navigation bar based on the card sort and less steps for the user to access those areas.

I had thought connecting to a vet through each pet's profile would be the most convenient route. The card sort revealed that wasn't an obvious placement. Participants grouped "contacting the vet" in its own separate heading so I reflected that in my updated sitemap.

Revised Sitemap

Revised Sitemap

Prototype
Vetter

Sketches

With guidance of my personas and sitemap, I rapid prototyped sketches to brainstorm main user flows. By moving through these sketches, I started to think more about finer details of what I may add to the later fidelity wireframes.

Vetter

Contact Vet Flow

Making sure the contact vet flow was easily accessible was important since this could be a serious situation, depended on the need of the user and their pet(s). Firstly, I knew I wanted a one-click option to contact a vet from the homepage. As the user flows through options of how they get to speak with a vet were provided. They are given the option to speak with any vet or make a choice in who they speak to then provided with a quick payment and choices to make a video call or text/chat with a vet. After every interaction with a vet, users are prompted to rate their experience to provide feedback of vets on the app and allow future users to have trust in their decisions to speak with a vet in Vetter.

Vetter

Vetter

Set Appointment Flow

The set appointment flow allows the user to go into their pet's profile and make any future appointments. This way, the pet's information/history is already in their profile section and can be referenced based on the appointment needed. The user starts with an option to contact a vet, can put in symptoms/visit reasons (as the user persona, David wanted), and select the manner of how to contact a vet. This will vary depending on how soon the user needs to see a vet, so the options are there for different needs. If the user chooses to see a vet in-person, they can look through vets within a certain distance from them and read reviews on them so they can feel more confident in their choosing. Clear payment expectations are provided and an appointment reminder is pushed to the homepage under their "Upcoming" section.

Vetter

Vetter

FAQ Flow

As the personas also needed references for health tips/questions, a visual FAQ icon was placed on the app's bottom navigation bar to encourage users to look up their questions without have to dig too far into Vetter for answers. Users can type in keywords of their questions and receive a list of articles that are associated. From their, articles, from certified vets are expanded out for easy reading.

Mid-Fidelity Wireframes

To advance the design, I built my sketches into wireframes in Adobe XD. These would be prototyped for me to begin user testing. Additional screens include onboarding.

Mid-fidelity wireframes were structured to display more detail while adjusting previous wireframes. Edits were made to clearly support user journeys. For example, when setting an appointment, I wanted to show the ease of use to book appointments for more than one pet while having each pet’s information individually organized with quick and simple access. The user can place in details regarding their pet as well have options on who they want to see. On the other side, the efficient flow of contacting a vet in case of a more urgent situation displays a more streamlined and “to-the-point” process without requiring the user to make multiple decisions when wanting to speak with a vet.

Mid-Fidelity Wireframes in Adobe XD

Mid-Fidelity Wireframes in Adobe XD

Test

User Testing

To understand any usability issues, six participants, that had pets and experience with vet services, provided feedback of my prototype as we went through six scenario tasks during user testing sessions over moderated virtual calls. As they went through the app and completed tasks such as, setting an appointment with a vet, looking up pet records, going to the frequently asked questions section, etc., I recorded and documented responses and actions throughout in order to analyze further. My results were later showcased through affinity mapping and a rainbow spreadsheet.

Vetter

Affinity Mapping

I reviewed my usability tests from the recordings and documented observations, errors, and quotes with an affinity map in Miro. This map allowed me to get a better visual of what my participants noticed throughout their testing experience

Rainbow Spreadsheet

From there, I put this data into a rainbow spreadsheet to organize each participant’s commentary and observations from the tasks. Common errors or observations were ordered into a hierarchy. I had a better understanding of areas that seemed persistent in participants' responses. I highlighted the top five issues based on severity and planned improvements for each. These were discussed in my Usability Test Report.

Vetter

Looking at top errors...

Issue 1 & 2

Issue 1 & 2

Issue 1: Confused by FAQ icon (High Severity)

Change: Use a more descriptive, reflective looking icon.

Evidence: All the participants did not know what this icon was meant to represent and stated that they were wondering where it would take them when they clicked on it. Two thought that it was where they would find the credit card and one thought it was medical documents for the pets. The other three said they tried it for one of the tasks because they hadn’t used it up to that point.

Issue 2: (Set Appt) Looked for “Contact Vet” on home screen, not in “Pet Profile” (High Severity)

Change: I had accounted for the urgent contact vet to be on the home screen, but the nonurgent "Contact Vet” is still too hidden. Have a spot on home screen that differentiate between urgent and nonurgent vet calls.

Evidence: Five out of the six participants attempted to place a nonurgent call to the vet from the home screen and did not initially look under the “Pet Profile” section. P6 stated, “Why not have Set Appointment on the front screen?”

Issue 3

Issue 3

Issue 3: (Create Acct) Didn't like giving payment information (High Severity)

Change: Place an "Add payment later" next to payment section of Create Account

Evidence: Four out of six participants commented how they would feel uncomfortable providing financial information upon initially creating an account in a new app. They would like to go through the app first before providing any payment information. "Skip for now" was an option, but this wasn't clear for my users and I needed make certain the "add payment later" option was a salient feature.

Issue 4

Issue 4

Issue 4: (Set Appt) Fumbled through "Set Appt" and "Symptom" buttons, going back and forth between screens (High Severity)

Change: Part of this was my filled in symptom screens vs. the blank ones. Take the user through each click to advance to next screen. Leave off "Set Appt." option at top of screen and place prior to symptom screen.

Evidence: Three out of six participants moved multiple times between the symptom screens and the screen prior. Confusion of this process was evident in their comments and actions (e.g., “I think it’s confusing to get to the symptom’s page.” and “I’m not sure where to click.”) Participants also moved the mouse around the screen several times in attempts to decide where to click and advance.

Issue 5

Issue 5

Issue 5: (Pick Vet) Selected circle before clicking on times (Low Severity)

Change: Take out circles

Evidence: Four out of six participants naturally wanted to click the circles located next to the vets’ profiles before selected the date and time for an appointment. This caused them to stay on the screen longer and seek out other areas to click. These circles bring unnecessary confusion of where to click and is not required to differentiate between the vets’ profiles.

Preference Testing

The preference test gave me insight on designs that I hadn't made a decision on yet. I used my onboard screen for this preference testing since that would be the initial impression of the app. Participants brought up important reasons why they chose either screen. It was another learning experience for me since much of what they brought of seemed to make a lot of sense. It goes to show that when you're thoroughly involved in a design, you can sometimes miss the obvious needs of iterations. Below are my onboarding screens, options A and B.

Onboard Screen Preference

I tested my initial onboarding screen with the prompt, "Which design do you prefer?", to determine how users felt about the text in each one. One uses more text than the other. I wanted to make sure my message was clear as well, so I was interested in hearing feedback regarding the understanding of the app from this first screen.

Vetter

Results

My results were very much split and despite recruiting more participants, there wasn't a clear preference in a design from my participants. after receiving responses from 34 participants, I decided to look at comments provided on why they chose a particular design and make updates based on themes in the comments.

updated onboard screen-post preference testing

updated onboard screen-post preference testing

Iteration Choice

For Option A, 16 people mentioned that they chose that one because it had less text. comment like, "cleaner", "easier to read", "concise", and "less cluttered were used to describe their view of that screen.

for Option b, 16 people mentioned that they chose that one because the text provided a clearer understanding in what the app was about and its purpose.

I agree with both reasons and wanted to bring those recommendations into a better designed screen that would reflect both preferences from my participants.

Iterate

Iterations and High-Fidelity Wireframes

Revisions of Vetter continued to high-fidelity wireframes with at least 25 iterations along the way based on further user input. Gestalt principles were implemented with the main needs of building better hierarchies and proximations. Accessibility was reviewed and the original color scheme was updated to have better contrast. User perspectives were helpful in finding some overlooked needs of my screens.

Vetter

Vetter

Vetter

Design Guide

After working through the coloring for accessibility issues and laying out typography, design guidelines were formed for Vetter in Adobe XD. I found this part of the process tricky, but learned much more about accessibility and came away with an understanding that although a color scheme may be appealing, it is not necessarily the best choice to support everyone using the application or even the brand itself.

Vetter

Color Scheme

My primary color scheme includes blue, green, and yellow. These were chosen to create calmness and trust. I found these colors to be more professional looking than the bright green and pink that I previously used, especially for sensitive situations that users may be concerned with when using Vetter.

Vetter

Typography

I chose variations of Roboto and Open Sans to maintain a clear script as pixels changed. I didn't want to overwhelm the screens with too much variances in text styles.

Vetter

UI Elements

The majority of elements had rounded designs to be aligned with Material Design guidelines. I really liked the final look of the symptom checklist as it reminds me of a doctor's medical clipboard.

Vetter

Icons

I wanted the icons to be simple and predictable because I did not want to take away from the ease of use with the app and distract the user. Icons were from Material Design and Font Awesome icons. Some icons were combined to create one.

View Vetter's Prototype

Final Thoughts

With 44 mobile screens now complete, it is always possible to cycle through more iterations and continue improving on it. After all, that is the design process. That being said, I am proud of this end-to-end design that challenged me with every learning curve that I had to work through. My biggest challenge was to get creative in my layouts while still creating concise screens for a simple user experience. This project allowed me to really dive into UX and gain an understanding of users while also having me reflect on my own assumptions on what does and doesn't work. I feel I ultimately met my intentions with this design and met the goals from my research.

Thank you for your time in exploring Vetter!