Vetter

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.

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.

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.

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.

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.

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.

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.

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.

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.

Looking at top errors...

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.

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.

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.

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!