MARS Vet Health Doctor App

Veterinary app for doctors to easily manage pet visitation and records.

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

Company

Role

UX/UI Designer

Duration

5 weeks

Overview

Problem

Veterinarians work in a stressful, fast-paced environment. Vets go back and forth between taking photos on their phone and transferring/inputting data onto an outdated computer web app, all while attending to the pet. This constant back and forth is unnecessarily complicated and impractical, causing much anxiety among doctors.

Solution

The app will streamline the appointment process and allow doctors to easily view their tasks, manage appointments, and fill out pet records. The goal of this design sprint is to complete high-fidelity prototypes of the home page and patient record screens.

Ideate

Brand attributes

I began by ideating on what the look/feel of the app would be, and presenting to Mars for feedback. Attributes that stand out are Earnest, Warm, Intuitive, Focused, and Distinguished.

Design ideation Round 1

Because this was a brand new app for Mars, I began the design sprint by ideating on the brand identity. I designed a check-in screen with a "baseball card" for checked-in pets and a task bar at the bottom.

My design incorporates cool, muted colors juxtaposed with playful components to keep the overall feeling calm yet warm. The pet profile poking out of the baseball card adds a fun touch.

Client Feedback

Clear hierarchy of information

Colors are calm and muted

Layout is easy to understand

Needs more positive energy

# of Upcoming Visits and My Tasks is unclear from a quick glance

Interestingly, while the word "clinical" was initially a word that the app IS NOT (from the Brand Attributes Wordcloud), we slowly realized that was the direction to head.

Research

User interview

The research phase began with a user interview session with 10 veterinarians as they interacted with preliminary wireframes (mocked up before I joined) and our two visual design ideations.

Notable insights

  • Vets generally see ~15 pets a day.
  • Vets oftentimes stay past work hours to fill out patient record.
  • Compassion fatigue and depression are vey common among veterinarians. How might we find opportunities to uplift their spirit through the design of the app?
  • Most veterinarians anticipate an emergency visit at any point during the day.

HOW MIGHT WE...

Design a product that is flexible and accommodating of a fast-paced work environment?

User persona

Wireframes

Mid-fidelity

Focus on information hierarchy for home page, patient record, and image upload flows.

Usability Tests

Method

The research phase began with an interview session with 10 veterinarians as they interacted with preliminary wireframes and the visual design ideations.

Insights

For home page

  • There are only ~3 checked in pets at any given time so swiping the baseball card is efficient.
  • Iconography should be limited; all 10 vets agreed they'd rather just see information.
  • Users want an icon next to weight, alerting vet if weight is abnormal.
  • Seeing age is more important to vets than seeing temperature on the baseball card.
  • Appointment type for "upcoming visits"cannot simply rely on color-coding since new vets are constantly onboarding and that requires too much learning.

For patient record screens

  • Flagged information should never be collapsed. Doctors like to scroll and see everything at once; additional clicking is inefficient.

Final Design

Color Vision Deficiency

For the appointment type, the team proposed a set of colors that are level AAA when the color is used as a background behind text. The existing web app does not take this into account.The high-fidelity design was like a puzzle. Given the limitation of a very limited color palette, I had to develop clear visual hierarchy of information and maintain consistency throughout the app.

Visual identity

Text

System

Grays

Backgrounds

High-fidelity Prototype

The high-fidelity design was like a puzzle. Given the limitation of a very limited color palette, I had to develop clear visual hierarchy of information and maintain consistency throughout the app.

SIGN IN

BASEBALL CARD

UPCOMING TASKS - FILLED

UPCOMING TASKS -EMPTY

PATIENT RECORD - UNFILLED

PATIENT RECORD - FILLED

VITALS

PHYSICAL EXAM

PHOTO UPLOAD

ERROR

Conclusion

Takeaways

The success of the Mars Veterinary Veterinary App directly lies in how efficient it is for doctors to use. Throughout the project I learned to learned to empathize with the users rather than relying solely on my own personal preferences; what I think is visually pleasing or how I would use the app may be a pain point for the doctor. The decisions I made thus relied heavily on user research.

Back to top