Charlie - Dog Walking App
Introductions
THE BRIEF > 💨
Charlie is my concept for a dog walking app which also offers other services for pet care like: sitting, boarding, training, and more. This app not only offers care for dog owners, it includes cats and other animals too.
THE INSPIRATION > 🐕
My main inspiration and why I named my app, is my dog from my hometown, (you guess it...) Charlie!! Dog noses, bright happy colors, peanut butter, popsicles, and goofy playful dogs, were among some of the inspired images that popped onto my mood board collage. These guided me through my design of my logo, "Charlie" with a dog nose at the end, and the design for my mobile app. Check out the logo design, image gallery of the real Charlie, and my mood board in the slide show below. 👇🏻
Project Overview
THE GOAL > 🥅
The goal of this dog walking app is to find a way to strengthen the communication feature between dog walkers and owners to enhance the overall trust and community experience.
THE PROBLEM > ⚠️
Finding a trustworthy and reliable dog walker to take care of their furry friend while away. Also, not being able to communicate easily via application due to paid premium memberships or contacting through messaging not enough to build that instant trust.
CREDITS > 🎥
• UX / UI Design by: Ann Marie Manfreda
• Software programs used: Photoshop, Illustrator, Figma, Reals.ai, Notion, Google Survey
User Research
THE USER > 👩🏻🦰
Pet owners who need a convenient way to book services for their dog but also offers flexibility, communication, and trust to care for them when needed.
THE INTERVIEWS > 👩💻
I reached out to all the dog owners I knew and chatted with them about their overall experience when using a dog walking app to book services for their pet.
Nearly all had issues with using the popular apps. Some expressed frustrations were: customer support, trusting a stranger to take care of their pet, communication on one of the apps required a paid membership, but even on the other app, there wasn't a way to completely ensure that trust and reliability.
After conducting a few interviews with pet owners, I came to the conclusion of similar pain points, risks, and likes.
THE PAIN POINTS > 🤕
Communication
Schedule
Reliability
Trust
Pet safety
Market Research
THE COMPETITIVE ANALYSIS > 🔍
I did the majority of my researched on the 2 most popular apps out there: Wag! and Rover. There weren't many others. I went through the sign up process, finding a dog walker, and contacting the walker. I discovered from Wag!, that you need a paid membership in order to contact the walker, but on Rover you can message the person as an account holder. You can only contact the person through messaging and nothing else. I jotted down that point. Both offered the usual pet services, while in addition, Wag! offered a few third party paid services that they advertised. Both also have vetted background checks for their walkers which are advertised with certain badges.
THE USER PERSONA > 👩⚕️
I based my persona off of a real person I conducted an interview on during my research. Marisa is a nurse practitioner, who works long 12 hour shifts at a major hospital. She’s also a busy mom of 3 taking her kids to soccer practice and games on the weekends. She needs a reliable walker and sitter for her dog but has had trouble with the popular apps that are out there. She said the key factors in using the app were: convenience, money, and time. Her major pain points were: communication, flexibility, and customer support. I used this situation to create a way to easily communicate with potential pet care hires in my app. My special feature is having video bios, along with the option to either text or video chat the walker.
User Flows
THE USER FLOWS > 🏊🏻♀️
I mapped out 2 different user flow scenarios. Simple vs detailed flows but both eliminate the tutorial on what the app is and how to use it. Instead, I made the decision to add a card to the dashboard and the user can decide to explore it, if they needed help on how to use the app. That way, the user can get to where they want to go quicker, with less screens in the sign up process.
V1: Simple onboarding + finding a dog walker >>
The first, is a very simple onboarding: splash, welcome, login decision, and dashboard.
V2: Onboarding + finding a dog walker with options >>
For the second flow, I added more detail to the onboarding. I spelled out the users options when landing on the welcome screen. I also mapped out their flow to find a dog walker.
Ideation, wireframing, & prototyping
THE WIREFRAMES > 🖼️
I created my first set of wireframes mapping out the onboarding and the dog walking flow. After stepping away for a bit and coming back to them, I decided to clean up some of the design which led me to V2. See below descriptions:
V1 Wireframes >>
• Onboarding: Splash intro, into login screen (can choose to bypass & browse instantly) when you come to the Dashboard screen. For the Onboarding 3 screen (Dashboard) - I have cards for Booking a Service (walk, sitting, boarding, etc) and then the 2nd row I have Take a Tour section where the user can view a guide on how to use the app, Browse Local pet care, and also How to become a Pet Caregiver themselves if interested.
• Dog Walker Screens: I have them curated under different categories, but the user can also filter and sort by specialty, location, reviews, etc. For the walkers Bio screen, I have a carousel at the top where users can scroll through their image gallery. I also added a play button for a little video intro (walkers can choose to add this, as a way to promote themselves and a way for pet owners to get a nice intro for the walker). Their stats are listed after their intro paragraph and price listings for each service they carry. Message button is at the bottom. Thinking about potentially either moving to the top or having the button sticky upon scroll?? Not sure yet. Then the 3rd is my messaging screen, where the user and walker are planning a meet and greet prior to booking.
V2 Wireframes >>
• Onboarding: On the 3rd screen, under "Take a Tour" section, I switched up the size of the cards and direction of scroll. Since it is a new section, I wanted something entirely different from the services cards, so the user can see that they are on a new section and has different objectives.
• Dog Walker Screens: I changed up the 1st screen. I made the bio cards bigger and added some important callouts about the walker’s specialties, star rating, certified status, pricing. I also added a CTA “Book Now” button for those users that did not want to read the entire bio and are ready to book instantly.
Ideation - Prototyping
THE PROTOTYPE > 🕹️
For my prototype, I have the user flow through the onboarding process by signing up for a free account on the Charlie app. After they sign up by email, it prompts them to set up their pet profile but this section is skipped for now, to take them right to the home screen. Here, they click on the dog walking card to search for a walker. The landing page is categorized in a few curated sections such as, Top Rated, Video Bios, Walks Under $20, and Near You. I direct the user to find Katie N.’s bio card which is the first one, and play her video. After watching the video, the user is directed to click to read more about Katie and to contact her to see if she’s available for a meet and greet before hiring her.
THE ANIMATION > 💃
The splash animation. Here's a prototype showing the beginning splash intro upon opening the app. The user is treated with a playful bounce of the Charlie logo and introductions.
Ideation - Visual Designs
THE ONBOARDING SCREENS > 🤳🏻
Below are my high fidelity screens. The first set of my visual designs, are the onboarding screens:
1) Splash intro
2) Sign Up or Login page
3) Create account
4) Success notification
5) Create pet profile
THE DOG WALKING SCREENS> 🐶
The second set of my visual designs, feature my dog walker screens, including the home page.
1) Home page/ Dashboard
2) Dog walker search
3) Dog walker bio page
4) Contact walker landing page
5) Contact walker message intro
6) Contact walker communication
Usability Testing
THE TESTING > 🧪
The user was given a link to the prototype with guidance on where I wanted them to flow for the testing.
THE FINDINGS > 🥳
Overall, the testing went great. The user was able to easily sign up for a free account, sign up with email, and in the end contact Katie N., one of the dog walkers through message. The only hiccup was that the play button was missed on the bio card at first glance but went back and saw it the second time and was able to play the video.
Here was the feedback:
"Video played but it had no sound upon clicking. Overall everything seemed easy to find and did not have a lot of trouble completing the instructions for the flow. The only thing I did differently, was I bypassed the play icon on the bio card and went straight to the “Read More” link and then went to look for the video on her bio page but it was not there. Then I looked at it again and saw the play button on the bio card for Katie N."
Takeaways
THE RESULTS > 📒
After the usability testing and feedback, I was able to fix the video in my prototype to play the sound. You can see that reflected now in my prototype above.
THE WHAT I LEARNED > 🧠
Ultimately, I learned how to prototype within Figma for this case study since they have updated it. In my previous case studies, I used Marvel software to create my prototypes and testing.