Case study

The aim of this project was to design a mobile app for dog owners to find other people to walk their dog when they can't.

In this case study I will show the design process I went through to shape the prototype you see below.

Case study overview

In this case study I will show the design process I went through to shape the prototype you see above. I'll give a brief overview of each stage going from the problem statement and user research to wireframing, showing off a low-fidelity prototype, and a bit about the final high-fidelity designs at the end.

Throughout I'll share some things I learned and if you have any questions please let me know in a comment!

It's worth mentioning that I created this project as part of the Dribbble product design course, which thought me the beginnings of UI/UX design, yet there is still a lot to learn for me! So please if there is something that is off or you think could be improved, drop me a friendly comment. Constructive feedback is always appreciated! Thanks :)

Problem statement

The aim of this project was to design a mobile app for dog owners to find other people to walk their dog when they can't.

Dog owners need to walk their dogs often to make sure they are happy and healthy, but sometimes life gets in the way and the owners simply don't have time or are away on a trip. In that case they need to find someone else to make sure their dog is well taken care of.

Finding someone however can be challenge if you don't know any friends or family members who like dogs. On top of that if their dog has special medical requirements it can be intimidating for friends to take the full responsibility of caring for the dog, but how do you find someone who knows about these things?

"How do you decide that a dog walker is trustworthy?"

Research

Discovery session

We held a discovery / brainstorming session in our study group to identify potential audiences and groups of users who are facing the question of hiring a dog walker and who may benefit from a dog walking app. This process directly informed who we decided to interview for our qualitative studies.

I found this session very insightful as it showed how a blend of multiple points of view needs to be considered when building not only an app or digital product, but also a sustainable business. Without the business the product cannot be built and real-world problem remains. But where do you start with only limited resources? What's the minimum viable product (MVP)?

"I want my dog to be treated like a family member,

not just like a pet"

User Research - Qualitative study

To better understand the problem dog owners were facing and the social context around it I conducted a small qualitative research study. In the course we put together a questionnaire which I tailored to focus on a key area of interest to me which was the topic of 'trust' between the dog owner and the people they entrust their dogs to.

I interviewed a dog owner and a dog walker to discover their views on the topic. I discovered that really all the dog owner wants is to find someone who aligns in their views on how to treat their dog. The dog should be treated "like a family member".

While the dog walkers want to be sure to be given detailed instructions on how to treat the dog and also it is important for them to know whether the dog is well behaved and trained, so they don't get into trouble walking the dog they can't control.

The study allowed us to create a collection of personas to collect our findings and would be used as a tool to create empathy for the users in the product team and the business stakeholders. It reminds us who we are building the app for and is an effective tool to communicate this.

User Flows

User flow diagrams are used to quickly sketch out the interactions between a user and a digital product. They are fast to create and provide just enough information to have a clear view of how users would navigate within our app to achieve their goals.

I started with an idea to create a clever feature for the app, which was to automatically match dog owners with walkers based on a matching algorithm. I also wanted to avoid users from having to sign up to the app immediately when opening it up on their phone, since without having a chance to try the app, few people would actually sign up.

I ended up with a quite a complex user flow which did not work well, so I continued to iterate three more times through this phase. Eventually mapping out a simpler journey and dropping the auto-matching algorithm in favor of a more dog-focused personalised search feature. Patience does it!

Wireframing

Rapid prototyping was done using wireframing, which is like a sketch of the app screen. The idea is to map out basic components and start thinking about how information laid out on a screen and how the screens relate to each other.

I ended up linking the wireframes up as a prototype in Figma, which allows you to click buttons and do basic interactions to test whether they make sense. You can try out here: wireframe prototype

Low-fidelity prototyping

I continued to iterate on the wireframe prototype to better understand the layout of the information and location of buttons. I used a grayscale color scheme to show depth and underline the information hierarchy, and I defined a typographic scale to structure the text on the screen. The result was a more robust and defined low-fidelity prototype.

I used the prototype on my phone to show to testers I chose, who gave me feedback to improve the interactions and design. It highlighted issues in the login flow and in the 'progressive enhancement' of the search feature.

A simplified version of the 'progressive enhancement of search' feature idea finally took shape after multiple rounds of testing and tweaking. Where I ended up with it was two different ways to search for a dog walker.

• Basic search: The dog owner could quickly look for walkers by only selecting a few filters.

• Enhanced search: if say the dog owner has a dog with medical conditions, and would do a more advanced search often, they could register their dog and their preferences. During the walker search they simply select the dog who's going on the walk to automatically search for matching walkers (like walkers with vet experience).

I am quite happy with where I landed with this feature and it is a great example of iterative design going from something overly complex like the auto-matching idea to a simple search with optional personalisation.

I have learned a lot in the process of designing this app and still have more to learn on the visual side of design and UX research, but I really deep dived into this process and really loved it!

High-fidelity prototype

Once the low-fidelity prototype was defined I added colour, images, icons, transition animations and all the fun stuff to make a more polished and clean looking design.

To start I put together a mood board to get inspiration on colour palettes, layouts and illustrations. Then I defined the colour palette and typography. I first started by using a Material UI 3 toolkit, but then, unhappy with the automated choices, went my own way, only recycling some of the components from their library and folding them into my own component library.

Thank you

Thank you for checking out my case study! Please like and comment to share your thoughts :)

I have learned a lot in the process of designing this app and still have more to learn on the visual side of design and UX research, but I really deep dived into this process and really loved it!

*Attribution note for the illustrations used in the app designs:

• Collection vector created by pikisuperstar - www.freepik.com

• Pitbull vector created by pikisuperstar

• Kawaii animals vector created by freepik - www.freepik.com