🐶 Dude, the new dog walking app on the block
Here's my most recent work on an app that lets you, as a dog mom or dad, get connected with available sitters around you.
⚜️ Design Brief
As a dog owner, one of my main struggles with the current dog walking apps currently available on the market is that you have to manually search and go through users that are available. You reach out to them, wait for them to see your message, reply and hopefully accept an offer. This process feels like a little bit too complex and thus opens up a market opportunity for building a solution that could make things a little bit easier.
⚡️ Problem Statement
Dog walking apps that are currently available in the market take a significant amount of time until they connect dog owners with trustworthy users who can take care of their pets. With a busy schedule, it isn't easy for dog owners to find users around them who can take care of their dogs.
🏁 Project Goal
To design an application which would help dog owners connect with people around them who can offer services such as dog walking, boarding and sitting effortlessly without going through numerous steps.
📈 Timeline
The duration of the project was four weeks, where my role was UI/UX.
✨ Design Approach
The approach taken for this project was definitely not a linear sequence of events. Design thinking ideology has been used to try to approach this problem while focusing on the user in every step.
1️⃣ Research & Empathise
The first step was to try understand what do users actually need? What other apps that are available in the market can't really provide? To do so, I have conducted a qualitative interview with a dog owner residing in Stockholm, and have sent out a survey to 10 different dog owners from different ages and locations.
One of the biggest learnings I got here is that the qualitative interview was far more valuable than the surveys. You can dig deeper into the user's pain points when you talk to her/him/them directly instead of a one-way survey where some questions can be skipped.
👀 Competitive Analysis
While conducting the research, I've also analysed two of the most common apps that are currently available in the market.
The biggest pain point I found with the following apps is that it takes quite some time and several steps until a user gets connected to a potential sitter/walker.
1. Rover
This app connects dog owners with dog sitters and dog walkers. It provides services including boarding, house sitting, drop-in visits, doggy day care and dog walking. Despite being a great app for serving its purpose, Rover does have a few limitations in terms of UX.
✅ I like the profile page, it shows you everything you need to know.
❌ While looking for users who can watch your dog, you can only select one service at a time (e.g. you cannot select boarding OR house sitting in the same flow).
❌ Does “Your pets” really need a dedicated tab considering that you’ll access this very seldomly?
❌ There’s several steps until you actually get to see this list of available users around you, adding some friction to the user.
2. Pawshake
Pawshake gives you the option to have someone look after your dog or pet.
✅ I like that the app informs you about how active the users are.
✅ I really like that you can already check for sitters around you before even logging in.
✅ I appreciate the message about the guarantee offered by this app.
✅ I like that you can browse sitters around you using the map view.
❌ Cannot send images/videos in the chat.
❌ Bad customer support according to reviews.
Persona
Following the market analysis, user interviews and surveys, it was time to gather this data and create a persona.
2️⃣ User Flow Diagram
With all the research and persona in mind, the next step was to create a user flow diagram which represents the journey of a user from starting the app to actually booking a sitter.
🪄 THE DIFFERENTIATOR--------------------------------------------------------------------
Following the feedback received during the research step, I've decided to create a new flow of finding a sitter which would allow the user to create an ad that would ping all the available dog sitters/walkers. Once they reply to the ad, marking themselves as available, the user who posted the ad gets pinged. The hypothesis is that this will reduce the amount of time a user spends searching for sitters and walkers.
-------------------------------------------------------------------------------------------------------
3️⃣ Wireframes
During the ideation state, I've created low fidelity wireframes which were drawn on FigJam, and then I modified them to be high fidelity.
Onboarding flow
Following the initial ideation represented below, one of the things I got feedback on is that a user must be able to see where they are in the flow and how much they have left to complete the flow. As a result, thus I ended up adding a progress bar at the top of the screen.
Finding a dog walker
The process of finding a dog walker, sitter, etc shouldn't take numerous steps, as that's one of the pain points of users using current available apps. It takes time to go through a list of potential sitters who might end up busy. With this flow, a user creates an ad and then receives offers from available users, reducing the amount of time and the workload required for being connected to the right person.
4️⃣ Visual Designs
It was time to add some visual design to the high fidelity wireframes to match how the app would look like when it's built in real life.
Mood Board
As a first step, I've tried to look for things that could inspire me on Dribbble for how my designs will look like. I've chosen a shade between blue and purple as that represents depth, trust, loyalty, three elements I wanted this app to convey.
5️⃣ Design System
Design systems are great for keeping your designs consistent with each other, ensuring that you're reusing the same components, typography and styles. It also improves the speed at which you build new screens. Using the building blocks that such a system provides you with is almost equivalent to using lego pieces to build an object.
At this stage, it was a great time to define the components that have been used in my screens and ensure that they are scalable.
6️⃣ Testing the Prototype
It was time to link the screens together and build a prototype which can be tested on a dog owner who could potentially use this app. At this stage, I've made a lot of assumptions and took decisions that might not be the correct ones, so I needed to get input from a real user.
During the user testing session, I've requested the user I've tested this prototype with to tell me what he sees on the screen and then perform an action. I wanted to capture the user's behaviour and pain points as they were going from one step to the next one. To document the user's input, I've used the Figma comment feature to note down what the user felt or said while navigating through the prototype.
One of the biggest learnings throughout this process is that user testing should be done early, preferably at the wireframing stage, as that might save you some time doing adjustments on the. Wireframing stage can even be more important than the visual design stage. If a product doesn't work the way a user it to, that product will possibly fail. Even the prettiest most ascetically pleasing products can be considered useless if users have a hard time achieving their goals.
7️⃣ Reiterating the Prototype
Following the findings and insights I received while testing the prototype, I organised each screen, summarising the findings and added a suggested action for each finding which could improve the user experience.
Homepage Adjustments
The following observations were noticed while testing the homepage:
User failed to understand what “35 SEK” actually means. Is it per hour or is it the total payment?
User failed to understand the numbers “4” and “2” in the cards. He couldn’t really figure out that this number represents the count of respondants.
The copy on the CTA button “FIND A SITTER” was confusing to the user as he thought that he could post ads using this app, and he might not necessarily need a sitter, but a walker, etc.
User didn’t really understand the edit button on the top right. There was some confusion about whether it edits the user’s profile or the image.
Here are some screenshots of other screens that have been modified
⏭ What's Next?
The next step would be to retest the prototype following the adjustments made with more users to evaluate whether these adjustments have actually improved the UX or not.
📖 Key Learnings
According to 5 different dog owners I have talked to, the flow of allowing users to post an "ad" rather than hunting down dog walkers and sitters one by one seems to have a great potential in the current market.
Designing a usable product is never a linear process.
Users should be involved in the product design process all the way from point A to point Z.
Testing wireframes with users can provide incredible value and user insights.
If you have any questions or requests, please don't hesitate to leave them all in the comments section below. 👇