Transforming Pet Care: The My Puppy App Case Study 🐾

Pet care comes with its share of challenges, like finding reliable sitters and getting pet food on time. In this project, we tackle these issues head-on with research-backed solutions. Let’s dive into how we can make pet care easier for everyone.

UI UX case study for mobile app UI UX by Harshana Gamage

Pet owners' problems

Finding trustworthy and reliable pet sitters, losing dogs and never finding them, pet foods not being delivered on time, and the quality of goods being questionable.

man-sad-because-he-does-not-have-good-pet-service-solution
Project Deliverables
User Interface (Mobile)
High-Fidelity Prototype
Role
Market Research
UI/UX Design
Project
Develop a pet care platform
2023 Aug (4 weeks)

We're making pet ownership easier and more enjoyable in Sweden!

  • Easy Ordering: Get pet toys and essentials with just a few taps.
  • Seamless Management: Our system handles everything from order to delivery smoothly.
  • Find the Perfect Sitter: Easily find trustworthy caregivers for your furry friends.
  • Stay Connected: Keep track of your pet’s location if they wander off with their own profile.
  • Share the Love: Share stories and cute pet pics to build a lively community.
In short, our app is your all-in-one solution for everything pet-related, simplifying pet ownership for everyone! 🐶🐱

Project Overview

In Jönköping city, pet owners, like myself, face challenges ensuring our pets’ well-being. Many of us struggle with late deliveries of pet food that order from online pet food websites and finding trustworthy pet sitters. After experiencing these problems, I decided to come up with a solution for pet owners in Sweden.

Process

Market research​

Objective

Understand the pet market in Europe, with a focus on Sweden, and identify opportunities, pain points and problems of pet owners. 

Specific goals:

  1. Investigate trends in the pet market over the past 8 years.
  2. Analyze the diversity in age demographics among pet owners.
  3. Assess the demand for online pet food ordering.
  4. Explore issues related to pet loss and tracking them.
  5. Explore issues related to pet sitting services.

Target Audience

Pet owners in Sweden, particularly those aged 25 to 65 years old, usually use mobile phones in their daily lives.
research-for-pet-owners-in-sweden-

Research methods

  1. Primary research (User survey & interview).
  2. Secondary research (Market reports & online researches).

Market reports & online research

I started with the secondary research method.

  • Market Reports: I looked at reports about the pet industry in Sweden and Europe to learn about things like how many pets people have and what they spend money on.
  • Online Research: I searched online for articles, government stuff, and things from the pet industry. I wanted to find out about trends in owning pets, how people buy pet food online, and what kinds of services are available for taking care of pets.

Analyze demographic data and current pet ownership demand in Sweden

First, we need to gather information about people who own pets in Sweden. This includes finding out how many households have pets and how many pets they have on average.

Findings:

  1. Number of pet owners in Sweden has been increasing significantly over the past 7 years.
  2. Current estimate stands at around 1.1 million pet owners.
  3. Projection suggests a rise to approximately 1.6 million by 2026.

Implication:
Indicates a substantial market opportunity for the pet industry.

Diversity in age demographics among pet owners

We divided the market into different age groups to figure out which group owns the most pets.

  • Most people who own pets are between 45 and 65 years old, making up about 62% of all pet owners.
  • There are fewer pet owners who are older than 65, about 7.4%.
  • People under 30 only make up about 13.2% of pet owners, and those aged 30 to 40 make up about 17.4%.
  • So, most pet owners are in their middle to senior years.

Key finding: A significant portion, 62%, of individuals over 45 years old struggle with caring for their pets, indicating a demand for reliable pet sitters to assist them in pet care responsibilities.

Annual sales volume of pet food products in Europe from 2015 to 2022

We conducted an analysis of the pet food market in Europe and observed a slight increase in demand over the past few years.

Market data:

  1. Market volume in 2020: 10 million tons.
  2. Market volume in 2021: Increased to 10.4 million tons.
  3. Market volume in current year: Slightly increased to 10.5 million tons.

Trend analysis: Graph indicates a slight decrease in growth rate over time.

In 2021, the worldwide Pet Care market was worth a whopping USD 67.4 billion. It’s set to grow at a rate of 5.68%, reaching an even more impressive USD 93.9 billion by 2027.

Competitive analysis

I conducted an analysis of the four most popular pet related apps and websites in Europe. This examination included an assessment of the ordering experience for pet foods and toys, the effectiveness of pet sitter searches, the functionality of dog trackers, and an examination of negative comments on both app stores to identify recurring patterns.

"Rover Dog Walking" app features.
  • Extensive Network: Connects dog owners with a large pool of sitters and walkers for optimal matches.
  • Comprehensive Services: Provides a range of dog care options, from walks to boarding, addressing diverse needs.
  • Informed Choices: Access detailed sitter profiles, including experience, photos, reviews, and videos for decision-making.
  • Easy Booking: Streamlines the booking process through the app, ensuring convenience and secure payment options.
"Pawshake - Dog & Cat Sitter" app features.
  • Global Network: Find dog sitters, walkers, and boarders worldwide, perfect for travel needs or international connections.
  • Wide Range of Services: From daily walks to overnight stays, Pawshake covers various dog care requirements.
  • Verified Sitters: Background checks and reviews offer a layer of security and trust.
  • Flexible Options: Choose one-off services or create regular schedules based on needs
"Woof" app features.
  • Flexibility Focus: Wooof prioritizes convenience with flexible scheduling, group walks , and convenient drop-in visits.
  • Local Expertise: Focused on Stockholm, Woof features sitters familiar with the city’s dog-friendly parks, routes, and quirks.
  • Real-Time Reassurance: GPS tracking and regular walk updates keep in the loop and put mind at ease while furry friend frolics.
  • Community Connect: Wooof encourages dog-loving interaction through its “Woof” feed and private chat functions.

Analyzing features of competitors

FeatureWoof (Hundvakt)PawshakeRover
FocusLocal, budget friendly Global dog care networkLarge user base, affordability
ServicesWalks, drop-in visits, boardingWalks, sitting, boarding, drop-inWalks, sitting, boarding, drop-in
PricingBudget-friendly, transparentVariable based on service, location, sitterVaried based on service, location, sitter
StrengthsLocally-focused features, flexible scheduling, playful elementsExtensive global user base, wide range of servicesLarge user base, potentially lower cost (before recent hikes)
WeaknessesLimited service variety, less international optionsLimited Swedish features, occasional spamMixed reviews due to recent controversies, reliability concerns
User Praise"Flexible scheduling & Hundis-TV!""Found a great sitter in my city!""Large user base, convenient"
Best ForCity dwellers, budget-conscious ownersFrequent travelers, budget conscious ownerBudget-conscious owners (cautiously), diverse needs

Problems found from the comments

Identified Trends and Patterns from the secondary research.

User survey (Primary research)

Before I began my primary research, I brainstormed ideas and gathered my initial thoughts. I made a list of all the information and insights I needed from potential users.

  • What do people currently use for pet care needs?
  • Do they use one platform or several for different services?
  • Why do they prefer ordering pet food online instead of going to the supermarket?
  • How often do they need a pet sitter?
  • How do they find a pet sitter?
  • What qualities do they look for in a pet sitter?
  • How do they track their dog or cat?
  • Do they use a specific app or method to track pets?
  • How do they share their pets’ images with friends?
  • Would they like a single app that offers all these services?

To collect data, I made a questionnaire using Google Forms and shared it on Facebook to reach a large audience of pet owners. This helped me test if my questions were getting useful information.

Facebook survey

What?
I created a Google form with 10 relevant survey questions. Some of them are multiple-choice questions, while others are free-answer questions.
How?
I posted the survey form in Facebook groups for pet lovers and also boosted a post to get more responses from the right audience.
Result!
I ran the survey for about a week and got responses from around 340 pet owners in Sweden. Then, I started studying the trends and patterns in the data. To organize all the information, I decided to create an affinity diagram.

Some of the survey questions (These are 2 selected questions out of 10)

Comments from participants ​

Research Analysis

I ran the survey for about a week and got responses from around 340 pet owners in Sweden. Then, I started studying the trends and patterns in the data. To organize all the information, I decided to create an affinity diagram.

affinity diagram for My Puppy

Challenges faced by pet owners

Pet owners' struggles using current pet care services

man showing something in my case study

Let's summarize the findings

✅ Age Demographics: Pet owners (45-65 years old) highlights the urgent need for tailored pet services.

✅ Pet Loss: The absence of reliable pet tracking facilities fuels anxiety among pet owners of pet loss.

✅ Community Engagement Platform: There’s a need for a community app to facilitate engagement among pet owners.

✅ Dissatisfaction with Online Delivery: Many pet owners are dissatisfied with current online pet food delivery services, likely due to delivery system issues.

✅ Difficulty in Finding Pet Sitters: The struggle to locate trustworthy pet sitters fuels owners’ frustrations.

Personas

Based on the research data, I created two personas to make it easier to continue the process.

Ideation

After completing the previous steps, I had a clear understanding of all the features and actions needed for the project. Now, I can quickly sketch out how users will move through the project and do some basic planning.
Rough sketches to visualize the project.
Some initial brainstorming and sketching 1
Some initial brainstorming and sketching 2
Some initial brainstorming and sketching 3
Some initial brainstorming and sketching 4

Flow diagram

I created a simple flow diagram to outline the main tasks users can do. (Sorry, I couldn’t include failure statuses due to space limitations.)

Main client flow.

Low-fidelity wireframes

Once the flow diagram was all set, I dove into crafting low-fidelity wireframes for the key flows. 🎨 Exciting stuff!

Its time to start the designing!

Design system​

After planning all the flows and structure and low-fi prototypes, I jumped into designing the design system for the ‘My Puppy’ app. The design system will help me maintain visual and functional consistency across the entire app. Additionally, I can reuse most of these components in the scalability stage of the project.
I started with defining the colors and typography that’ll give my app its unique look and feel. 

Colors

Accent, primary, secondary, tertiary, background

Other minor colors used

Brand color of "My Puppy"​

Color: light blue
Hex: #1577EA
RGB: rgb(21, 119, 234)
CMYK: (91,49,0,8)

App logo

Designed Components

Plus Jakarta Sans

“Plus Jakarta Sans” font has been used as the typography of the project. Here are the main reasons for using this font style: Plus Jakarta Sans supports all font weights, and I have used Regular, Medium, Semi-Bold, and Bold in suitable ways in the app. This font is clear and readable on smaller-sized screens as well. As for the font sizes, I have used a minimum size of 10pt for footer navigation text and other text sizes such as 12pt, 14pt, 16pt, 18pt, 20pt, 30pt, and 32pt for main headings.

Components

Buttons

I designed various buttons for the app, each with distinct shapes and colors to signify their purposes. Colors like brand blue and dark blue represent CAT buttons, while lighter shades are used for secondary buttons. Some buttons include simple icons for additional feedback. Multiple versions of certain buttons were created to assess accessibility and facilitate A/B testing. For instance, the ‘Add to Cart’ button was designed in several styles.

Text fields, drop down, radio buttons, and check boxes

As input fields, I have created these components in the app. Text fields are designed to be easily touched for inputting data. All text fields are validated with feedback messages to enhance user-friendliness and provide feedback to the user. Similar to other components, I have created different versions for some of these components.

Dialog and message boxes

List, cards, modals and popups

Navigation - tab bar

I created a few versions of the tab bar that are suitable for various screen variations. These will be useful for A/B testing and gathering customer feedback on the user experience.

3D look & feel

The stylish touch was achieved by incorporating PNGs of popular pet toys, skillfully adding shadows to impart a delightful 3D appearance.

High-fidelity UI designs

After wrapping up the initial flow, I jumped into the next phase by bringing the high-fidelity screens of the app to life.
high fidelity ui design by Harshana Gamage

I created 93 high-fidelity screens.

I have designed a total of 93 high-fidelity designs for this project! These designs feature not just one, but two unique navigation patterns a cool tab bar and a hamburger menu. Plus, I’ve whipped up various single product screens and intro screens that are perfect for future A/B testing in our design journey.
I have been experimenting with backgrounds – tried a clean white one, an accent color for main screens, and even an aurora-style blurred background on product screens for that extra touch of elegance.

Alignment and grid

I used an 8 point grid for the project and set the margins within groups at 8 and 16, with margins between groups at 24, 32, and 48. This will arrange the entire screen elements in a nice hierarchy.

High-fidelity prototype.

I have linked up all my high-fidelity designs to create a clickable prototype! Now, I’m gearing up to test the app with our first group of users. Super thrilled about this next step in bringing our vision to life!

Adding a product to shopping bag​

Create pet profile & track the pet

Creating a pet profile:

  • Before tracking, the customer must create a pet profile.
  • Details such as name, breed, gender, and pet profile photo can be added to the profile.

GPS tracking technology:

  • GPS tracking is used to track the live location of the pet.
  • The GPS tag of the pet can be paired with the app at this step.

Finding a pet sitter

In the customer app, users can find and book pet sitters. A separate dedicated app is available for pet sitters, allowing them to register and manage bookings and other data.

Prototype validation

I conducted a validation study for my prototype with eight engaged participants. Each focused on specific functions like adding a product, finding a pet sitter, and tracking a lost pet. We aimed to ensure smooth task execution without conflicts. The study utilized Skype and Zoom calls to introduce the app and assess user navigation and task completion. Our goal was to guarantee users could easily use the app to accomplish their goals.

Study results

Notable finding: Among the 8 participants, 25% (2 out of 8) expressed uncertainty regarding using the app to track lost pets.
Quick comprehension: All participants easily understood how to add a product to the cart and find a pet sitter.
Overall success rate: Approximately 80% success rate for the test.
Insights: These findings offer valuable feedback and indicate areas for potential improvement in the app’s features related to tracking lost pets.

Prototype update concept

I’ve improved the “pet tracking” screens by adding more details for better user understanding. These changes make tracking a lost pet simpler and more user-friendly, aligning with feedback from the prototype validation and enhancing the overall user experience.

Previous flow of pet tracking

Updated flow of pet tracking

  • Initial screen: Provides clear guidance, emphasizing the need to create a pet profile. Button says “track” to start.
  • After profile creation: Action button changes to “find,” indicating users can locate their pet.
  • Tracking screen: Displays additional details like real-time GPS status and battery level, along with pet speed and distance from the owner, in a visually appealing format for better user understanding.

Accessibility check

The application was evaluated to meet AA standards of Web Content Accessibility Guidelines (WCAG) for contrast. It was noted that some areas need enhancement to meet standards. Efforts are underway to improve contrast to align with WCAG AA standards, aiming to enhance user experience for individuals with diverse visual needs.

To check the accessibility standards I used Contrast Checker of WebAIM.org website (https://webaim.org/resources/contrastchecker/).

I aimed to distinguish the main “Add to bag” button from other calls-to-action (CTAs), but the chosen color proved to be less accessible. As a result, the background color was adjusted in the final version.

Initial and Improved contrast

Some important lessons

  • Data is crucial: Incorporating data from user research helps prioritize needs and address pain points, making the visual design process much smoother.
  • Balance research and design: Finding the right balance between research and actual design work is critical. Both aspects are equally important in creating user-centered designs.
  • Avoid assumptions: It’s vital to validate assumptions. The problems we assume users have may not always align with their actual experiences.

My Puppy Project summary

✅ Conducted comprehensive market research and evaluated market.
✅ Carried out a brief online user survey on Facebook.
✅ Performed an online usability study.
✅ Developed a series of low-fidelity wireframes.
✅ Iteratively connected wireframes into a prototype.
✅ Transformed wireframes into high-fidelity, UI designs.
✅ Conducted a thorough quality assurance audit during the final review.
✅ Emphasized consistency and color contrast for enhanced accessibility.

Have any questions about this project?
I would love to talk more about it with you!

any question you have to ask from Harshana
Scroll to Top