Floof—more than just a dog walking app
📌 Overview
Floof was created for dog owners to easily book pet caretakers who can care for their dogs when needed. From dog walkers to sitters to trainers and more, Floof gives dog owners the ability to find the perfect match for their dog's needs and takes care of all the hassles in between. Floof streamlines the booking experience and makes finding a trusted pet caretaker effortless.
🚨 Problem
Dog owners with busy schedules who aren't always able to walk or care for their dogs find themselves resorting to friends or services to take care of their dogs in the meantime.
However, friends with no experience aren't capable of caring properly for dogs and the dog walking apps currently on the market don't have an easy process for booking someone instantaneously.
As a result, busy dog owners who need someone to help care for their pets don't have an easy and reliable way to find the best pet caretaker at their fingertips.
🚩 Challenge
How might we design a solution for dog owners to easily book pet caretakers and feel safe and trusting throughout the process?
💡 Solution
My solution is Floof!—An app that streamlines the pet service booking process and prioritizes pet care reliability and the user's peace of mind.
The app provides filtering and a search tab to find experienced and reliable pet caretakers, a streamlined booking process where users don't have to wait for a confirmation or response, and a live walk tracking feature to give users the ultimate peace of mind.
This case study shows how I empathetically designed a solution to meet my users' needs. View my Figma prototype here!
Search tab, booking screen, and the live walk tracking feature.
A video of my prototype in action. Try it out for yourself here!
🧪 Design Process
Due to using the design thinking framework for this project, my design process was non-linear and highly iterative. I circled back and repeated stages, thus allowing me to empathize with my users and create innovative solutions.
🔎 Research & Empathize
The research I initially conducted focused on understanding dog owners' needs and pain points related to having someone care for their dog and using a pet care service. To guide my research, I set goals to understand:
What pain points do dog owners face with existing pet care services on the market?
What do dog owners find essential for a pet care service to provide?
What can I learn from dog owners that have someone care for their pet/use a pet care service?
User Interviews
I conducted seven in-depth interviews to identify dog owners' needs, pain points, goals, and frustrations with their current process of finding someone to help care for their pet and to determine how Floof can improve this experience.
After conducting the interviews, I learned that all my participants have had someone take care of their dog before, but most have not used a dog walking app due to ease of use and reliability issues. I further synthesized my research in the define stage, but some key takeaways I discovered include:
86% of participants say certification/experience is one of the most important things they look for in a pet caretaker;
71% of participants find it difficult to trust how someone is with their dog due to a lack of experience or credibility;
57% of participants would use a dog walking service app if it meant they could book someone reliable and in an instant;
57% of participants would want to know where the dog walker is with their dog at all times;
Competitive Audit
I then conducted a comparative analysis to identify my competitor's strengths and weaknesses to help inform Floof's structure and the differentiating value it brings to the market.
🎯 Define
After completing the user interviews, I synthesized all the participants' responses to identify themes. I then turned these themes into actionable insights for Floof's features to focus and improve on.
Affinity Diagram
To synthesize the research and identify themes, I created an affinity diagram to organize and group similar responses.
As a result, I learned my users' most critical needs and pain points: the ability to find trustworthy pet caretakers, a simplified booking system, and a way to know their pet is in safe hands.
User Persona
To help keep my focus on solving user pain points, frustrations, and goals, I created a user persona to represent the data I collected for me to address when making a design decision.
Through creating an affinity diagram and a user persona, my apps' focus became strikingly clear: provide a solution that prioritizes finding reliable pet caretakers, a streamlined booking process, and a tracking feature to give users peace of mind.
💭 Ideate (Round 1)
After defining my app's focus, I started to generate and brainstorm ideas to determine the essential design elements for my screens.
User Flow
To better understand the screens I need to design, I created a user flow to establish the specific route a user would take to complete the app's main task: book a pet care service.
While designing this user flow, I considered how I could improve existing pet care apps' flows to increase Floof's efficiency and provide a better experience overall.
I did, however, make a few mistakes in the initial user flow I created, such as a lengthy process for existing users to rebook a pet caretaker. To resolve this, I remembered to address my user persona to ensure I met their needs and solved their pain points.
Information Architecture
Before jumping into wireframing, I also created an information architecture to help structure and organize Floof's layout to know what content goes on which screen.
Sketches
As Floof's structure became more apparent through my user flow and information architecture, I sketched wireframes to ideate interface elements.
Digital Wireframes
The initial sketches gave me new insight into Floof's structure. I then turned them into digital wireframes to prepare for prototyping.
Throughout the ideation process, I learned that if I want to design screens that speak to my users' needs and pain points, I must let my research inform my decisions. I put this at the forefront of my mind when creating these wireframes.
📐 Prototype (Round 1)
After ideating, I needed to build a low-fidelity prototype to conduct usability tests and improve my ideas.
Low-Fidelity Prototype
I built a simple prototype using my wireframes to mimic the app's functionality with my user flow in mind: book a pet care service.
Although the prototype was limited in functionality, it demonstrated the user flow I created in the ideate stage, which was enough for usability testing.
📋 Test (Round 1)
After building a low-fidelity prototype, I gathered participants to test it out.
Usability Test
I wanted to conduct usability tests and gain feedback to improve the user experience and continue meeting user needs and resolving pain points.
Through conducting four usability tests, I learned that the user flow was straightforward to complete, but many elements within the screens and some pages overall were unclear, such as:
Elements on the home page needed more clarity: the live walk feature and the service buttons need to be easier to understand;
Participants wanted the pet tab on the bottom navigation bar;
The search tab: participants felt the map was unnecessary and that there should be more accessible customization in terms of filtering and sorting;
The profile page: participants were overwhelmed with the profile page and thought it was too busy;
Feedback from the usability tests gave me valuable insight into the structure and elements within my app that need iteration.
I learned that conducting tests early on is crucial to the design process because it saved me from wasting time if I were to create high-fidelity designs only to find out that I must fix a bunch of things.
As a result, I planned to return to the ideation stage to iterate my wireframes.
💭 Ideate (Round 2)
After completing my first round of usability tests, I ideated again to improve my designs based on the insights I discovered.
Wireframes v2
Using the insights from my usability tests, I iterated my wireframes to meet user needs and solve the pain points users experienced with them.
In my new wireframes iteration, I solved the pain points discovered in my usability tests by iterating the following:
Added a small map to the live walk feature to view your pet's location instantly (which is expandable) and labels to the pet services buttons;
The pet tab is now on the bottom navigation, and the account button is on the home page;
Added a title to the search page, removed the map, added quick filter buttons below the search bar, and added a sort feature;
Completely redesigned the profile page by left aligning most of the page, reduced the amount of text to make it more digestible, and gave profiles more personalization by adding a custom background image;
As a result, through learning about the pain points and frustrations users faced with my first wireframes iteration, I re-ideated solutions to solve them and provide a better user experience.
Next, it was time for me to create a high-fidelity prototype.
📐 Prototype (Round 2)
After ideating, I planned to create high-fidelity designs based on my improved wireframes to test with UI elements and greater interactivity.
Visual Design
While I added visual design to my wireframes, I built a library for reusable elements to simplify my designing process (I showcase the complete component library in the Refine & Deliver stage).
I drew inspiration for my visual design from nature/the outdoors, hence the green colour, with a focus on simplicity and minimalism. The typography helps to reflect this focus with a hint of playfulness to represent playful dogs.
Home tab, search tab, and profile page.
High-Fidelity Prototype
Next, I built a high-fidelity prototype to prepare for a final round of usability tests.
This prototype demonstrates my main user flow—booking a pet care service—along with the onboarding process new users experience.
📋 Test (Round 2)
After building a high-fidelity prototype, I gathered participants to test again.
Usability Test
I conducted another round of usability tests to evaluate the validity of my improvements with a high-fidelity design.
Through conducting another four usability tests, I learned that my improvements were effective in streamlining my main user flow. However, I discovered that users encountered new pain points with the added visual design, which include:
Apart from the onboarding flow, the app doesn't prompt users that all pet caretakers pass a background check, which doesn't meet their need for pet care reliability;
The search page not being automatically sorted by rating;
Profile pages don't include: the person's preferential dog size, a longer about—it's currently too short and doesn't allow for greater detail about the person, and pricing for the services they offer;
The booking process lacks a few crucial elements/features: a way to know where you are in the booking process (steps), an easy way to find a date with a specific time, and a way to tip the pet caretaker;
Much like in my first usability test, the feedback gave me valuable insight into what parts of my app need iteration.
As a result, by nearing the end of my project's timeline, I moved on to refine my app designs to solve these pain points and meet my users' needs.
✨ Refine & Deliver
After conducting my final round of usability tests, I started refining my high-fidelity designs.
Component Library
While refining my designs, I continued to refine my component library to prepare for handoff.
Refined Design
Using the insights gained from my second round of usability tests, I refined my high-fidelity designs to solve the pain points users experienced with them.
I solved the pain points discovered in my usability tests by refining the following:
On the search page, I added a background check banner to give users peace of mind that all pet caretakers are safe and trusted
In the search page, the list of pet caretakers now defaults to being sorted by rating for users to see the highest rated pet caretaker instantly;
In profile pages, I added a dog sizes section for users to see what size dogs a pet caretaker handles, an expandable description for pet caretakers to write more detailed information dog owners may want to see, and prices next to services provided for users to see without having to press book;
In the booking screens, I added a progress bar at the top for users to know how many steps there are in the booking process, a filter button on the time selection page for users to find a viable date for the time they're looking for, and a tip button in the final page for users to show appreciation to pet caretakers;
Through learning about the pain points users faced with my initial high-fidelity prototype, I refined my designs to meet their needs and provide the best user experience possible.
Here's a video showcasing my refined high-fidelity prototype in action! Test out the Floof prototype here!
🏁 Final Output
As a result, Floof provides a simple way to find trusted pet caretakers, a streamlined booking process with no wait time, and a live walk tracking feature. Dog owners can now book reliable pet caretakers conveniently and feel safe knowing their pet is in good hands.
Thus, in understanding my user's needs and pain points, I designed a solution that seamlessly integrates into any dog owner's routine.
You made it to the end—thank you. I appreciate you for listening! 😊✌️