Sploot | Parul Sharma

Designing a Pet Care Experience | UX UI Case Study

In this UI/UX Case Study, I’ll be sharing my detailed process and the reasoning behind the design decisions that I took to redesign a Pet Care App.

Overview

Sploot is a live mobile application that caters to a multitude of needs of pet owners. This application offers pet-related Knowledge, allows pet owners to safely manage the medical history of their pets, and also organizes all the pet care activities over and above medical needs. This app also acts as a key source of Knowledge regarding pets. Pet parents can find a plethora of articles related to pet behavior, pet grooming, and other such activities.

Challenge

The stakeholders wanted me to understand both the business & customer needs from scratch. As currently they were struggling with low conversion rate, based on existing customer insights most of the users were not returning after the single use, and bouncing off without completing their task.

Project Kick-Off

Before starting the project I wanted to understand
1. Stakeholders' expectations

2. Why are we designing it?

3. What is the problem we are trying to solve?

4. Why would anyone want to use it?

5. What problems are existing users facing?

6. How much time do we have?

7. What will define success?

To get the answers to all these questions had many rounds of discussion with project managers and stakeholders to obtain the existing research and gather existing knowledge in order to determine additional Research plans over the course of the project.

Problem Statement

With the increasingly competitive world, maintaining a good work-life balance is already a challenge. People are chasing deadlines, traveling for work more often, or stuck at work well past their office hours. In this process, their pets are losing out on the care they need.
Not only it is difficult to keep track of their medical history, but also pet parents need reminders for their day-to-day activities

Possible Solution

A digital solution that allows pet owners to safely manage the medical history of their pets.

The project duration for the project was 12 weeks and as an experience designer for this project, I was responsible for both user research, strategies, and visual design.

1. Empathizing with the users

Qualitative Research

I interviewed around 20–30 potential users over phone calls and physical interaction. The purpose was to determine the basic ‘pain points’ of pet owners when it comes to taking care of their pets. Learning about the problems of potential users is a great way to be inspired and motivated. Working with real-world data is a good starting point to help avoid guesswork and preconceptions.

Questions Asked

1. Could you tell us a bit about yourself? What is your BG? and what kind of work do you do?
2. For how many years do you have a pet at home?
3. How often do you vaccinate your pet? How do you keep a track of it?
4. Are you aware of your dog's medical history? How do you keep a track of their medical history?
5. Do you have all the knowledge about your pet breed?
6. What do you do when suddenly your pet starts behaving differently?
7. Do you often miss out on your pet day to day activities? How do you keep a track of it?
8. Are you currently using any pet-related applications? If yes, what are those?
9. How often do you deworm your pet? how do you keep a track of it?
10. What are your thoughts on the pet Community and events?

Heuristic Evaluation

Moving forward, I deepened my analysis of the application by conducting a heuristic evaluation, considering the low conversion rate.

With the insights of my research, I proceeded to define the problem statement and user persona.

2. Defining the goals

Personas

With the data collected from the interviews and survey, I created a persona representing an ideal user of the application. The persona helped me arrive at better solutions as it gave me an in-depth understanding of the user's goals and frustrations and the overall personality.

Empathy Map

This process was done to define the target audience with more clarity, as well as illustrate their needs and actions. Empathy mapping helped me gain perspective on their thoughts and feelings. The data in the empathy map are based on insights from user interviews.

User Journey Map

This process was done to illustrate the user flow, starting with initial contact or discovery, and continuing through the process of engagement into long-term loyalty and advocacy.

3. Ideating Ideas

User Flow

We created a flow using Miro to illustrate how the user will navigate through the application

Card Sorting

I did a card sorting exercise with some real users where I tried to understand their language and in what direction they think.

Information Architecture

The card sorting results were further refined to fit the goals of the application. Some of the features were re-categorized to make them easier to find. Even though the information architectures are not always visible in the user interface, they do impact the user experience.

4. Wireframes

With a bulk of user research out of the way, the first set of wireframes was created in a span of 1-2 weeks to translate our ideas into a more tangible format. It did take us a lot of trial and error to figure out how to make our interactions work as we intended.

To view the prototype Click here

Test Phase

After the prototype was completed I did a moderate testing with 10 representative users to see how user friendly the application is. It was conducted live within the conference room where the participants were given the following tasks, while I observed how they navigated through the application.

Add a Reminder for appointment
Add all the medical Information related to your pet
Add past or present records of your pet

The participants were able to navigate through the app fairly easily except for adding records. They appreciated the interface and gave the following inputs.

Suggestions to make the experience better

Most of the participants were confused for adding records of their pets as initially they were searching for button with in the medical category. Later on when they couldn’t find the button under medical section, they clicked on the add button in the navigation.
Which gave us a idea of adding a FAB button in the medical section.
Moving forward we remove the add record option from the navigation and added it as a FAB button under the medical category.

Style Guide

Visual Design

Challenge faced while working on this project? And how did I overcome it?

The major challenge faced while working on this project, was, since the app was already live and users were using it, they were accustomed with the navigation.
Through our research, analysis and feedback we found, current bottom navigation was not providing usability as it was complex and user’s were having difficulty navigating through the app. I proposed the stakeholders to change the bottom navigation bar and remove the “add category” from it and use it as a FAB button under medical category. But they were admant about changing the navigation bar as they were concerened that it would effect the experience of existing users.
Then we did a AB testing with around 8–10 users, giving the goal of adding pet record. And when the results came, stakeholders were completely blown away and asked for the solution of “How can we make sure the existing users will not be hindered by this change and how will we introduce them to this change”
For which I suggested, Once the user have updated the app version, we can communicate the product changes in multiple ways, which are

In-app messaging tools there’s nothing as efficient and relevant as alerting users to change while they’re actually using it. There are plenty of options for communicating with users in the app. These include pop-ups, banners, notifications, and flags, all of which can signal that something new is coming.
Virtual tours and guided onboarding processes, ideal for existing and new users to understand the changes and how to set up and use the product.
Sharing new updates on social media, is an excellent place to build buzz for something new and exciting on the horizon.
Blog posts with tips and recommendations are good companion material to educate prospects and current users.
Coach marks can break any topic into easy-to-follow steps, and you may even target them to specific usages or user profiles.