Healthy Pet
Embedded Files
An application to allow pet owners to get a detailed view of pet food ingredients and purchase those foods.
Check out the project: High Fidelity Prototype Link - Designed with Figma
Overview
Background
I have pets and I thought about how hard the process of finding quality pet food is. I also talked to other people who have pets and they had the same issue. It would take a long time to figure out what food is actually good for your pet.
This is where the idea for healthy pet came from. Providing people with the ingredients up front with an easily understandable ingredients UI.
The Problem
It is too hard to find pet food that has a detailed list of the good and bad ingredients in plain sight.
Role
Product Designer
Visual & Interaction Designer
User Research
Prototyping
Timeline
September 2021 - October 2021
The Goal
To provide an app that makes finding and purchasing a pet food with each unique pet’s specifications fast and easy.
Defining the problem
User Research
To evaluate how well this would work as an application I interviewed 8 of my family and friends. I found out that many of the users were struggling with finding a pet food that met their pet’s specific needs.
Finding a food that catered to a pet’s allergies was like hunting for a needle in a haystack in the store. Finding a food that is grain free and affordable is just as hard.
Key Insights
Ingredients are hard to find and hard to understand.
Pet Food commercials are misleading
Investigation takes too much time.
Recipes often change without notice.
Defining the User
Problem Statement
Linda is a retired teacher and pet owner who needs an easy way to find the best all natural ingredients with no allergens because she wants her pets to be healthy and have no more allergic reactions.
The Users Journey
Creating Wireframes
Home
Ingredients
Lo-fi digital wireframes
Check Out The Project: Low-Fidelity Prototype Link
Conducting a Usability Study
It was observed that 5 out of 5 users could use a better navigation process, an insight is: The navigation menu is not set up to be in the natural flow of the users.
It was observed that 3 out of 5 users would like to see a recurring order screen, an insight is: that a recurring order option could be added somewhere in the process.
It was observed that 3 out of 5 users want to see a continue shopping button added, an insight is: that users would like to continue shopping after they have added items to the cart.
Before Usability Study
After Usability Study
Creating High Fidelity Mockups
Check out the project: High Fidelity Prototype Link
Challenges faced during the prototype stage.
Paper Wireframes
It was challenging drawing out these paper wireframes because this was the first app that I built completely by myself. Looking up resources for creating paper wireframe drawings and what they should look like helped me get through this process.
Usability study
Creating a usability study in itself was a difficult process. I struggled with the communication aspect of how I ran my unmoderated study. Quite a few of the users I had go through the app thought it either was supposed to have more functionality than it did or that there was no functionality at all. I need to do a better job in the future of clearly defining the expectations I had for the usability study.
Low Fidelity Prototype
There was a lot of feedback during my low fidelity prototype stage. Which features to implement and which to put on the back burner was the biggest challenge for me. I went with the common themes amongst the feedback instead of wanting to add it all.
High Fidelity prototype
This was my first ever high fidelity prototype. A lot of the pieces were troubling while putting it together. The hardest part for me was creating multiple product pages just to have them all go to the same place. In the future I should keep it to one page that shows the functionality of the app to stakeholders and they will have an idea of what every product page does.
Accessibility Considerations
One
All Colors were run through an accessibility tracker at WebAIM, and received passing on each test that they have. One color that was prevalent in the design was changed to match the standards of UX design.
Two
Buttons have been arranged in a way that is easily accessible for everyone. The screen is not cluttered and it is easy to navigate between screens.
Three
An option to increase text size, switch to high contrast, make text larger, and enable a dyslexia mode have been added to an accessibility menu in the bottom right hand corner of every screen.
Takeaways, Impact, and Lessons Learned
Impact
I was talking to one of my friends that I interviewed for this project. He just got a puppy 6 months ago. He told me recently, “Man I could really use that app that you’re building right about now. My dog needs to change because she’s getting sick.” This makes me excited about the future of this app.
What I learned
I learned so much from this project. My main takeaway is that the user and their feedback is incredibly important. Going in to this I thought I would know what someone would want from an app like this. I was partially right but I learned so much just from listening to the users who tested it.
Other Projects
Page updated
Google Sites
Report abuse