Dog food is a very complicated subject that requires a deep understanding of canine nutrition needs and proficiency in identifying good vs. bad ingredients. Articles about choosing dog food are lengthy and dry. Current filtering on retail websites (i.e. focuses more on the marketing side of things rather than benefits for the dog.
I wanted to simplify the food selection process and make it more visual while still providing the opportunities for educating the user about dog nutrition. Present the nutritional info from the label in easy to digest style. 
This is a mobile version of the website.
Due to the focus of this class being on prototyping and interaction design, no real user research being done. Data for user persona, user experience map, and information architecture is strictly anecdotal and comes from observing friends rather than actual in-depth user research.
Content for this project is taken from


Customer value proposition canvas (anecdotal data):
Yellow - customer jobs
Red - Painpoints
Green - Gains

User Experience Map (experience before finding Dog Food PI). 

Paper prototype

Paper prototype user test

• No next button was planned for on-boarding. User mistook skip button for a next button.
Need to include next button and separate it from skip button.
• Accordions during onboarding and in ingredients portion of food card were confusing to
the user. Could be an error of representation. Maybe explore placing an info icon next to the
items that need explanations instead.
• "Create an account" as a checkbox was confusing to the user. Explore the possibility of sign
up UI appearing on the same screen. Also possibly move this screen to the very end of the
flow (after "where to buy")
• "Summary" screen seems to be redundant to the user. Remove or recycle for the "Profile"
• No "done" UI on filters pop-ups seem to confuse the user. At first, the user didn't see the
cross at the top of the pop-up.
• Some labels need exploration. I.e. labels for the parts of the app (instead of icons)
WIREFRAMES (Low Fidelity):
WIREFRAMES (Medium Fidelity):
USER FLOW R4 (not current, needs to be updated)
Back to Top