bone appetit
The product: The website is to help dog owners discover which dog food to order by creating a profile. Through this profile, the user will get a list of recommended items for their dog and they can add it to their subscription. They will also get a recommended delivery frequency during checkout and will be able to choose which date they will get their first delivery.
The problem: Users would spend some time looking for which dog food they should get their dog. Also, they were unable to select which date their first delivery date.
The goal: To create a quiz that will filter through 2000+ brands and types of dog food and present a small list of recommended food for dog owners.
2/1/2024: Updated the visual design of this project
Understanding the User
Summary
I conducted a survey to get a better understanding of people who use subscription-based vendors. From the survey, people who use these types of services like that it’s easy to set up and forget when the next delivery shows up, however, wishes that they can edit when the first delivery comes in.
I did a competitive audit on indirect and direct competitors such as Amazon, Chewy, TheFarmersDog, and PetFood. The process to set an item on a subscription is easy but finding an item perfect for your dog takes a while. TheFarmersDog starts users with a quiz based on users’ dogs and they show recommended food to order.
Pain Points
Finding the right item
Users would spend time filtering 2000+ items to find the perfect dog food to get their dog.
Can’t adjust the delivery date
The first delivery date isn’t adjustable and is usually set to the next month when users need it sooner than that.
User Persona
Starting the Design
Paper Wireframes
I drafted 4-5 versions for each page of the delivery scheduling flow and after making them I realized that it doesn’t incorporate a fun experience to the flow so I included the profile/quiz creation to be the main point.
Digital Wireframes
For the homepage, I wanted users to know that there is an option to create a profile to make it easier to find the right dog food for their dog.
After taking the quiz, users will be presented with a summary of the quiz and a list of items recommended for their dog .
Here is the first iteration of the user flow.
Users had the option to browse around or take the quiz on the homepage.
Usability Study Parameters
Study type:
Unmoderated
Location:
Remote
Participants:
4 people. 2 female in mid twenties, 2 males in late twenties
Length:
15 mins
Usability Study Findings
Users didn’t start quiz right away.
Users “started browsing” since it’s the first thing they see on the homepage
Profile creation took too long
It felt like a chore since they had to fill everything in.
The checkout page felt too wordy
Users felt like there was a lot going on in this page. Too many details being added
Refining the Design
Single page -> Multiple pages
The questions are broken up into different pages so it's not overwhelming as having it all on one page.
Updated buttons
The add to cart process is less wordy. Users can click on the item icon if they want to go back and check the description instead of having it on this page.
sneak peak of the mobile version
Accessibility considerations
Checked to make sure that the colors selected were readable
All images are supplied with a caption underneath
Content is structured and separated with large headings
Sticker Sheet
new sticker sheet (2024)
old sticker sheet (2021)
Going Forward
Takeaways
Impact:
Main takeaway was that the animation portion of the prototype was fun for users, especially during the quiz portion.
What I learned:
I learned that it’s okay to break things down into separate pages for the quiz portion and that less is more for the checkout pages.
Next Steps
Compile a sticker sheet for this project. This way I can see what can be added as a component. I have most of the components added on the sidebar but to have it on one artboard would be nice
Do another user testing to see what else can be added during the quiz portion. Although the quiz is nice, I would like to incorporate more dog issues or maybe picture examples in case people aren’t sure of the answer.
Possibly reach out to an engineer to bring the prototype to life. I would like to see an animation for the “what type of dog do you have” since I only listed one type of dog.