Poppi - Dog Walking App
Meet Poppi the French Bulldog, the mascot of my Dog Walking App ! :)
See how I created the app from zero to end.
Design brief
Dog owners sometimes need help caring for and walking their dogs. Create a service to connect dog owners with dog walkers.
Consider how we can help dog owners trust their dogs are in safe hands. Extension of the service to other pets is a business goal.
Problem statement
I started by identifying the users and their pain points, and jotted down app solutions to solve their problems and make Poppi dog happy <3.
User Research
I interviewed a family of dog owners being also dog sitters, thus collecting a view of the problematics on both sides. I was surprised to find that what I had assumed as true, ie that dog owners were looking for dog walkers necessarily owning an animal themselves, was actually not so important.
Market Research
I found 5 main competitors to analyse on my target market of dog walking :
I explored their websites thoroughly and inventoried what I thought were their strengths and weaknesses : my strategy at that point was to dig the best out of the competitors' websites and leave what didn't serve my users.
Persona
I created Nathalie, a User Persona representing dog owners, to serve as a user reference throughout the creation of my app. The constant question for me would be : "am I solving her problems ?"
User flow
My persona's goal was to be able to book a dog walker as quickly as possible, almost last-minute, so I decided to allow speed in my user flow.
Sign up and Sign in : on booking
Contrary to Rover and Wag!, who are prompting the user to create an account straight away (the Wag! process especially is long as they outright combine signing up with adding your pet), my flow allows the user to directly search for a pet sitter without having any account or even being signed in (public mode).
Smooth checks : login and booking
This freedom of exploration is compatible with 2 main checks the system can make seamlessly :
Is the user logged-in ?
Is the user just trying to book or contact a pet sitter ?
Depending on the replies to those 2 questions, users will be redirected to their dashboard, to the sign-in page, or automatically to the booking / contact process.
Wireframes
My user flow completed, I started drawing 3 series of low-fidelity wireframes after the method of the "Crazy 8's" (drawing 8 ideas in 8 minutes) to explore all the possibilities of my future screens.
I then created high-fidelity wireframes with the favorites I had picked, and conducted some A/B testing with the ones I couldn't decide on.
I iterated until I set the final screens I would apply visual design to.
Visual designs
I started exploring several visual designs for my app and selected 3.
I hesitated between version 02 and 03 as the drawing of 03 represented dog walking more, but I remembered one of the business goals was to extend the service to all pets. I then created a mascot, "Poppi", that could represent dogs and all other pets : "a cute little guy just looking for love".
Poppi : "Who is going to provide love to me ?"
I extended my favorite visual design to all my other screens.
I paid particular attention to accessibility :
Sufficient contrast between text colors and backgrounds
Labels explaining the icons in the appbar
Underlined body links for vision-impaired users...
UI Library
I created color styles, text styles and components for speed, re-usability and scalability. The library coud be the beginnings of a Design System, which is bound to evolve and become more thorough as the project will go on.
Prototype - Test
Once the visual design was finalized, I created interactions between my screens to bring the project to life and asked users from my research to test the prototype by sending them a link. They completed the actions without issue but often asked for more, so the next goal will be to create more prototyped screens showing full features before handing them off to the engineering team.
Outcome / Results
We learn something with every project, and this one taught me 2 things :
Research is important to empathize for real with your users, don't assume you know what they think as it might not be the case.
Figma ! That was my first project using Figma instead of Sketch or Adobe XD.
