Pup Up! - A Dog Walking App
Overview
There are numerous apps on the market that address dog walking and pet services. The range in offerings, pricing, transparency, security, reliability, and accountability is wide and overall lacking when it comes to trust.
Pup Up! is a mobile app that offers a solution for dog owners to find trusted walkers.
My Role
Led the end-to-end design process from conducting research and defining metrics & product strategy, to designing hi-fidelity screens and the final prototype for Pup Up!
This project was part of Dribbble's Product Design Course.
The Problem
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.
Pets are cherished members of the family. As such, pet owners are guarded over who they will allow to take care of their furry family members. Trusted friends and family are not always available or up to the task. Quality, local neighborhood walkers may be hard to come by, relying on word of mouth to grow their business. There are apps on the market that address pet care with a range of offerings, but overall lack the trust that a neighborhood walker, friend, or family member can provide.
How do we bridge that gap and address the main concern of pet owners: establishing trust with those who take care of their pets?
Goals
With trust as our main element in defining success, key metrics were established
Competitive Research
The first step I took was to collect market research on existing companies that provide a similar experience. I compared Wag!, Rover, and Barkly Pets.
The range in offerings and UX/UI designs helped provide structure and clarity to the project with Barkly Pets’ business most closely aligning to Pup Up’s goals.
User Interviews
My interviews provided important insights from three key points of view: those who’ve used an app to book a service, those that use an independent neighborhood service and are weary of using an app, and a dog walker that uses an app in addition to having their own independent walking service.
Quantitative research was conducted via a Google Forms survey put out on Instagram. Qualitative research was conducted through interviews.
Affinity Mapping
I believe that sharing and promoting transparency of services offered for pet owners will make owners more comfortable using an app by attracting and retaining talent of experienced walkers.
I compiled the research in an affinity map in FigJam, forming a synthesis and hypothesis based on my findings.
User Personas
The findings from my research and interviews were compiled into two user personas, a reference guide to pain points and priorities throughout the design process.
User Flow
With all the information now gathered, I started laying out a basic onboarding flow to better understand the screens I needed to design.
Ultimately the user flow acted as a more of a learning experience in structure, as opposed to an immediate reference for designing the layout. Some key takeaways came from this, resulting in further exploration of background checks, nickel tour onboarding, and defining the sequence to connect with a walker via meet & greet.
Wireframes
Utilizing the user flow and market research, lo-fidelity wireframes were designed to aid in testing and validating possible solutions. After a round of feedback, I decided a nickel tour would introduce the brand and build a foundation of value and trust from the get-go.
Based on my research, once onboarded, I wanted an app introduction to connect users with preferred walkers and designed the rest of the sequence of wireframes through that initial intro to messaging a walker and booking a meet & greet.
Design Time!
Color, Typography and Visual Identity & Branding
After getting an initial idea of how things would look and flow with wireframes, it was time to lace up the design shoes and take the dog out for a walk.
This was the most challenging part of the process. Based on research, the design needed to be intuitive, familiar, and have a human touch. With that, color, typography and other visual elements needed to convey professionalism with a sense of playfulness that only a pet can provide.
To start, I knew I wanted to use blue to convey trust and bring a sense of calmness. The final visual design is the result of feedback received during the prototyping phase to address blue fatigue in the initial blue and grey scale theme. I went back to the moodboard for inspiration, introducing a green hue to reinforce calmness and tie in its more obvious association with nature.
The typeface needed to fit the above bill and work in both large and small format from logo to smaller card descriptions. From there, it was creating some structure around the visual elements that would cascade throughout the design.
UI Library
Part of visual design structure included building out a UI Library that helped immensely in expediting the design process. The library continually evolved in step with the project's progression.
You’ve come a long way, doggy
Designs went through multiple rounds of feedback and iterations before landing on the final hi-fidelity concept.
Hi-Fidelity Designs
Hi-fidelity designs showcasing app features
Prototype, Feedback, Iteration, & Refinement
I created a prototype after the first mockups of my hi-fidelity frames were designed. It was tested with five users, through three rounds of feedback loops, with iteration on designs between loops.
Users were instructed to work through finding a preferred walker, click on filters once in search, find the walker on the map in search, then complete the flow with booking a meet & greet. I asked for general feedback in addition to the usability test and observed their testing.
It was clear after that first round there needed to be a significant addition of more functionality within the prototype. Users wanted to click everywhere within the sequence I asked them to complete. After refining those pain points within the sequence, further iterations addressed more particular concerns like those included in the quotes above.
Refining Adding a Pet sequence to address pain points
Adding a Pet
My initial design needed significant refinements after user feedback. Having every description on one screen was overwhelming to users and furthermore, lacked a progression bar to show progress during the sequence.
The second iteration built on that with feedback that it may still be a deterrent to fill out that information during onboarding and a skip for now or save for later option may be a good consideration. Behavioral description chips were on one screen that users found to be overwhelming and lacking needed white space.
The final iteration took the above into consideration, incorporating a more intuitive and fluid experience. A modal was the best solution, allowing users to skip for now if they choose. Interactive and categorized behavioral chips offer a more seamless and dare I say, fun, user experience. Bullet points in the notes section and trusted accounts to link to a pet round out the sequence.
Adding a Pet sequence hi-fidelity design & prototype
Service Summary Refinements
Keeping walkers' best interests in mind when designing was identified as a project goal at the outset, further emphasized after interviewing a dog walker for research. Designing a service summary for a meet & greet that included tipping was essential after feedback.
The addition of a service summary provided an opportunity to start exploring what adding payment would look like. Tipping for a meet & greet introduces the user to the payment process and should ideally expedite payment later on when booking a walk or other service.
Service Summary hi-fidelity design & prototype
Click here to take the final Pup Up! prototype out for a walk.
Challenges and Next Steps
The biggest challenge was the immersion into the never ending design process where feedback and iteration is a constant.
I'm a dog owner that has struggled with finding consistent, trustworthy care. That empathy was part of the drive to create something that embraced the design process, aligning users needs and pain points for pet owners and walkers alike.
The next step is designing what booking a service with a preferred walker will look like, building out the tabs in the walker profile, refining the map search and adding payment info.
Conclusion
Design truly is non-linear and fluid, embracing the process is key to success.
Don't be afraid of feedback. Users may provide it willingly, however, prodding for further insights based on actions, inactions and body language is just as important.
Lastly, a clean UI Library is invaluable. Use and design them wisely.
