Yummy Dog Food App

Mobile App Design
Project Image
Project YEAR
Spring 2021
ROLE
User Experience, User Interface Designer
RESPONSIBILITIES
Research, Interaction Design, Visual Design, Usability Testing

Project Overview

It can be difficult to keep track of your dog’s medication and dietary requirements. That’s where Yummy comes in to help! Yummy is a subscription based dog food app that strives to deliver nutritious meals that are custom designed to accommodate for different health needs. Yummy also allows you to order medication and track their intake, providing a comprehensive view of your dog’s health at a glance.

Goals

Design an app that allows users to easily order food and medication for dogs, and help administer the medication while utilizing an intuitive, responsive, and accessible interface.

My Design Process

Empathize, Define, Ideate, Prototype, Test
Empathize

Understanding the Business & Users

Dogs are family, and as our family members they deserve special attention when it comes to their nutritional needs. While creating this app I conducted a substantial amount of research so I could better understand the habits and needs of dog owners. I conducted interviews, created empathy maps, and personas to understand the challenges of owning a dog. A primary user group identified through research was working adults with special dietary and medication needs for dogs. My aim was to find out what problems dog owners encounter in feeding their dogs, and how they track the medication needs of their pet.

User Interviews

I interviewed eight participants with diverse backgrounds and age groups. I asked open-ended questions to learn as much as I could about their experiences and identify what the users' needs truly were. Below are some of those questions and prompts:

1. Tell me about your pet.

2. What information would you care about your dog if you had access to that?

3. What do you struggle with in managing your dog’s needs?

4. What is your budget for dog food?

5. How do you currently feed your dog?

User Persona

Based off of the user interviews and research, I was able to get a clear picture of who Yummy’s target users are and created two personas that would accurately represent them — meet Nancy and Ram! I even posted these personas in my office wall for the duration of the project. This way I could glance at them every now and then to ensure my design is centered on users.

Persona

User Pain Points

After my initial research and interviews, I wrote out all the data on sticky notes and organized them into categories. This helped me get a better overview of all the information gathered and helped uncover some key pain points for my users.

Lack of Customized Food

Dogs have different needs based off of age, weight, and allergies. It can be difficult to find customizable food for your pet in a grocery store setting.

Medication

Coordinating with your vet and ordering medication can be a hassle. This problem is magnified with multiple dogs.

Tracking

People have a difficult time adhering to a medication regimen for their dogs, particularly when it comes to tracking the doses.

Competitive Audit

After researching and gathering user requirements, I conducted competitive analysis to know how other companies are fulfilling these needs.  Through my research, I identified top direct and indirect competitors within the industry. These include Chewy, Barkbox, Spot and Tango, and The Farmer’s Dog. I especially focused on mobile apps provided by these companies to understand their user experience. Reading the reviews on Google and Apple app stores helped tremendously in this evaluation.  The insights gained here provided key information in terms of the strengths I wanted to build upon and the weaknesses I wanted to avoid, all while keeping user goals in mind.

Competitive Analysis Diagram
Define and ideate

Defining the Problem and Finding Solutions

After researching and empathizing with my target users, Nancy and Ram, I began to articulate what actual problems Yummy is solving for, and also identify opportunities to address these problems. To help define these problems, I used the insights gained from research and my understanding of user requirements to create journey maps. Through journey maps I was able to compile a skeleton of user goals and actions. This skeleton is fleshed out with user thoughts and emotions in order to create a narrative that was useful in my design process later during information architecture.

User Journey Map

Key Features

Nancy and Ram’s journey map helped me identify clear opportunities in addressing their needs. Now it was time to start the brainstorming process with an “HMW” (How Might We) questionnaire and Crazy Eight Activities. These techniques helped me come up with ideas and features that address user pain points and frustrations. Below are few proposed features for the app:

Customize Pet Food
Rationale: Dog owners like Nancy have to hunt for a specific type of food for their dogs due to their allergies. I decided to present an editable list of all the ingredients in the Yummy food menu. Nancy can remove a certain ingredient in the app before placing her order.

Medicine Tracker
Rationale: Contacting the vet, waiting for prescriptions, ordering, and administering medication was the biggest hassle for busy dog owners like Ram. I included a medicine tracker with notification features to address these problems. I also captured vet information during the checkout process so Yummy can directly contact the vet and get a prescription for the medicines. This way, both food and medicine can be delivered in the same order.


Dog Profile
Rationale: To help users with multiple dogs, I created separate profiles for each dog with information like their weight, meal plans, next order date, and quantity of meals in each order. I captured some of this information upfront during the sign up process questionnaire. I also included the ability to edit the meal plan schedule with the changing needs of their pets.

User Flow

Before diving into paper wireframes, I outlined  a high level user flow to help visualize how users will move through the Yummy app in a way that would be logical and intuitive. I created the user flow diagram with three questions in mind:

1. What actions will users take in the app?

2. What decisions will users make?

3. What screens will users see after taking action or making a decision?

User Flow

Paper Wireframes

When it came to designing Yummy’s screens, I made thoughtful decisions informed by all of my research data and sketched low-fidelity wireframes on paper. Doing this allowed me to quickly modify my designs with ease. I came up with at least five ideas for each screen laid out in user flow, and used stars to mark the elements of each sketch that would be used in the initial digital wireframes.

No items found.

Low Fidelity Wireframes

Using the completed set of digital wireframes, I created a low-fidelity Prototype using Figma. My goal was to include all the interactions needed for Nancy and Ram to complete the main user flow of the app. This helped me conduct a through Usability Testing in future steps of the design thinking process. The primary user flow I connected was filling out a form and ordering dog food and medication. These wireframes would help clarify what was needed in terms of functionality and user experience. I also shared these wireframes with my peers to obtain their feedback and tested it against Heuristic principles.

Low Fidelity Wireframes Screenshots

Usability Testing

With my prototype completed, I started working on a research plan to guide the testing that would be conducted. I then recruited participants and conducted two usability testing studies in order to see how users interact with my design and whether they were seamlessly able to complete core tasks. The results from the first study helped crystallize the ideas from the wireframes into mockups. The second study used a high-fidelity prototype and showed which elements from the mockups needed further revisions.

Goal
To test the usability and interactivity of the app and understand if the user is able to perform core tasks successfully using Yummy.

Research Questions
1. How long does it take the users to finish core tasks?

2. What are the steps where the users get stuck or need guidance?

3. How do the users utilize the medication tracker?

KPIs

1. Time on Task - How many minutes do the users take to place an order

2. User Error rate - How many times do the users ask for assistance or get stuck while placing an order

3. Conversion rate - How many users complete the entire process of ordering food. How many users complete the navigation and activity of tracking medication.

Discoveries

1. Users do not like to see all the questions at once. It is a turn off for them and can be intimidating.

2. Some users did not like to enter their full card information. They preferred a quick payment method.

3. Some users tried to swipe between ‘Dog Profile’ and ‘Medicine Tracker’ cards instead of clicking on them to switch between the two.

Actions

1. Present one question at a time instead of overwhelming users with all the questions. Incorporate options to click on instead of manual data entry.

2. Include Apply Pay and Google Pay options for a quick payment.

3. Enable swiping of cards along with clicks to accomodate both type of user behaviors

Before and After Usability testing images
Prototype and test

High Fidelity Prototype

Prototype

After rigorous usability testing, I began conceptualizing the Yummy brand on a visual level. I wanted a minimalist design; I used grey and white as the backdrop while orange highlighted call to action elements. The same words that came to mind when I thought of Yummy - fun, energetic, modern - I tried to use as the main tenets of my visual design.

Style Tile Image
No items found.

Reflection and Learnings

I am quite proud of how Yummy turned out. But I am equally proud of the process that brought Yummy into fruition.

Simplicity

The more features I developed, the more complex the app became. Many of these features were useful in their own right, but obfuscated the main flow and purpose of the app. Finding the difference between useful and necessary led me to develop a more intuitive user experience.

Value of User Centric Design

I printed my personas and hung them on my office wall for the duration of this project. This helped me keep the process user-centric. Each time I had a decision to make, I would look at my personas and make a call in their best interest.

Importance of Testing

Throughout the project I learned the importance of testing. I made a point to test paper wireframes, low fidelity prototypes, and high fidelity prototypes with a diverse group of users. Their feedback became integral in improving the design.

Next Steps

I really enjoyed the process of developing Yummy. With that being said, I do see a few key ways I could further improve the app:

Flesh out additional functionalites and expand offerings
While I generally hesitate when it comes to adding lots of features - as mentioned above, a simple and streamlined experience is key. There are a few ways I could develop these functionalites and expand food offerings to small treats for pets within the app.

Include analytics
I would love to explore if Yummy can get data around dog’s overall health directly from Vet. Yummy can include some of this data in the ‘Dog Profile’ section of the app and update it automatically with each vet visit.

Hand off and implementation
I would create a hand off plan with necessary documents so that developers or stakeholders could continue work on Yummy and take it to the next level.