Meowchelin Responsive Web App
Role
UI/UX Design, User Research, Information Design, Copywriting
Duration
3 Weeks
Tools
Figma
Context
The Meowchelin app came first, and then a responsive web app was created right after using a design technique called graceful degradation. As more people start using the internet on mobile devices, it is crucial to create designs that can adapt and respond to different devices.
The Problem
Not enough cat food companies address specific dietary needs of different cats, which can make it difficult and time-consuming finding safe and healthy food for our pets.
The Solution
Meowchelin is an ecommerce responsive app whose goal is to make it quick and easy for cat owners to order safe and healthy food for their cats without having to seek out specialty pet stores or leave the comfort of their home. This way, they can continue on with their busy lives and still have time to bond with their cats.
Understanding the user
User research
Personas
Problem statements
Competitive audit
User Research
“I work long hours and sometimes I don’t even have the time to get food for myself, let alone go to the pet store to pick up food for my cats.”
- Interviewee #1
Analysis
I conducted interviews and created empathy maps to better understand the users I designed for when it came to their needs. The main group that was found through research were cat owners in their early-to-mid 20s who work full time and don’t usually have time to go from store to store looking for food for their cats. Some of them have cats with special dietary needs and preferences.
This user group validated some of the previous assumptions about Meowchelin’s customer base, but it also revealed some other factors that affect how they find food for their cats. Some problems found include changing dietary preferences of their pets, the diet questionnaires not being thorough enough, and lack of accessibility features on competitor sites.
Personas
Gianna is a full-time overnight worker and a part-time student with little free time who needs a way to buy food for her cat in the fastest and most efficient way possible because she doesn’t want to lose any time she could be dedicate to getting enough rest.
“I need a way to cook healthy meals when all I have in my dorm room is a microwave and an air fryer that I’m not even allowed to have.”
Goals
“Gianna”
Find an easier and more convenient way to order food for her cats
Be able to quickly compare prices spend her money wisely
Frustrations
Not enough time to buy food for her cats
Needs to be able to quickly and easily see what is in her cats’ food before purchasing
Personas
Kris is a photographer with allergies who needs a way to find specialized foods that both they and their cat are not allergic to in order to keep everyone in their family safe and healthy and to save time.
“The last thing I want to do at the end of the day is make myself some food. Sometimes I just don’t end up eating or I spend an unreasonable amount getting McDonald’s delivered.”
Goals
“Kris”
Find a way to know exactly is in their cat’s food
Order and buy everything in one piece, not from several stores and site
Frustrations
Cat has health issues, so it’s important that her food is safe for her
Having to go to different specialty stores and websites to order food and treats
Competitive Audit
An audit of a few competitor’s products showed some insight into some gaps and opportunities to address with the Meowchelin app and responsive website.
Starting the design
Ideation
Digital wireframes
Low-fidelity prototype
Usability Studies
Ideation
My goal was to make the app as visually appealing, but as simple as possible in order to prioritize what users’ needs and solve pain points.
For the home screen, ended up with something clean, simple, with clear iconography to guide the user.
Digital Wireframes
After ideating and drafting, initial designs were created in order to give an overall look at the app design.
These designs focused on making it easy for cat owners to find the food their cats need.
Low-Fidelity Prototype
To prepare for usability testing, a low-fidelity prototype was created to connect the user flow of finding a recipe and going through the recipe preview page and cooking.
Low-Fidelity Prototype Usability Study: Parameters
Figure out the pain points of finding cat food, whether it’s for healthy cats or cats with special dietary needs. See whether the Meowchelin responsive webb app will help make this process easier and less stressful.
Study Type
Unmoderated usability study
Location
USA, Remote
Participants
5 participants
Length
15-20 minutes
Low-Fidelity Prototype Usability Study: Findings
1
Font Size
Font size needs to be adjusted for hierarchy indication and accessibility.
2
Iconography
Iconography wasn’t quite intuitive, and switching from ‘X’ for selection to a ‘✓’ for selection in the questionnaire would be clearer.
3
Button Addition
A button has been added to the header of the website and tablet sizes to improve access to the onboarding process no matter where on the site users are.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Generally, a cat “enjoying all proteins” has a positive connotation, so the use of a checkmark would make more sense and eliminate any confusion.
Feedback from users indicated that they wanted to be able to access the questionnaire flow from multiple points in the site.
Buttons and links were added to the hamburger menu and header for ease of access from anywhere on the site.
High-Fidelity Prototype
The final version of the high-fidelity prototype shows a clean, more intuitive flow, with several accessibility features. It also meets user needs and improved their overall cat food buying experience.
Accessibility Considerations
1
It was important that the options for changing languages and using a screen reader were present on every page.
2
Font size of texts were adjusted according to importance and overall hierarchy in order to aid those who use screen readers.
3
There are options for using voice commands in order to help those who aren’t able to use their hands/fingers comfortably.
Responsive Design
Information architecture
Responsive design
Site Map
The goal of the website is to ensure that the Meowchelin meal + diet questionnaire was fully completed in order to ensure every detail about their cat is accounted for.
This meant that portion of the site is sequential.
Paper wireframe screen size variations
It’s vital that information be accessible and readable from all platforms and devices, so screens were resized accordingly.
Digital wireframe screen size variations
It was important to give access to the same information whether the user is on a desktop computer or a mobile device.
Information is more spread out on mobile in order to increase accessibility and overall readability for all users.
Going forward
Takeaways
Next Steps
Next steps
1
Another round of usability studies will help confirm whether the app has met their needs and if a good user experience is consistent across the board.
2
More research when it comes to users in order to continually improve the experience in any way possible, whether it be to existing features, or the addition of new ones.
Takeaways
Impact
Meowchelin is a convenient multi-platform responsive app designed to assist cat owners in effortlessly discovering quality food options for their beloved feline companions, all while alleviating concerns about cost. By utilizing the service, both cats and their caring owners are incentivized with rewards, creating a strong motivation to embrace a solution that ultimately benefits their cherished pets and themselves.
Lessons Learned
While the primary focus of UX design lies in enhancing the experience of human users, it is important to acknowledge that animals can also be positively influenced by a well-crafted application. Pet owners can utilize well-designed apps to enhance their pets' well-being and engagement.