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 .

Low Fidelity Prototype V1

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.

High Fidelity Prototype

Please click the above link to see the high fidelity prototype.

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.

Page updated

Google Sites

Report abuse