Hey everyone! My book "A year of lunchbox doodles" is out now on amazon! Check it out! 💕
MmmKitty
A cat food subscription app 🐾
Project Overview
The Problem
A significant gap in current cat food subscription services is the lack of detailed ingredients and nutritional information, including essential allergen details on the ingredients preview page. This poses a risk for pet owners with cats that have specific dietary needs. Some additional issues include a lack of accessibility and high delivery costs, which makes the service unviable for many users.
The Goal
To create a subscription cat food app that will let users preview all ingredients and nutritional information, allowing cat owners to be sure they are meeting their cats’ unique dietary requirements.
My Role
In this individual project, I planned and directed each step of the design thinking process as a UX design student. This involved gaining hands-on experience in every phase, from initial concept to final execution.
Responsibilities
Conduct user research
Define the problem and provide insights to inform the ideation phase
Define personas, user journeys, empathy maps and user flows
Visual design of lofi and hifi wireframes, prototypes, and user testing
The Product
MmmKitty is a fictional cat food subscription app with a focus on displaying important ingredients information.
Project Duration
Q4 2023 (school project with breaks in between)
Understanding the User
Limited Ingredients Info
Almost all participants interviewed mentioned either finding ingredients and nutritional information limited or confusing; some mentioned they were unsure which ingredients were “safe” and which were “concerning”.
High Cost
Many participants stated they would like to subscribe to a cat food delivery service for convenience but avoided it due to high costs beyond their budget.
Running out of Food
A few participants, particularly those with untraditional work schedules, find themselves running out of their pets’ food; they would love the convenience of not having to think about whether or not they have cat food in the pantry.
Accessibility Issues
Secondary research revealed a lack of accessibility in local online cat/pet food websites. This included a lack of language support as well as minimal optimization for screen readers.
User Research: Summary
To get an understanding of target users’ needs and frustrations, I conducted secondary research on the target demographic, as well as user interviews. I then gathered all data to create empathy maps in order to gain insights on users and better understand their pain points and wants.
User Research: Pain Points
Meet the Personas
Problem Statement
Ben is a busy nurse with a cat and a dog who needs a way to minimize his errands because he and his wife find it difficult to find time to get things done in their day to day.
Problem Statement
Tina is a visually impaired lawyer living alone with two cats who needs to be able to read and understand all ingredient and nutritional info about her cats’ food before ordering online so that she can be sure what she is giving her cats meets their unique dietary requirements.
Focus on Ben: User Journey
Goal: To find a budget friendly cat food delivery service that balances quality with price.
Starting the Design
Paper Wireframes
With insights gained from both primary and secondary research, I designed paper wireframes.
One of the main pain points was limited ingredients and nutritional info, so I made sure to address this issue in my wireframes, being sure to clearly indicate important info such as common allergens.
Digital Wireframes
I then transferred my ideas to a digital format.
As a subscription based service, delivery times are a key aspect, so I made sure to have that info front and center on the homescreen.
Also shown is the catalog page, where I planned to include allergen and product info to further address the “limited information” pain point many users complained about.
Low Fidelity Prototype
I created a basic user flow to place an order for cat food, including various ways to get to the same result. I also made sure there was a way to get back to the homescreen once an order was confirmed, so that the user would never be “stuck” at a page.
Usability Study: Intro
As this was my first UX Design project, I opted to ask friends and family who owned pets to test out my low fidelity prototype. I found 4 participants, and let them test it out for themselves, unmoderated. I asked them to to place an order for a product.
Usability Study: Findings
Catalog Button. The catalog button on the homescreen was more attractive than the bottom nav option, with all but one participant choosing that method to access a path to search for and order cat food.
Discount/Coupon Placeholder. The discount/coupon placeholder I had added on the Shopping Cart screen confused some participants, who wondered where it came from as they hadn’t added a coupon themselves.
Shopping Cart. Some participants mentioned a lack of shopping cart, wondering if it would be included in the more refined mockups. They mentioned having a shopping cart is something they are used to in their e-commerce apps.
Delivery Frequency. A few participants mentioned the way the delivery frequency was displayed on the Shopping Cart screen was weird. They said it was a bit unclear what 1/month and 1/2 months meant.
Refining the Design
Mockups
Taking the feedback from the usability study into account, I further refined my designs. For the shopping cart, I removed the coupon placeholder, and made the frequency option clearer.
Before usability study
After usability study
Before usability study
After usability study
I also added to the delivery details on the homescreen, seeing as participants seemed to appreciate having that information available to them immediately. Shown below, I also added a shopping cart to the top nav bar.
Mockups - other screens
High Fidelity Prototype
As I designed my high fidelity prototype, I made sure to keep everything I learned in mind. I focused on making the app kid friendly and appealing to younger audiences, focusing on cute graphics and presenting info through images.
Because the target demographic is highly sensitive, I opted to use soft, calming colours in order to avoid overstimulation.
Accessibility Considerations
1.
I made sure my chosen colour palette conformed to WCAG AA colour contrast ratio and colour blind accessibility standards.
2.
I chose easy-to-read, sans serif fonts for my design, assuring to keep the body text no smaller than 12pt.
I included text below my nav bar icons to assure clarity of what they represent.
3.
Going Forward
1.
Obtain UX/UI feedback from more experienced designers and peers in order to improve the design further.
2.
Further the design; as this was my first project, I feel that many design choices could be relooked after I have more experience under my belt.
Create a companion website that furthers the user experience; improving convenience and ease of access.
3.
Impact
Next Steps
The pain point I focused on while designing this app was limited ingredients and nutritional information. I focused on creating a clear and detailed ingredients section to allow potential users to gather the knowledge they need in order to confidently choose an appropriate cat food for their pets. I also hoped to improve user experience by making the app clear and convenient; displaying key delivery information on the homescreen as well as making it easy to adjust delivery options.
What I Learned
Takeaways
This was my first UX Design project, so learned a little bit of everything along the way. I learned how the UX design process worked, and conducted my first usability study and user research. It introduced me to Figma for use in UX Design, which I found intuitive as it functions similarly to Adobe products. I still have a lot to learn, but this project gave me the confidence and passion to keep going.
Let's Connect!
Thank you for reviewing my work on MmmKitty, a cat food delivery subscription app!
If you’d like to get in touch, please reach out!