DogFoodFinder | Warren.Codes Case Study

About the Project

My Role

I acted as the UX Designer in this project.

Duration

This project was completed over a duration of two (2) weeks.

The Goal

Design a dog food and ingredients application that will help users make informed pet food choices on-line. Some pet owners feel uncertain as to whether they are purchasing the best food for their furry friend—this application is to offer full ingredients listings and reviews to alleviate this.

Target Audience

Adult pet owners that regularly buy food for their dog(s), ranging in age from eighteen (18) to fifty-five (55).

Approach Pre-Design

Reviewed the product expectations
Prepared and performed interviews
Created empathy maps
Developed a user persona
Wrote user stories
Made user journeys
Formed problem statements
Ran a competitive audit

Research

I collected my thoughts and questions regarding the goal, sized up any potential competition, and prepared a questionnaire to learn more about potential end-user thoughts and needs. I was careful to make sure questions were open-ended, as I wanted to understand their perspective.

Sample Questions

What do you look for when selecting dog food?
Does your dog have any dietary restrictions?
Have you purchased dog food online? Would you consider it?

Making Sense of the Data

Once I had notes from a variety of interviews, I reviewed the answers closely. I created a persona based on the general ideas the data conveyed, an empathy map, and a user journey map.

Persona

Meet an average DogFoodFinder user: Anita Tortellini.

About Anita

Anita is a twenty-five (25) year old undergraduate Seattleite. She lives with three (3) roommates in a suburban house with a yard. To make ends meet while going to school she works as an attendant at a local kennel. At home she has a lagotto romagnolo puppy named Yori—lamb doesn't agree with her.

My fur baby goes with me everywhere!

Goals

Find healthy and nutritious food for my puppy
Find food that is appropriate for a dog of Yori's age
Find food that will fit into my budget

Frustrations

It can be hard to find stores that carry a good dog food
I need food that my dog isn't allergic to

Crazy eights idea sketching, user flow chart, story boarding, and wireframes.

Problem Statement

Anita is a dog owner who needs to select a dog food to purchase because she wants to feed her dog appropriate and healthy food.

Hypothesis Statement

If Anita visits the dog food and ingredients web application, then she can research and make an informed choice about the dog food she selects.

Goal Statements

Our dog food and ingredients application will let users make informed pet food choices on-line which will affect users who might be uncertain if they are buying the best food for their dog(s) by offering full ingredients listings, reviews, and information.

We will measure effectiveness by tracking how many people search and click-through to visit external store sites to purchase something as well as make a note of how many in-site reviews are added by users of the application.

Steps Toward Design

Having taken the time to get to know what future users of the application may need, and how an application like this could fit into their lives, I was able to more confidently make my way through the design process:

I wrote down potential ideas
I sketched out and iterated on my ideas
I thought out and diagrammed potential user flows
I developed "big picture" storyboards to get an idea of where and when the app might be used
I created "close-up" storyboards to visualize what sort of steps a user would go through when using the web site
I began to create wireframes to get a general idea as to what would need to be in each page

Wireframing & Lo-Fi Prototyping

With the essentials of the design in-mind, I took to Figma to bring my pen-drawn ideas to digital life! Firstly I whipped up basic wireframes and low fidelity representations of the app's pages. Once they had just enough detail to tell their story, I took to Figma's prototyping features. This allowed me to breath some life—some interactivity—into these early versions of the design.

Design Choices

I wanted to place emphasis on a very select few features that would be most helpful to the average user:

Entering dog information for easy searching
Entering and customizing searches to find the right food
Learning about picking a dog food

In addition, I tried to stick to web site norms to ensure a familiar and easy experience. Elements like a hamburger menu icon, profile icon, buttons, and a consistent footer made an appearance in these iterations.

Usability Study Takeaways

To understand if the design ideas were really effective or not, I had a few people run through the prototype. It can be so eye-opening to view how another sees the project!

It became quickly evident that the design was a bit confusing:

The home page was too busy
Search results and buttons were unclear
A couple of pages were missing

With valuable feedback like this, it was easy to apply some fixes before continuing to a higher fidelity rendition.

Mock-Ups

I designed detailed mock-ups, resembling a finished product. I took care to add a lot more detail while taking the time to consider accessibility when it came to contrast and consistency throughout the web site.

During the mock-up phase I had the chance to decide which form inputs and navigation items were appropriate for each page. The feedback from previous steps were handy here! I made sure to make navigation always available and very clear.

New Prototype

With a fuller, high-fidelity design, it came time to develop a new prototype. Using the same tools I produced a hi-fi prototype that I could place once more into the hands of eager testers.

Are you one of them? Feel free to have a look for yourself, and let me know your thoughts!

Visit Figma

Thank You

I appreciate your taking the time to have a look at this case study. If you'd like to return to the main page and see what else I've worked on, please use this link:

Back to Main Page