UI DESIGN / UX DESIGN


Project Overview

The Product

Pet People is a pet food subscription service app that specializes in direct to customer all natural pet food. The mobile application allows users to create an account and multiple pet profiles, which enables the ability to build a favorite meals list curated to each pet profile in the app.


My Role

Sole UI/UX Designer


Duration

10 months


Tools

Figma, Adobe Photoshop, Paper and Pencil


Pet People App Mockup Image

Problem Statement and Solution

Pet People App Problem and Solution Image

Target Users

The product's primary targets are:
1. Working adults who work full-time jobs during the day and do not have the time to research pet food or go to the store during the day.
2. Working adults who are on a budget and need a pet food brand that has consistent cost and supply.

Pet People App Design Process Image

Empathize

I conducted user research and created user stories and personas to better understand my users’ needs and goals.

User Research

I conducted interviews and created empathy maps to understand the users for whom I’m designing for and their needs. A primary user group identified through research was working adults on a budget who have a hard time finding pet food brands that have an affordable, consistent cost. Research also revealed that purchasing pet food is often a time-consuming task for many target users.

Pet People App Pain Points and User Stories Image

Personas

Pet People App Personas Profiles Image

Define

User Journeys and Flows

In addition to the personas, I also created a user journey map and user flow for the app’s main functions. I wanted to understand how my users would complete a function and what they would need to accomplish it.

Pet People App Journey Map User Flow Image

Competitor Analysis

I continued the define phase of my process by conducting market research and competitor analysis to better understand who my competitors were and what they did well or poorly.

Pet People App Competitor Analysis Image

Ideate

Paper Wireframes

When creating the paper wireframes, I wanted to make sure the sign-up process was quick and easy by giving users options to speed up sign-up with popular account-linking options. Another main feature I wanted was to give the users the option to skip filling out profiles. This will help users who do not want to spend too much time on sign-up advance to the dashboard quicker.

Pet People App Paper Mockups Image

Digital Wireframe

Pet People App Digital Wireframe Image

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was signing up for an account and viewing menus, so the prototype could be used in a usability study with users.

Pet People App Low-Fidelity Prototype Image


Usability Studies

I conducted two rounds of unmoderated usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Pet People App Usability Studies Findings Image

Style Guide

I made a style guide to show and instruct others on the final choices for all visual aspects, including colors, icons, and typefaces.

Pet People App Style Guide Image

Mockups

Registration and Login

Registration screens were designed to make users sign up or sign in quickly. Users can also register using their Facebook or Google linked accounts.

Pet People App Registration and Login Image

Dashboard

This is one of the most important screens. It is the central hub users will use to navigate between all other screens within the app once they establish an account.

Pet People App Dashboard Image

Food Menu Screens

The food menu screens are very important, as they give users the options to view choices of food according to the users preferences. There is a 'Picked for You' menu, which consists of recommendations generated for each pet based on past order history. There is a 'Your Favorites' menu which displays all items the user has selected as favorite for a quick view. There is also a 'Full Menu' option for users who prefer to see all items available for purchase.

Pet People App Food Menu Screens Image

Cart and Payment

The checkout process was designed to be quick and easy for users. Here the users can view their cart and edit items for purchase before proceeding. Shipping and payment was designed to be simple and straightforward.

Pet People App Cart and Payment Image

Other Screens

Pet People App Other Screens Image

Prototype

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for signing up for an account and a more complete checkout system. It also met user needs for unique menu buttons and larger button sizes throughout the app.

Pet People App High-Fidelity Prototype Image


Accessibility Considerations

Pet People App Accessibility Considerations Image

Takeaways


Pet People App Takeaways Image

Quote From User Feedback:

“I really like the straightforwardness of the fields where you need to sign up, doesn't seem like there's a lot of junk you need to filter through to get to where you need to go.”
“It's super easy and clear how to work your way through it. I would definitely use it.”


Next Steps

Pet People App Next Steps Image


Let’s Connect

Pet People App Let’s Connect Image