Case study: MyPet — A mobile app to help pet owners with their pets’ needs.
UX Designer, Pedro Mendonça Santos
Oporto, Portugal
The project
‘MyPet’ is my fourth UX project that I designed to continue my work as a UX Designer. ‘MyPet’ is a mobile app that will help pet owners with their pets’ needs.
As the only designer working on this mobile app, I designed this project from conception to delivery. My primary responsibilities were conducting interviews/inquiries, developing paper and digital wireframes, low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.
Project duration
September 2022, to November 2022
The product
‘MyPet’ is a mobile app that will help any pet owner to keep track of all their pets’ needs including notifications for the next deworming, vaccination dates, and with an easy registration setup.
Problem
Being a pet owner can be a little bit complicated; keeping an eye on the vaccination dates, knowing when the next deworming is, or not having an easy way of booking an appointment with a vet nearby.
Goal
‘MyPet’ app design allows users to effortlessly keep track of their pets’ needs and easily book appointments with a vet of their choice.
Design Thinking Process
1 — Empathize
2 — Define
3 — Ideate
4 — Prototype
5 — Test
Research — Understanding the user
I conducted several inquiries and interviews to try to comprehend the pain points regarding their overall experience and needs so that I could understand the users I am designing for. The primary user group identified were young adults with at least one pet that do not use any online platform and need an easy way of scheduling a vet for their pets.
Initial assumptions about the users were confirmed regarding the fact that most pet owners end up scheduling veterinary using a phone call.
Pain points
No platforms
Most vets do not offer any platform that allows pet owners to schedule their appointments.
No vet diversity
Most users take their pets to the same vet, and online platforms only work with a small number of vets.
Time
Some users feel that scheduling an appointment could be faster and more flexible.
Persona
Problem statement
Olivia is an engineer who needs an easy and fast way of scheduling online vet appointments for her pet, as well as getting alerts for the next scheduled deworming and vaccination, as Olivia wants to save time and make sure her pet gets the best care possible.
Goal statement
‘MyPet’ app will let users quickly register their pets, schedule vet appointments, and receive notifications about future services that their pet needs. This will allow users to save time and make sure their pets get all services they require.
User journey map
Mapping Olivia’s user journey revealed how useful it would be for users to have a dedicated app with some options like a rating system and “near me” for the best search results, as well as a notification system for the next vet appointments.
Storyboard
Storyboarding the most important parts of the user’s experience and journey with our product, can help all the stakeholders understand its impact in a real-life context. I used one type of storyboarding: Big-picture.
A Big-picture Storyboard focuses on what the user needs, the context, and why the product will be useful to the user.
Starting with the Design
User flow — book an appointment
Using a diagram as a reference for my design, helped me start to understand what steps are needed for the user to complete the primary task the app provides.
Paper wireframes
Taking the time to draft iterations of the home screen on paper, assured that all elements and information that made it to digital wireframes and — later on — high-fidelity prototypes, would be capable of addressing the primary user’s pain points.
As an example, on the first screen of the app, I prioritized the main task of the user which is a quick and easy way of scheduling a vet’s appointment for their pet. Additionally, some essential information about the user’s registered pets was added to the app’s homepage.
Digital wireframes
Continuing the initial design phase, I guaranteed that every screen design was based on feedback and findings from the user research, placing the user front-centered.
Homepage
The Homepage delivers elements that aim to allow the user to quickly check all the relevant information related to their pet, e.g. next booked appointments, deworming dates, and pet info.
At the top of the homepage, the user will be able to quickly and easily swap between registered pets, as well as add new pets to the app.
The navigation bar invites the user to easily start searching for a vet, and also gives emphasis to schedule an appointment with a larger icon at the center, enhancing the primary tasks.
Low-fidelity prototype
The low-fidelity prototype connects the user flow of searching and scheduling a vet for a registered pet, and also the user flow of adding new deworming information.
You can test it here.
Testing designs
Usability studies
I conducted two rounds of usability studies. One study was with a lo-fi prototype and another with a hi-fi prototype. Findings from the first study helped guide the design from wireframes to mockups. The second study used a high-fidelity prototype and revealed what elements of the mockups had to be refined for a better user experience.
Study #01 (lo-fi) insights
- Users need more options and a clearer way to register.
- Users want a faster way of scheduling a vet after searching.
- Users need a very detailed vet page with all the relevant information.
- Users want to be able to add dewormer detailed data.
After the first user study using the lo-fi prototype, I started designing a round of mockups and the prototype directly iterating from the first study.
Mockups
Homepage
Early designs allowed users to check all the relevant pet details, deworming information, and schedule appointments. The navigation bar allowed users to quickly schedule an appointment and search for vets.
After the usability studies, I decided to emphasize various details, such as deworming details, vaccination details, and appointment details — this way users would easily check all the relevant data right in the homepage. The navigation bar was also redesigned to deliver more pertinent options.
Vet’s page
Early designs did not consider a detailed vet page with all the important vet’s data as well as a reviews system. Some users felt that something was missing.
To resolve the issue, I added to the design a very detailed vet page that allows users, with a simple swipe, get from the vet’s details to comments and reviews.
Study #02 (hi-fi) insights
- Users want a simple way of adding new deworming info.
- Users need to be able to edit deworming, appointment, and vaccination alerts.
After this step, I designed the second round of mockups directly iterating from the earlier studies.
High-fidelity prototype
The final high-fidelity prototype offers a straightforward user flow with a clean and simple design that meets the users’ expectations, delivering the most important elements like searching and scheduling an appointment, adding new deworming data, and providing a review system for users to comment on a specific vet.
You can test it here.
Key mockups
Accessibility
Always a major focus.
Accessibility was always at the center of my design. Below are some considerations about the app’s accessibility.
1 — Simple and clear iconography
2 — Visual cues and animations that help the user confirm key actions.
3 — Colors are a11y, enabling people with visual impairments or color vision disabilities to have a seamless experience using the app.
and much more.
Going forward
Takeaways
Impact
The app looks mature and ready to be in the users’ hands. The design feels very clear and is surely user-focused.
Naturally, this app would require a whole number of vets to be available to use the system so this concept could be put into practice.
This project was more complex than initially expected. Definitely, within the health context, not being an expert created some limitations. For a future launch, it would be necessary a careful analysis of all the components of the app to make sure every piece of information is accordingly to what is acceptable to the vet health’s system.
Let’s connect!
Thank you for the time you spent reviewing my work on the app ‘MyPet’.
If you would like to get in touch with me, my contacts can be found below.
LinkedIn: https://www.linkedin.com/in/pedrosantosmedia/
Email: ux.pedrosantos@gmail.com
