Pet Savvy -A pet care mobile app -UI/UX Case Study

akash khushal
12 min readAug 26, 2023

--

Link to Figma File

Introduction

The adoption of pets is on the rise, and the pet industry’s 19% compound annual growth rate is a positive sign.

Well yes although a issue that comes with this growth, most people who adopt pets have no idea how to take care of them.

For example : If you’ve ever seen a cat in your locality or anywhere, the first thing people think that cats drink milk.
“Of course, haven’t you watched Tom and Jerry ? cats love milk !”

Only if it was that simple, in truth most cats are lactose intolerant and can’t digest milk and will get stomach issues if they drink milk.

unfortunately when it comes to pet care we have been misled by movies and cartoons,

See what I’m talking about ? the basic pet care knowledge is a rare thing among the majority.

Why this problem ?

Well, to be honest because I’ve been one of those many pet parents who didn’t know what to feed my pet and how to take care of him better, I knew nothing or anyone who can guide me regarding the same.

I knew this struggle wasn’t mine alone as I’ve seen friends go through the same as well, I decided to design a solution for the same.

From the wish to solve this issue of increasing pets and stagnant information regarding their care, the idea of Pet Savvy was born.

Problem Statement

To help pet parents in growth, care and understanding of their pets.

Goals

  • Create an app that’s easy to use, simple and user-friendly.
  • Help pet parents understand basic understanding of their pet care.
  • Help pet parents get in touch with other pet parents to share knowledge and wisdom.
  • Make the resources (pet food, doctors, pet toys etc.) easily accessible to pet parents.

The Solution

Here are the solutions I came up with in order to tackle the problems faces by pet owners :

Guides

Guide Section in Pet Savvy

The guides provide guidance to pet parents both new and old through guides either written by the team or other pet parents, so they can learn more about their own pets and things they can do better in taking care of the pet they already have or are thinking of adopting.

News

News in Pet Savvy

Pet news brings pet related news to pet parents about any new health and lifestyle studies and any serious flu or diseases they have to protect their pets against.

Vet Search

Vet Search in Pet Savvy

Vet Search provides the ease of access to the local veterinarians to the pet parents for their pets, so they don’t have to go through the struggle to find a good vet, instead they can just go through all the local registered vets and book and appointment with them.

Community

Community options in Pet Savvy

Pet community brings with itself the feeling of belonging with other pet parents where they share, talk and laugh about their pet’s cute and funny habits or just share the neat tricks they discover about their pets.

Adoption

Adoption in Pet Savvy

Pet adoption brings the ease to find the pets that are abandoned or need a new home. To-be pet parents can search and adopt their first pet, and those who are already pet parents can find another member for their ever-growing pet family if they feel their hearts have room for another soul.

Shop

Shop in Pet Savvy

Pet shop removes the hassle of pet parents finding the right pet shop for their pets, from where they can order food, toys, medicines and much more.

Health Tracking

(Left) Data Entry Screen when user signs up to Pet Savvy, (Right) Health Tracking in Profile page

When you sign up for the app and create a profile, the app takes data and run it through a system which on basis of current and future patterns calculates if your pet is hungry, thirsty or due for another vet visit. This gives pet parents a very good overview of their pet’s wellbeing and health.

Want to see the other screens in the app ? Click here to jump straight to the end (Click here)

How the solution came to be (The Process)

Now that we have discussed the solutions I came up with, allow me to take you on the journey of how they came to be and why some of them were there even though they were never mentioned in the main goals.

The design process followed in creating pet savvy

Research

So, I started with taking a look at our problem statement, and thought hard about what does it really means :-

To help pet parents in growth, care and understanding of their pets.

I came to understand that to completely understand what problems pet parents face, I need to talk to them and understand their experience and the issues they’ve faced in their own journey to raise a pet because even though I have experience in the same, in nuances my experience can be very different depending on the age, location, circumstances and many other unforeseeable factors.

Articles -Quantitative Research-

Before getting into the more nuanced research and studies, I wanted to know how is the situation of pet parents in India on a broader scale, so I took to the internet, to read about pet parents and their issues.
I read many articles and few of them stood out to me :

  • India’s new pet parents are anxious as work from home gradually comes to an end (Link)
  • Here is why urban India is bringing pets home faster than ever before (Link)

Here are the Observations I found out from the articles :

  • Pets are part of the families more than ever.
  • The data suggests that the pet industry is on the rise.
  • The Pet parents are spending on their pets and their products more than ever.
  • There are issues of pets being sold and purchased immorally due to them being of different breeds.

Survey & Interviews -Qualitative Research-

To get down to the level of individual pet parents and hear their stories and issues they’ve faced, I decided to conduct surveys and interviews.

  • Survey and Interview, both consisted of 13 questions which helped in gaining an insight into the lives of pet parents.
  • I received 10 Responses in the Survey and conducted 9 Interviews.
  • Participants were between the ages 16 to 30 and had faced different issues while raising their pets.
  • Pet parents also had a variety of pets, consisting of dogs, cats and parrots.

Here is the List of Questions that were asked to pet parents : -

List of questions that were asked in the survey and interview

Pain points

After summarizing the results of my surveys and interviews, here are the pain points that stood out to me :

  • No source of consistent information for their pets.
  • No Community or place to ask other pet owners.
  • Forgetting about medical check-ups and eating schedules.
  • No availability of pet apps.
  • No Source of Basic Do and Don’t’s of pet care.
  • No way of finding good Vet Clinics for their pets.
  • Having no track record of their pet’s well-being.

Competitive analysis

Now that I have a general Idea of what are the issues our users have faced, I take out to the market if there are any apps or services out there who are working on them.
After going through few apps, I found a few which offer different services and has their own pros and cons.

  1. Pet11
Competitive analysis of Pet11 app

2. Pet Perfect

Competitive analysis of Pet Perfect app

3. Pet Care Tracker

Competitive analysis of Pet Care Tracker app

Define

Now that we have gone through the research and have realized what users want and what kind of services and apps are available in the market, we can clearly define what problems we have to solve, the target audience for our solution and understand them well.

Defining Target Audience

If we go by the results of our research, the main target audience of our solution is pet parents who are either in their late teens (i.e College students) and people who are in their early twenties (i.e people who have just started out on their careers.)

As both of these age groups are more likely to adopt a pet and care for it. Anyone younger is not ready to take responsiblity and the pets are usually taken care of by the family. Anyone who is older might have too many responsibilties to worry about (Family, Kids etc.) so they’re less likely to think about adopting a pet.

User Persona’s

On the Basis of reasearch I came up with few user persona’s for pet parents who might need assistance in their lives, so I can understand how they might encounter issues and how our solution can help them.

1. Koyal Gupta

2. Mayank Sharma

3. Vansh Malhotra

Key Problems to solve

  • Find a Way for Users to Keep Track of Eating, Drinking and Vet Schedule.
  • Find a way for users to learn more about their pets.
  • Making it accessible to fellow pet parents.
  • Provide a way for new pet parents to know basics tips and tricks to raise their pets.
  • Provide a way for pet parents to find veterainians for their pets.
  • Provide a way for pet parents to find pet products.
  • Finding a way for people who want to adopt a pet to reach out to foster homes near them.
  • A way for people whose pets have ran away to easily spread the news of their missing pets.

Design

Once I had defined the problems I was trying to solve, I moved to the next step of the process i.e begin designing the solutions.

Collecting Inspiration

I started designing with collecting inspiration for each screen that was in my mind, and tried to look for variations that stood out to me, I tried to collect a few variations for each screen I wanted to design.
I took inspiration from a varity of different screens, from different kind of apps, as they’ve implemented some small idea’s in really interesting ways.

Inspirations for Pet Savvy, multiple screens were collected to understand the best possible implementation

Creating Design System

One of the most important and fundamental task in designing anything is creating a design system, which includes, Typography, Colours and Buttons.

Typography

I used two Typefaces for my app one being Roboto and another being Avenir Next. I declared them from font sizes 12–24 and for titles, body, headings, and labels respectively, ending up with 5 sizes for each category.

Colors

Brand colors : for colors I wanted my app to feel welcoming and safe because it’s about pet care and understanding, so I chose a deep green as my accent color, white as my secondary colour and offwhite as my background colour.

Green to show care, white to show simplicity and a gray to show neutrality.

Neutral colors : for neutrals I used shades of gray with variable luminance.

I declared Grays from 0 to 100 Luminosity while keeping the hue constant.

Semantic colours : for semantic’s I used shades of cherry red, accent colour green and yellow with variable luminance.

I used the same method with these as I did for grays.

Buttons

When declaring buttons I wanted them to look welcoming and comfortable so I gave them a corner radius of 8px and declared them in default, hover, pressed, focussed and disabled states.

I declared all the possible buttons, I might need in the app, although I ended up using selected few.

App Logo

While declaring and deciding on the building blocks of the app, I also realized pet savvy would require a logo as well, so I designed a custom logo for pet savvy, I took into consideration that :

what would make it clear with one look that this is a pet care app ?

and hence this is the result :

Again, Green and white for care and simplicity as a base and cat shape for uniqueness.

Low Fidelity Wireframes

Once I had all the Inspirations collected and declared the building blocks of my design system, I moved on to the next step of creating low fidelity wireframes/rough blueprints for my screens, I know lots of designers prefer paper for wireframes, I prefer to design wireframes as they give me a better idea of dimensions and how I would want the elements to fit together.

Some final designs may look different from wireframes, due to me brainstorming during the process and iterating them acc. to inspirations.

Complete and final solution

Once I had completed brainstorming with wireframes, I decided on the screens which I felt were good enough and fullfilled their function and made them into the final screens of the app.

App start and Onboarding Screens

I wanted the app to be very simple and easy to operate and that’s why I made sure that everything in the app is simple and very clean, so it can be accessable to as many pet parents as it can, In case onboarding I wanted pet parents to know “Hey, here’s some really handy things you can do” so they can get an idea what the apps main objective is.

Sign up and Profile Survey Screens

I tried to keep the sign up very simple and once the user signs up they’re given the choice to build their profile and add details of their pet and some details of themselves, which will be used in the app, they can skip it if they choose to and fill it later in the profile, menu.

Home, and Navigation Options

As I’ve stated before I wanted the app to be easy to use and simple, that’s why I designed it this way, starting with home I wanted it to show all the options you can access in the app right in home and I didn’t wanted there to be any hidden features which one might overlook.
To completely fit all the features on home I took the approach of having main features on home screen as buttons and other features on the navigation bar, as they’ll be more easily accessable by the user, speaking of them let’s talk about navigation bar features.

  • Search : Search tab gives access to whole app search to the user so they can search anything specific througout the whole app.
  • Notifications : Notifications tab gives user access to all the notifications they might recieve throughout the app, and also sorts them into the portion of the app they’re from.
  • Profile : The profile tab is the place where the data you enter while building your profile is displayed, along with calculated timings for food, drinking and Doctor visit for your pet which is displayed through decreasing indicators.

Main Solutions and features
We’ve already gone through the solutions on the way here, if you haven’t or you’d like to take another look [ Click here ^ ].

Cart

Taxes will be added before payment, even though not shown in cart itself.

Cart is a very integral part of any app which has any sort of shopping option, I tried to keep it as simple as I could to make it simple and accessible, user can access the cart directly through home or when they add things to their cart and want to check out.

Payment and Checkout

After the confirmation of address and payment, an invoice would be sent to the user via email.

Here’s how payment and checkout flow works :

Payment flow for Pet Savvy

From there they can choose to track their order or return to browsing more items in the shop.

Excited to try it for yourself ? go ahead

Pet Savvy Prototype

Gratitude to the reader 🎁

Oh hello ! thanks for reading my case study, I hope you liked it, this case study was made possible due to my pet and roomate Zag, he’s 2 years old now and with help of all those who participated in my interviews and surveys and especially you, who took time to read through all of my case study :)
If you want to work or discuss anything and want to reach out to me please feel free to do so, here you can find me :

Linkedin : Akashdeep Khushhal
Twitter : Akash Khushhal Ux
Email : Khushalakash@gmail.com

--

--

akash khushal

I’m Akashdeep Khushhal, a UI/UX designer, illustrator, and gamer. I hope you enjoy reading and find something useful or inspiring here.