Google UIUX Certificate

ROLE: UX Research, Interaction

DURATION: 6 weeks

TOOL: Paper Sketch, Figma, Protopie, AE, AI

About Pawpal

Pawpal is a pet food app that helps users track their pets' health and provide nutrient solutions.
It also features a pet food scanner function that helps users to know if the pets' food is safe

Key Feature 1 : Pet Health Tracker
Include "Pet Tracker" for users to track pets' meals and health data

Key Feature 2: Ingredient Preview
‍It brings easy-to-read data visualization for users to understand the ingredients in a short time. It will also identify harmful pet food ingredients found in dog and cat food by scanning the barcode.

Design Approach:

This project followed Double Diamond Method to empathize, define, and develop solutions for creating the pet food app.
‍Observation, Define and Develop were the three main ingredients when creating our design solutions for the app.

Define the painpoints users encountered while reading the pet food information

We established a starting point to ask specific questions about our users, issues that may arise, and how we might go about solving them. We’d like to figure out the difficulties users encountered while reading the pet food information both online and at local stores. Our team would later decipher what was accurate and what wasn't.

Hard to read the information

⦾ Pet food ingredient information is hard to read both by font size and actual meaning. (Especially for those chemistry elements)

Unsafe Ingredients

⦾ Contain Elements that pet might be allergic to.
⦾ Contain ingredients not fit for human consumption.

How Might We...

HMW help pet parents confidently take care of their pets by:
⦾ Incorporate a way for users to track pets' health.
⦾ Create interfaces to monitor the pet's meal
⦾ Conduct an easy-to-read food ingredient preview page

Understand the Users

Using questionaire to understand the behaviors

We conducted a user questionnare with people age from 18 to 65 who needs to buy pet food, and have an interest to know more about pet food ingredients. These are the highlights of the insights we discovered when working through the questionnaire results and feedback.

Conducting interview to discover users' unseen needs

Primary Research:

By analyzing the results from user interviews and survey data, we noticed thatmost pet owners willing to know more about the food ingredient.
Especially the first-time pet owners are eager to seek for a healthy diet to their pets.

User Voices

User needs align with what we found in previous qustionaries

What we learnt:
Most user would like to know more about ingredients

Competitive Analysis : Understand the market trend

I also conducted competitive audit analysis of other similar products in the market. There is no such product that could provide both pet health tracker and pet ingredient preview function at the same time, hence our opportunity in the market.

Case 1: Chewy
online retailer of pet food and other pet-related products. Acquired by Pet Smart.‍

Case 2: Safe Pet Treats:
Identify harmful pet food ingredients by scanning the barcode.

Case 3: Buddies
Pet tracker and community by Blue Buffalo.

Read the detailed Competitive Analysis here

Insights: There is no pet food ingredient preview app in current market, yet 85% of pet owners do value this information.

In the current market. Most apps display ingredients as texts, which are tedious to read and less appealing to users. In the meanwhile, our empirical study shows that 85% of pet owners we surveyed do value the food ingredient and consider it as the key factor when shopping for pets.
These insights bring us the motivation to design a pet food ingredient visualization & interaction app, which creates a better user experience to preview food ingredients and empowers users to analyze their pet nutrient needs.

Meet the Doris and Erin

User Personas: Understand common pet parenting behaviors

Based on the research insights and pain points, there were 2 main user personas that the app needed to solve the problem for.
1 Provide health life style to pet both mentally and physically
2 Provide easy-to-read ingredient preview function for users to understand the product in a short time

Doris: Provide pet with healthy food hollistically

Erin: Provide pet with healthy food with efficiency

User Journey Map:
Define painpoints, and provide design solutions

For Erin,
The goal is to provide her pet with healthy food by having a better understanding of the ingredient in a short time.
Erin is a full-time landscape designer who needs an app to show clear illustration of pet food ingredients because she wants to bring the most healthy food for her pet without spending tons of time researching.

Ideation & Prototyping

Goal Statement:
Empowering users with the ability to analyze pets' health and pet food ingredients in a short time

We are creating a pet food app that provides suitable & safe food for pets. It will affect pet owners' shopping style by empowering them with the ability to analyze pets' health and pet food ingredients in a short time. We will measure effectiveness by the task compelte rate and log-in frequency. We want to create a product that can compete in the market, improve sales, and increase customer satisfaction.

Key Functions: Search - Product Info - Add to Cart

To better understand how we would construct the core experience for Pawpal, we designed a user flow. This helped us focus more on the experience and needs of the user and less so on the details that we would solidify later on.

Erin's use case in shopping online for pet food.

Learnings:
Following Erin's experience of purchasing food for kiki through web platforms, we found she has two major issues:
1. She usually selects the food by ranking and review. But that information could be misleading and she feels unsure about which pet food suits Vivi best.
2. She always aims to provide Vivi with a healthy diet, when she selects supplementary food like treats, she is uncertain about the Kiki's total nutrient intake.

Key Pages

Identify 5 key pages that address the previous insights. The scope of design will focus on two main fundtion which is :
‍Pet health tracker page and Ingredeint preview page.

Paper Sketch

Close-up Storyboard

Onboarding
‍
Search/Scan Product
View Product
Ingredient Preview
Feeding Guide

Pet Profile
Pet Tracker
Recommended Food

Preliminary Wireframes

To understand the content/information relationship & priorities, wireframes options for the homepage, pet profile page,product page, product ingredient preview page were detailed out.

Learning:
One of the key feature is to bring easy-to-read data visualization for users to understand the ingredients in a short time. It will also identify harmful pet food ingredients found in dog and cat food by scanning the barcode.
However with low-fidelity mockups, we can only test how user completion rate of each task, we cant test how they react to the infographic on pet ingredient preview page. The success metric for this page is about how much information user get from the infographic, and how these information affect their decision making of shopping habitat. So after few iterations, we bring hi-fi mockup on selected key pages for further disccusion.

Usability Test

Read UX Research Study Plan

Invite 5 participants to conduct the unmoderated usability study. Eash session lasted for 15-20min.Later conducted affinity maps to sort the results.

Onboarding Experience
It was observed that 2 out of 5 participants had difficulty finding the “create profile button”

Feedback:
‍This means we need to add the onboarding pages for Day 0 users for convenient registration.

Searching Experience
It was observed that 3 out of 5 participants completed Task: Find pet products by pet category.

Feedback:
‍This means we need considering add a scan feature to improve the in-store shopping experience.

Ingredient Preview Page:
It was observed that 1 out of 5 participants discovered the pet food ingredient preview page.

Feedback:
‍‍This means that we should improve the infographic and add more visual weight to this page.

Iterations:

Home Page Iterations:

Ingredient Preview Iterations:

High-Fidelity Mockups

Onboarding

01. Easy to use onboarding pages
‍
02. "Scan function"
By using scan the QR code on the back of product cover, Pawpal will help users to check the ingredients by scanning the barcode.

Ingredient Preview

01. Increse the Ingredient Font Size by using the Manify Lens.‍

02. Using pie chart to visulize the ingredient information and analyze the porpotion of main ingredient.
‍
03. Core Nutrients lists major ingredeint, proportion.

Pet Tracker

01. Top Navigation Bar extension include pet's avatar and allow users to add more than one pet.

02. Pet Profile Dashboard that show's pet's informaion include weight, meal track, age, breed and recommended product.

03. "Feed" encourage users to keep track of their pet's daily meal. Pawpal will provide the nutrient recommendation based on the data provided by users.

Style Guide: Playful, Friendly, Intuitive

Using matching playful tones of color with fun and relaxing purple/pink/blues, we were able to sell the identity of Pawpal as a playful, friendly, intuitive application.

Design System

Accessibility

Before Using A11y Checker

Resetting contrast ratio for better accessibility

Things I will improve if we have more time

01. In P2, we will add a feature to highlight the ingredient that might do harm to pet's health.
02. Include a sharing function to allow user share the pet's info with hopitals.

Takeaways

Pawpal as a concept is something that I feel society would greatly benefit from. The primary difficulty I had while designing this product was the task of creating a screen that could display pet food ingredients in an easy-to-read way, for everyone. Accessibility and unbiased design are also two key considerations I emphasized in this task. I found some of my assumptions that were wrong during the usability test. I feel that although there may be a better solution out there, we designed an experience that works well for most users.

Go Back To All Projects ->