11Pets

Project Overview

Synopsis

In this personal case study, I redesigned a portion of 11Pets, which is a pet care app that allows owners to track all of their pets’ information and records, as well as share this information and set reminders. I identified various user pain points throughout the app, ultimately honing in on the following problem tasks: adding pet meal information, setting meal reminders, and logging consumption. After conducting a heuristic analysis of the many screens users must navigate to accomplish these tasks, I created a new flow that consolidates the process into 4 simple screens. I then redefined the visual direction for the application and prototyped what these screens could look like.

Problem

11Pets’ Current User Interface is not visually appealing and makes it difficult to complete important tasks.

In particular, users struggle to input new foods, schedule meal reminders, and monitor food consumption for multiple pets, because it requires them to click through numerous screens containing unnecessary options.

My Role

UX/UI Designer

Timeline

3 weeks

Completed December 2021

Team

Self directed, with feedback from Accenture leadership

Tools

Figma, Photoshop, Framer, Miro

View Prototype

11Pets Mockups (12)

Information redacted to maintain client confidentiality.

3. New Food Entry - Meal Info for Pets 1 & 2

Design Process

1. User Research

Affinity Diagram
User Persona

2. Ideation

Problem Definition
Task Flow
Heuristic Evaluation
Feature Prioritization

3. Design

Sketched Wireframe
Digital Wireframe
Visual Design & Moodboards

4. Animation & Prototyping

Visual Asset Animation
High Fidelity Prototype

1. User Research

Affinity Diagram

11Pets is a comprehensive pet care app with over 50 features ranging from tracking medical records to adopting a pet. As such, there are a myriad of screens and possible flows within the application. Furthermore, I did not have access to 11Pets’ users, nor any user research they may have conducted, making it challenging to establish a scope for this particular project. However, this allowed me to find creative approaches to identifying a target user, as well as the pain points they encounter with the application.

Data Gathering

I found that there are over 4,000 reviews of the app in the Google Play store, with a substantial amount displayed directly on the 11Pets Website. I selected a sample of 100 reviews posted within the past two years and began screenshotting any excerpts that provided the following information:

User demographic information (gender, number of pets, etc.)
User goals (what they want to accomplish with the app)
User pain points (general issues, as well as specific grievances with particular features)

I then pasted all of my screenshots into Figma and began organizing them into groups based on identifiable trends.

User Demographics Diagram

User Goals Diagram

User Pain Points Diagram

Key Insights

Users are typically female and have multiple pets of differing species.
Users rely on the app to frequently manage information over a long period of time.
Users need the app to track all of their pets’ information in one place, so it is easily accessible.
Users depend on the app’s feeding and grooming reminders in their daily lives.
Users struggle to manage information for multiple pets within the app.
Users have difficulty finding the information and features they are looking for, because the app has so many pages.
Users have trouble configuring the app’s settings, in particular with the food entry and meal tracking functionality.

User Persona

Having now gained a better understanding of the user, I created a persona that reflects who they are and what they desire:

Carrie is a middle-aged mom of two elementary school children. She and her husband own a home in the suburbs of Charlotte, NC, where she works as a secretary.

Carrie has been an animal lover all her life, and as such, the family has three pets: a dog and two cats they recently rescued from an animal shelter. These cats have special dietary needs, and Carrie wants to make sure she can keep on top of setting up and managing a precise feeding schedule for them, as well as for her dog. She has been using 11Pets for three years.

Table of Contents

2. Ideation

Problem Definition

Once I finished my initial user research, I drafted a problem statement to concisely define the issue I would address throughout the remainder of my design process:

“11Pets’ current user interface is not visually appealing and makes it difficult to complete important tasks.

In particular, users struggle to input new foods, schedule meal reminders, and monitor food consumption for multiple pets, because it requires them to click through numerous screens containing unnecessary options.”

Task Flow

Original Flow - Task Flow

Now that the problem had been narrowed down, I created a Task Flow of each step users must take to complete the aforementioned tasks (inputting new foods, managing meal reminders, and monitoring food consumption). This allowed me to gain a deeper understanding of the current process, and clearly demonstrated how convoluted the flow is.

Original Flow - High Level

I also screenshotted each of the distinct screens involved in completing these tasks, linking them together to create a Prototype. This additional visual aid highlighted various pain points throughout the flow, as well as lead me to identify redundancies that could be eliminated.

Flow diagram with screenshots for each step in the flow.

Heuristic Evaluation

I then conducted a Heuristic Evaluation of the 8 main screens that comprise the flow, specifically focusing on ways to reduce unnecessary screens and consolidate information.

Feature Prioritization

Table of Contents

3. Design

Sketched Wireframes

I then sketched out low-fidelity wireframes of a new, streamlined process for inputting new foods, managing meal reminders, and monitoring food consumption.

Digital Wireframes

Visual Design & Moodboards

When determining the visual direction of the updated interface, I knew it was imperative to keep photographs of the users’ pets at the forefront of the experience. Users such as Carrie absolutely adore their pets and want to see them displayed as often as possible, which is a sorely missed opportunity in the current application.

General Moodboard

Additionally, this project presented an opportunity for me to experiment with a number of visual design trends, including illustrations, animations, blobs, and dark mode. I examined various interface examples that incorporated these trends and created a moodboard for inspiration. I focused specifically on examples that utilized yellow/gold in an attractive, modern way, as it is 11Pets’ primary branding color (but can be notoriously challenging to design with).

Illustration Style Moodboard

When it came to choosing a particular art style for the illustrations in the app, I was drawn to the work of Gary Baseman, the pop surrealist artist behind the boardgame Cranium and the television show Teacher’s Pet. Baseman’s art is heavily inspired by his own pets and captures the playfulness and quirkiness of animals. His art does tend to be quite dark, however, so I scoured Behance and Dribbble to find examples of lighter works in the same wheelhouse.

UI Pattern Moodboard

Finally, I searched for user interface patterns that would work with the flow I wanted to create, such as entry forms, reminder toggles, alerts, and more. I created a board to display them and was able to draw out certain elements to incorporate into my design.

Table of Contents

4. Animation & Prototyping

Virtual Asset Animation

Asset Creation

Leveraging artwork created by Justas Galaburda, Emily Mullett, as well as various stock images, I stylized and created the virtual assets necessary for the illustrated scenes in my design.

First, I used the food bowl asset to build a stylized, gamified slider for users to log their pets’ food consumption. This turns an otherwise mundane and overlooked task into something fun and delightful for the user to complete.

I then combined the remaining assets to create the scene displayed on the Meal Reminder and Log Consumption screens. Additionally, I modified certain elements of the assets for each frame of the Meal Reminder animation.

Collage of virtual asset scene and variations

Meal Reminder Animation

Finally, I used Framer to create the finalized Meal Reminder Animation, which shows the cat glancing expectantly between its bowl and the food. The inclusion of animation at this point in the flow intentionally brings an additional element of delight to the user, encouraging them not to immediately dismiss the alert, as well as to engage with the application to log their pets’ consumption.