Redesigning the User Experience of PetBacker

My first UX Case Study for a pet service website.

I don’t remember how I stumbled upon PetBacker’s website, but it seemed like the right challenge to take up for my first UX project. Finding pet services online is a rather unexplored concept and there is still a lot of room for bettering that experience. Let’s give it a shot. 🦮

Scope and Constraints: In this project, I have focused on not only creating an easy to navigate site, but also product features that impact the target audience in a positive way. Due to limited time and resources, testing stage has been left for later. Also user interviews were limited to online messages because of lockdown.

Process: I followed the Design Thinking Process — Empathize, Define, Ideate and Prototype.

Tools: Figma, Adobe Photoshop, Procreate

🐩About PetBacker

PetBacker is one of the world’s largest pet service platform. It connects loving dog walkers, pet sitters, pet boarding and groomers with pet owners in all major cities. It is like the Airbnb & Uber of Pet Care Services.

How does it work? The website serves numerous options of pet caretakers depending on your requirements. Necessary information about the caretaker is visible to help make pet parents a better decision. When you find a suitable person, you may invite them to chat in order to book their service.

🖊Define the Problem

Pets are at the heart of a pet parent’s life. But they feel hesitant to trust online sources to find the right pet caretaker. Unfortunately, at times they are left with no other option. This leads to very conflicting emotions.

How might we make pet-parents feel positive, secure and efficient on the PetBacker website?

Diving into key decisions first, followed up by process. Let’s get to it without a paw-se!

Challenge #1

63% of consumers will stop buying from brands that use poor personalization tactics. — Forbes

Current Home Page

The Problem:

As you can observe, the current website has a poor onboarding process. There is not one but three CTAs leading to the same page, a rather confusing navigation.

Why should the customer trust us? Users need to hear a story. Feel heard and seen. The site can do the job, but there is nothing that makes an impact.

Pet Sitter Reviews section doesn’t contribute much. Consistent five-star gives a misleading impression too.

In today’s world of customizations and personalizations, the website is outdated. I wanted to make the user feel more connected to the process.

✨A brand new onboarding process.

Create Pet Profile

For my solution, I introduced the Create Your Pet Profile feature. It is a direct Call To Action button that leads to a pop-up form for creating their pet’s profile.

It asks you about your pet’s size, temperament, food habits, activity needs, special requirements and also lets you add your pet’s display picture. 📸

Ideated Home Page Onboarding

The Second part of the onboarding when user clicks Create Pet Profile:

A glance of the Create Pet Profile form

*Needs more research for the right kind of questions*

Why Create Pet Profile?

1. Pet parents love talking about their pets. Helping them create their pet’s profile is a way to make them feel more closer to the site.
2. The questions not only catch their interest but are also a way of gathering more details, which help us to lead them to more accurate pet backer matches.
3. It is a funnel to lead them to Sign Up.

User emotions in a scenario —

I need to find a dog walker online for Buddy. 🙂

There are lot of options to explore from. 🧐

I have want to contact this pet backer. Wait, I have to answer few questions to message pet backers. 😬

Now I am expecting messages from pet backers as promised. 😃

After completing the form they have redirected me to Sign Up page. 🙄⚠️

This is a rather sudden way of getting a user to sign up. This can lead to a higher bounce rate.

By creating a pet profile, users are more prepared to Sign Up. It should especially come with a prior statement so that users don’t feel tricked.

Also, I still kept this feature optional. Users can still avoid creating the pet profile and continue to explore their options if they want.

Responsive Form

I also created a better form by unifying the fields from two pages into one clear form. The fields feel like steps and dynamically change according to the previous answer.

There is a progress bar at the top. This reason is to encourage users to complete all steps and thereby, clicking on Create Pet Profile CTA.

Adding ‘About Us’ in Nav Bar

This is where users can read about PetBacker, their policies, how they work. It creates a sense of transparency. Users shouldn’t have to fish for information.

Omnipresent Automated Chatbot

Through chatbots users can access information in a more personalized way. Chatbots use AI, to respond in context. 💬

Challenge #2

The Problem:

This section for users is isolated from the website. There is no access to nav bar functions! Also there is no option to go back to previous pages.

Current Requests Page

✨Introducing the Dashboard.

This user dashboard is a retractable side bar that comes alive on hovering the cursor left. This is omnipresent on every page so that the user can access their messages immediately.

A green dot shows up when a new message is received. This transparency of status can help ease the user’s feeling of doubt.

Also added daily greetings along with a fun fact about pets. It is amusing and encourages users to remember the dashboard’s presence. Tiny things can matter. ✨

Ideated Requests Page with Side Dashboard Feature

Creating a new request is much more easier now. I have made the functions of requests more explicit.

Also, ‘Completed’ request shows the name of pet backer so it easy to contact them to repeat service. This is a function that users are more likely to use.

Challenge #3

The Problem:

The previews of pet backer profiles look clumsy. The reasons being —

1. The function of map is dormant
2. Users are completely clueless about the meaning of the icons
3. Five star reviews for all are misleading
4. Description of one line is too short to be useful

Current Pet Backer Search Results

✨Pet Backer Cards

For my solution, I completely changed the profile layout. It is arranged in cards and information is not scattered anymore.

Here are few important feautures I added —

1. Added Sort by ‘Match’. This function sorts by compatibility of pet profile we had created before.
2. Bookmark function on cards, because users don’t want to message immediately. They want to save and weigh their options.
3. Addition of ‘vaccinated’ verification.
4. Percentage of profile match shown clearly in donut diagram.
5. Verification icons are not ambiguous anymore. Their relevance is shown upon hovering the cursor.

Ideated Pet Backer Recommendations Results

Wait. What about the pandemic?

Being a service involving human contact, COVID-19 response (at least for now in India) is indispensable. There may be three kinds of users —

1. Users or their family member affected by COVID-19, who for physical or mental reasons are unable to take care of their pet for a certain duration
2. Users who want to avail services for their pet, but are apprehensive about risk of physically going out.
3. Users who didn’t use online services generally, but are doing so as the only option in the pandemic.

Ideas?

1. I gave the users option to make their request a COVID-19 emergency.
2. I added ‘Vaccinated’ verification icon for pet backers who are vaccinated.
3. I made sure to add a small guidelines section on each page below the nav bar for information on code of conduct for our services.

Here is an overview of how I arrived at my solutions.

👩🏽‍🦱🧔🏻Empathize

How often do you need to leave your pet in your absence?

How do you usually solve that problem?

How much do you understand your pet’s behaviour with strangers?

What do you expect from a pet caretaker online?

What are your fears regarding leaving your pet with someone new?

What do you think can be improved in such pet services online?

These interview questions led to interesting insights. I used them to create my user persona which helped me visualise the thoughts and feelings of my users.

User Personae

Below is a user journey experience of Mayuri, who wants someone to look after her babies while she is sick. This exercise helped me understand where the possible problem areas really lie.

User Journey Map

💡Ideation & Insight

Inspecting the current pages to get a visual understanding.

I further took the help of Jakob Nielsen’s 10 Usability Heuristics for User Interface Design to determine problem areas for ease of use.

Few screenshots of the current site

How Might We?

There seemed to be four main challenges —

1. Skeptical Trust
2. Unclear Navigation
3. Outdated UI
4. Lack of Personalization

I reframed the challenges as How Might We questions to turn those challenges into opportunities for design.

‘How Might We’ question prompts

🖍 Wireframing, my favourite.

Wireframing is the bridge between your research and prototype. Keep building, till you make it to the other end.

Sketching

Only during sketching, I realised there are different possibilities than the ones in my head. It made the transition of concepts into wireframes smoother.

Few final sketches

High Fidelity Wireframing

Not only it made me aware of space and layout, there were still possibilities of continuous design iterations. You can check out the final wireframes again in the Figma file here.

Conclusion

The most challenging part for me was keeping the process organized. When you are single-handedly working on an extensive website, everything can become a potpourri very fast. Trying to solve all problems is not always feasible.

My most valuable lesson has been to approach design problems one at a time, in a well-reasoned way.

I did encounter lot of blocks. But overcoming those very blocks was the most satisfying part. For further scope, I would like to learn about showcasing interactions of my solutions, and exploring more on UI part of my solutions .

Thank you for reading. Feedback is welcome.