Rayne Leroux

Rayne Leroux

Menu

Rayne Leroux

Menu

Digivet

Connecting pet owners to qualified vets for on-demand online veterinary care.

Time:

Aug ’22, 5 months

Scope:

Mobile app design

Role:

UX/UI Designer (Personal project)

THE PROBLEM

Pet owners struggle to find veterinary care due to a surge in pet adoptions since the COVID-19 pandemic and a shortage of veterinarians.

“Pet owners need a convenient solution for professional pet care when in-person vet visits are not viable”

THE SOLUTION

Digivet is an online veterinary care platform that gives pet owners a simple and intuitive way to connect with a vet within minutes so they can be informed and prepared to provide the best care for their pets.

THE COMPETITION

To start the project I conducted a competitor analysis to understand competitors’ strengths and weaknesses, and identify opportunities and threats using the SWOT method. The analysis revealed key elements to incorporate into the app for a distinctive and positive user experience.
Competitive Analysis of Online Veterinary Care Services including: FirstVet, Pawsquad, Chewy, Vetster, and PetCoach
Insights

The analysis revealed the following key features to include in the design:

  • Provide useful information about the service and care upfront
  • Easily accessible information about the vet’s backgrounds, costs, and availability
  • A fully functioning app that provides a seamless experience across all devices
  • Useful criteria for filtering and sorting search results of vets
  • A personalised experience



Understanding the User

I surveyed 18 participants using Google Forms and conducted four remote interviews to understand pet owners’ challenges and experiences with veterinary care. Aggregating the data into an affinity map on Miro provided insights which were used to create two personas representing the needs, goals, motivations, and frustrations of pet owners.
User Survey Insights
2 out of 18 had experience with online vet care 16 out of 18 would consider using online vet care
15 out of 18 faced in-person vet visit issues 3 out of 18 struggled to find a specialist vet
User Interviews

Details

I interviewed four participants ranging from 25 – 60 years old and located in the US or Europe online via Zoom.

Research Goals

  1. Understand the challenges pet owners face with veterinary care
  2. Determine the perceived benefits and drawbacks ofonline pet care
  3. Determine the features pet owners expect to find in a veterinary care app

Affinity Map

Key Insights

  • Limited availability of vets including: inconvenient appointment times, long waits, and limiting time slots.
  • Physical challenges including: uncooperative or anxious pet, long travel times, and COVID-19 restrictions.
  • Shortage of specialists for exotic pets.
  • ‍Lack of online information such as pricing and services offered.
  • Concerns of low quality or limited services relative to in-person vets.
User persona of Lucy. A 24 year old woman who recently graduated from university and is now working as a marketing assistant for a large company. She lives alone in a small city apartment with her pet rabbit; it is the first pet she has owned. The image includes her motivations, needs, and frustrations in regards to veterinary care.
User persona of Camila. A 37 year old shop manager who lives with her partner and three pets. She has two pet dogs (an older one and a rescue) and an indoors cat that hates the vets. In recent years their local vets have become understaffed. The image includes her motivations, needs, and frustrations in regards to veterinary care.

USER JOURNEY AND FLOW

I created a user journey map to understand how Lucy may interact with the app as a first time user and consider opportunities to enhance her experience. Following that, I developed user flows and user stories to identify Lucy’s potential interactions and to guide the ideation process.

User journey map of a first time user
User flow creating an account and booking an appointment
User flow of attending an appointment

DESIGNING THE PRODUCT

Applying the mobile-first approach, I created sketches for the user flows and converted them into low-fidelity wireframes. I transitioned to mid-fidelity wireframes and a prototype, adding more detail to the designs to address specific user interactions and visual elements.

A row of low fidelity wireframes of the app
A row of mid fidelity wireframes of the app

TESTING THE PROTOTYPE

I conducted a moderated remote usability study with the prototype. Qualitative data collected was organised into an affinity map in Miro, and findings were prioritised using a rainbow spreadsheet. While all participants successfully completed tasks and found the app easy to navigate, the study revealed errors and important usability insights
Usability Test Design

Objectives

  1. Observe how easily participants complete three tasks in the prototype
  2. Observe how participants navigate in the app
  3. Observe participants thoughts and feelings whilst completing the tasks

Tasks

  1. Create an account
  2. Book an appointment
  3. Attend appointment

Metrics

  • Learnability was measured by the success rate of user tasks
  • Usability errors were categorised according to Jakob Nielsen’s rating scale
  • Qualitative observations and feedback from the participants were documented
Analysis

Overview

All participants completed the tasks successfully and found the app easy to use and navigate. Some participants took longer to complete tasks due to the errors mentioned below and their feedback indicated the dashboard required revision.

Aggregate

Affinity map of user testing


Prioritise

Rainbow spread sheet prioritising usability findings

IMPLEMENTING INSIGHTS

Using the insights from the usability test I made the following revisions to the wireframes:

Issue 1: Half of the participants could not review onboarding information due to the absence of a button.
Solution: Implement swipe function for movement between onboarding pages.

Onboarding wireframe revised using insight from usability test

Issue 2: A third of the participants took extra time to pay due to unnoticed card selection.
Solution: Use a radio button to indicate payment method is (un)selected.

Issue 3: A third of the participants misinterpreted icons.
‍Solution: Replace icons with more intuitive imagery.

Payment wireframe revised using insights from usability test

Issue 4: A third of the participants were uncertain about the required data for forms.
Solution: Place asterisks in labels to indicate mandatory vs optional.

Issue 5: A third of the participants hesitated due to wording.
Solution: Replace texts with more suitable words.

Sign up wireframe revised using insights from usability test

Dashboard Revision: Users found the dashboard sections overwhelming or unnecessary.
Solution: Sections were relocated under ‘Settings,’ creating space for more useful features.

Dashboard wireframe revised using insights from usability test

VISUAL DESIGN

Before building the high-fi prototype, I defined the visual appearance of the app by creating a style guide and design system to maintain design consistency. Applying colour psychology principles, I chose a calming deep teal as the primary colour and a contrasting bright orange as the secondary colour to convey optimism for pet owners

The image showcases a style guide with sections for typography, colour palette, grids, and design elements. Typography section displays font styles, sizes, and examples of headings and body text. Colour palette section exhibits a range of colours with corresponding hex codes and colour names. Design elements include icons, buttons, and other graphical elements.

THE FINAL PROTOTYPE

Using feedback from the usability test and implementing accessibility standards and the style guide, I created a high fidelity prototype in Figma.

VIEW PROTOTYPE

CONCLUSION

NEXT STEPS

For continued project development, a usability study with the high-fidelity prototype is recommended to validate revisions and explore user preferences for the signup process.

LESSONS

🦋 Small decisions, big impact

I overlooked the dashboard for returning users when designing user flows which had a ripple effect on my process. Moving forward, I will be more mindful of the bigger picture and dependencies.

🧪 Test your tests

At the beginning of conducting usability test I encountered some issues with the task wording in the script. In the future, I will conduct pilot tests to address these problems earlier.

🤷 Don't accept all user input

Recognising the context, goals, and limitations of user feedback is crucial before incorporating it into the design.

Scroll to Top