Connecting Dog Owners with Dog Walkers

This is a case study about a mobile application aimed at connecting dog owners with dog walkers. It caters to both user categories: owners and walkers, encouraging and facilitating their interaction in a friendly, intuitive manner.

Research: solving a pain point

Market Research: Competitors

The first step in this design process was to look at existing similar products. Naturally, I conducted a market research, testing out various dog walking applications, analysing the solutions they proposed as well as any potential opportunities they might have missed.

The common denominator I found was that most dog walker platforms were mostly centered around dog owners. Only dog owners could create profiles or at least if the platform offered the option for dog walkers to develop their own personal space within the app, it would either be very difficult to find or they would need to access the desktop version - a point that could easily drive away the user.

I saw an opportunity in this and decided to design a product that would be inviting for both types of users (dog owners as well as dog walkers).

Quantitative & Qualitative Research

After leading in-person interviews and running surveys online, it was clear that the number one issue dog owners have when considering individual dog walkers (as opposed to using professional dog walking services) is trust.

The challenge was to refrain from asking leading questions as to avoid receiving false and inaccurate feedback as well as missing opportunities in improving the product.

Developing User Personas: who are we designing for?

As I wanted to design a product that would cater to both types of users, developing user personas for both dog owners and dog walkers was crucial in understanding both sides of the problem - the motivations and intentions of both users. Below you'll find the two personas I created based on the interviews and surveys with both user categories.

User Flow: the blueprint of the product

After having a clear picture of who the competition is and what pain points are in need to be solved, we move on to the product creation phase, starting - as any architect would - with the blueprint: the user flow. Always starting with the most important questions: Who is the user? What is their goal? What steps must they take to achieve their goal?

Low-fidelity

I started creating the first user flow in FigJam as it was easier to move around and play with the order of the different actions and elements. I feel that at the beginning of the design process, choosing to start with a low fidelity user flow allowed me to retain my flexibility and stay open to alternative ways of navigation instead of stubbornly sticking to one user path.

High-fidelity

Moving past the low-fidelity user flow, I created the high-fidelity version directly in Figma for a clean, concise format - ready to be communicated to engineers and stakeholders.

I believe that already from the start, a detailed user flow saves a lot of time later on in the design process when we move on to wireframing as it strictly focuses on the way a user navigates the product so therefore must be efficient and proceed logically (without aesthetic distractions).

Two different user flow versions

For this product, I created two different versions of the user flow:

one with one common dashboard for both dog owners and dog walkers (therefore there would be one log in page & one sign up page for both types of users) and another version with two separate dashboards - one for the walker and one for the owner (and therefore two separate log in & sign up pages).

I decided to go with the second version as I believe that, generally speaking, the two user categories are very different and therefore it felt more intuitive to have separate sections for each of them.

Naturally, the question that came up was "what if a dog owner is also a dog walker?". Would they have to create two separate accounts? In this case, perhaps an additional option could be developed where the user could eventually switch between the dashboards, depending on the "role they're playing", or alternatively have this as a premium feature (one account with access to both dashboards).

After careful consideration, I decided to stick with two separate profiles and dashboards for clarity.

Wireframing: low-fidelity & high-fidelity

The wire framing phase is where the elements start coming together. Keeping the goal in mind, what are the features that support our solution to the pain points? The main issue was trustworthiness, therefore, I chose to include client reviews as well as the possibility for dog walkers to showcase previous trainings and experiences. There is also the "verified" feature for additional reassurance - based on number of walks and positive reviews, a dog walker would be considered more reliable and thus be better promoted on the application.

Low-Fidelity Wireframes

As in the previous step, I decided to start with low-fidelity wireframes on paper and then in FigJam before moving on to more advanced versions because it provided an opportunity to brainstorm, test ideas as well as layouts without comitting to a final format just yet.

High-Fidelity Wireframes

Coming closer to the final design version, the next step was to create high-fidelity wireframes - these I did in Figma directly.

This was a step that made me go back and reevaluate my user flows - adding new interactions and finding missing links. It's interesting how the process is a constant tweaking back and forth. The wireframes were closely related to the user flows - a screen for every user action and interaction in the user flow.

Screen Flow

The next step, once aesthetics started coming into the picture, was to create a screen flow (high-resolution UI designs with finished colour, typography and visual elements). This, once again, allowed me to keep in mind the user flow throughout the design process and maintain a logical approach to finding the most efficient and intuitive solutions.

It's very interesting how some screens (as seen below) kept a lot of the features proposed in the Low-fidelity wire framing process all the way into the final UI design whereas others completely transformed. The key is to remain flexible.

Visual Design: from low-fidelity & high-fidelity wireframes to final UI design

The visual design process was the most challenging phase of this project: balancing creativity with efficiency and feasibility while developing a design that is fresh but that still remains familiar and intuitive to the user. This lead to drawing inspiration from popular apps and platforms that the average user is familiar with in order to create a seamless user experience.

No pre-existing components

I didn't want to use ready made components, and decided to create everything by myself - from cards to forms, tags, and all other components. It was a challenge I wanted to undertake in order to understand how certain components and created and thus, for future use as well, how to iterate these and provide better solutions.

Naturally, this process took a lot longer than it would have had I used ready-made UI components, however it was an immense learning experience and allowed me to discover new solutions by trial and error.

Friendly but Reliable Look & Feel

Since trustworthiness seemed to be the main decisional factor for dog owners, and transparency for dog walkers - I aimed at creating a fun, warm and friendly design.

Starting off with a mood board allowed for a natural progression in terms of the colour as well as visual choices (photos & animations). I'm very grateful to have put together a solid UX journey before this phase as it served as a guide throughout the visual design process - keeping me focused on the user journey and making design decisions always centered around that

Finding the Perfect Colour Palette

I chose to go ahead with blue & yellow: giving a feel of sunshine on a clear sky - the perfect weather for taking a walk. Blue evidently also inspires trust so this was also a factor I took into account when making my choice.

3 Design Changes

There were 3 design changes - the last time being after prototyping once again - as every phase of the design process seemed to bring additional elements that could be reinterpreted and presented in a cleaner manner.

I initially wanted to have a clean, pale look - with hues of light blues and minimal colour variations, but after testing I found that creating contrast worked better with my concept. Not only did the design stand out more but the calls-to-action were much better enhanced. Once again - keeping the goal in mind.

Pattern Libraries & Design Systems: staying consistent

This, for me, is in and of itself the most time-saving tool in the whole visual design process. Creating my library of components and their different variants right from the start allowed me to focus on the logical distribution and placement of all the design elements, keeping in mind the user's end goal.

Making sure that my design elements were organised in a library - from buttons to forms, tags, navigation tools and other components, as well as consistent colours & typographic sizing - ensured a homogenous design and made way for a harmonious look & feel.

This tool proved to be especially useful when scaling the design.

Prototyping: making the design come alive

Time to test the design choices and make the product come to life going once again through the user journey - going back to the user flow, this time fully experiencing the product's design.

This phase of the project was all about testing! Going back to the research and user personas, observing users interacting with the product and trying to understand how they navigate the app - what draws in their attention, what are the features they’re looking for, what do they click on… overall, how they find their way through it. 

A phase in which many screens from the initial wire framing and later visual design were deleted as they turned out to be redundant. Prototyping infuses the design with life and interactions - interactions that can take place within the same screen, without the need to navigate through multiple screens (using interactions such as "changing states" from one variant to another for instance).

Creating Different Flows & Guiding the User

This part of the process provided a lot of insight when testing because the initial journeys I proposed would sometimes take different turns when users tried to navigate them. This gave me the opportunity to see the value of hierarchy in design - where the user goes, what they click on - regardless of the initial journey we propose.

I found that guiding the user through the onboarding stage and then allowing them to navigate freely provided new opportunities to explore in terms of additional features that could be added or certain steps that could be shortened (or skipped completely).

Testing & Iterating: conventional navigation VS intuitive navigation

An interesting point I observed when testing the prototype was the difference between "setting up standard interactions" (ex. click on X and it leads to Y, with a transition) and the way we - technology users - intuitively and habitually interact with digital products.

I realised that what I was mostly inclined to doing was dragging or swiping through the screens. Clicking on buttons and clickable links was obvious however, intuitively, my impulse was to swipe backwards and forwards.

Initially I hadn't planned on prototyping the screens in this manner (navigating through the screens through dragging and swiping) however after playing with it and seeing others test it out, it became absolutely vital to include these interactions as otherwise the product seems unfinished or feels awkward to use.

Key Takeaway

My key takeaways after completing this project is that first of all, design is not a linear process but in the form of a spiral - we come back to places we’ve been in before only to rediscover new perspectives with every additional element that we add to the picture.

Staying flexible and adaptable - always open to trying out alternative pathways and solutions are the groundwork of a creative workflow and innovative results.

And finally, most importantly, always going back to the essential questions: Who is the user? What pain points are we trying to solve?

Going beyond just pure design and user experience, and actually creating products that serve a purpose.

Happy designing!

Ioana Rucareanu