Fido! / Dog Walker App

Introduction

This case study is the result from taking the 12 week Certified Product Design course delivered by Jesse Showalter via the Dribbble platform.

My role in this project included being the Product Designer, Visual Brand Designer, and Illustrator.

Problem

As a pet owner, we wish to dedicate as much time as possible to our furry friends. We know that spending quality time with them establishes a strong connection, which in turn, builds a healthy and happy relationship. Unfortunately, in our busy day to day lives, we sometimes find ourselves requiring help in order to deliver the attention required.

One solution to this problem is finding a dog walker. This, of course, has its own complexities in itself. Let's delve in a little deeper.

Discovery Phase

Interviews, Market Research and Defining the Persona

Before we can start designing anything, we really need to understand the problem before us. Therefore, by interviewing people who have first hand experience and by comparing already established solutions, we can identify patterns or pain points.

Development Phase

User flows

This part of the process is really important to share with the developer team. Communication is crucial so that both parties can work for the common goal knowing what each team expects to achieve during each stage.

Being able to visually understand the way we are guiding the user to achieve their goal, in the simplest way possible, offers a better experience.

Sign up flow
Sign in flow

Wireframes

The backbone of our app. From this early stage, we start to conceive how our app will come together. Even if the visual design hasn't been completely established yet, we can start to interact with the functionality of the app.

Once again, we need to reiterate on these concepts before the defined colours and visual elements are set in stone. We can put to the test our user flows and make changes if required.

Moodboard

Having a moodboard will help us determine the path we'll take in order to create a strong visual brand.

When we think about taking our pets for a walk, images of wide open spaces come to mind. We can picture walking our dogs in parks, forests, over hills, by the beach or river. Even if we find ourselves in big cities, the local park will have a green area in which we can exercise our dogs.

Having said this, we can start to see that certain colours will start to appear in our associations with these physical spaces. Different shades of green may represent foliage and grass. Blues can be associated with the sky and fresh air. A good to colour to represent the energy and dynamic activities involved in these outings is orange. A colour exploration can be seen down below.

Visual Designs and Components

Now that we have established our wireframes and developed our visual brand elements, we can start incorporating into our design system.

As can be appreciated in the video, the process of signing up leads the user to follow some simple prompts and immediately receives a successful and welcoming message. Creating a sense of belonging starts to establish a connection with the user.

Outcome

Developing an app in its entirety from scratch was quite a journey. I have a better understanding of all the processes that are involved.

I think the two key words I learned from this experience were reiterate and feedback. Reiterate at the user flow stage, reiterate at the wire frame stage, and get feedback along the way. By the time one arrives at the visual design stage, the amount of changes will be minimal.

In the future, I would like to be able to generate user flows which are simpler at a glance. Prototyping and being able to create appealing UI design patterns are also some areas I'd like to delve deeper into.

Acknowledgements

I would like to thank Valerie Downs for her mentorship during this course, without her patience and guidance, none of this would have been possible to achieve.

Gracias Juan Carlos Díez Rodríguez por ofrecer tu tiempo y compartir tus experiencias con nosotros.

A big thank you to everyone in my cohort, without their valuable insights I would've missed things that hadn't or wouldn't have occurred to me. Having a common goal, even though we had our own solutions, made this an exciting course.

Thank you Jesse Showalter for putting this course together. I had been following your videos before I took this course but this was the best way to have a structured method of learning the skills in order to become a Product Designer.

Thanks to Figma and the Dribbble community for supporting everyone and making this happen. You guys rock!

More by Dafnis Vargas

View profile