Woofapalooza is a dog walking app prototype. It was created on Figma during dribbble's UX design course with mentor and student peer feedback. The branding and visual components were designed to be fun, with an almost cartoon-like dreamy vibe. Choosing a dog walker and/or affiliated services shouldn't feel like work. It should be a joy-filled experience. Woofapalooza is more than just a dog walking app. It is a community of dog walkers and owners.

Problem Statement

There are no reliable and/or well known dog walking apps outside of the larger cities in Western Canada. There is a market opportunity to create a more visible option for dog owners and walkers, while at the same time creating a community with trust and a feel-good vibe as key central components.

User Research

There were three subjects contacted directly for Woofapalooza's User Research phase. Being in a course with over a dozen other students, there was also data available from other students who were creating similar apps. This information was gathered from across the United States and other Western locations outside of North America which created a larger sample information for research.

Outside of Western Canada, competitive dog walking apps existing proves already there's a desire for owners to find dog walkers online. Location, trust, and convenience were all top of mind for dog owners who would use these services.

"There are no dog walking specialists I know of" - research feedback

Market Research

Outside of larger cities, dog walking apps are few and far between in Western Canada. Two of the subjects I interviewed live in the mid-sized city of Prince Albert, Saskatchewan. With 36,000 residents, I could only find three dog walkers on a site called Rover and one with no user photo on a pet sitting site. None of the sites/apps I have seen--including those shown by other students in the course--have a community vibe as a central component, which would build trust.

"It would need to be somebody I know" - research feedback

While many dog walking apps have cute images or features, many appear to put functionality before a fun and stress-free user experience. The mood board was for inspiration, with the intention of choosing cartoon-like photos of dogs for the actual design, not animations. This further solidifies a community feel-good vibe.

Persona

The image of the persona app user above is of Lorena, a fictitious dog owner who wishes there were more dog walking services in her area. She embodies a younger, hip, and fun vibe. She has a cool and zen-like disposition. Lorena cares about reliability and trust. She cares about community. She has a big heart and loves her dog. Woofapalooza is an app she would be able to embrace and rely on.

User Flow

After the onboarding phase, the user will be able to choose "Dog Walk" to find a dog walker in their area. The walkers will be listed in order of distance. Advanced development would allow the user to filter the walkers' information in other ways: possibly by ratings, cost, or specialist services. When a dog walker is chosen, their bio will come up. After reading the bio, the user can message the walker or go back to the search screen. Ideally, the price would be the same for each walker with add-on costs for additional services such as feeding. More research will be needed to determine if this would work for the walkers offering services.

Wire Framing

The user flow stage was trial and error. The feedback I received was that I needed to use the icons differently, as some represented actions rather than being a page. Wireframes were communicated clearer, but more feedback motivated me to make several adjustments to the onboarding and dog walking screens of Woofapalooza. The home screen would then be designed to be much more visual than in this original wireframe. The image in the selection page (third screen) would be put above the buttons and more clearly not be a button itself.

Visual Designs

The two above images show the evolution of the visual design. The Home Screen remained the same other than the bottom sign in button. Buttons overall were made more visual and the blue was removed around the search bar in the fourth screen. As noted, the image in the third screen was moved above the buttons.

Visual Design Library

I created a library with several components. The star had a master so the colours can all be changed in one place. The example above shows a gold-like color, to illustrate. The font chosen for the design throughout was Source Sans Pro bold 28 font for title pages, 14-18 bold and regular font for almost everywhere else. "Woofapalooza" is Flavors regular 32 font. I drew the paw in Figjam. The paw has a master, as well, so the color can be changed throughout the design easily if need be. There were only three colors used, including for text, though this black 1D3039 had the fill adjusted often. The avatars in the design and those added in the prototype stage were chosen carefully to reflect cultural and age diversity.

Final Design and Prototype

This was my final design for the Woofapalooza app prototype. White was used throughout and the grey background was discarded. The image on the third screen became more of a hero image so as not to appear like a button. The search screen was made to be scrollable. Clicking on the paw beside the Woofapalooza text opens a fun mirror image of the home screen dog.

https://www.figma.com/proto/sLwC06Odsdb7TupbJz1akE/Project%3A-Dog-Walking-App-Shanon?node-id=50%3A1714&scaling=scale-down&page-id=4%3A3710&starting-point-node-id=50%3A1714

Changes made after user test and mentor feedback included dropping the Woofapalooza text (as it was cut off in the device screen display option), adding the back arrow buttons for every screen, and experimenting with the paw animation: slide direction, dissolve, instant, timing, fade in and out, etc.

One user gave further feedback that could be deemed important if considering adding additional features. Here is the full message:

Outcome / Results

Woofapalooza was a fun app to build a prototype for. As this was my first UX design, all the tools in the course were new to me. I am now able to use figma and figjam, as well as being able to create basic prototypes. I understand more clearly the seven product design phases and how to adjust my designs after receiving feedback. I am happy to have garnered these additional skills as I can now use them if the need arises in my publishing company and freelance work.