Doggle is a niche dog walking app for the discerning dog owner. It's not trying to be everything to everyone. The main selling point is that there are no ratings. Yes, you read that right. By removing ratings, the search becomes less about popularity and more about the fit between the dog family and the walker. If you only want 4 star or better, why even have the others? Every walker is vetted by Doggle, and only the best are available to use. Doggle does all the "legwork".
Doggle, by design, reflects the professionalism and warmth you want for your best friend.
Enough of the pitch. Let's look at design.
As a product designer, my role was to take this project from concept to code for Dribbble's product design course. Being fairly new to the process only increased the challenge, but I managed just fine.
The problem
Boiled down, dog owners need their dogs walked, but services are often too expensive and owners don't trust them.
The prompt
Create a service to connect dog owners with dog walkers. Consider how we can help dog owners trust their dogs are in safe hands
The research
Starting with the competitive market, I looked at what other apps and services were like – what they offered, what they looked like, pricing, structure, brand, comparing similarities and differences. Then I did some interviews with dog owners. With that information I distilled the information into insights, and built a user persona.
The biggest insight I gained was that most people would use a service if they could trust the service and the walker, especially if the price was reasonable. I'd need to bring assurance and confidence to that service.
Ultimately, the service had to be right to get users in the door even to have a look. The product on the shelves (aka the walker) had to be good enough to get them to stay. A few interviewees mentioned specifically that "the vibe" had to be right (admittedly this had more to do with the walker). I endeavoured to get bring the vibe.
User flows
I focused on a comprehensive flow from onboarding to checkout, allowing minor deviations and accomodating the return user. The structure was aimed at having the fewest steps possible while still giving the user control and options. This proved tricky but I found a way to end in a place that could loop back around to the beginning for easy repeat use. An Uber model was what I had in mind.
Wireframes
The idea here was to have big button navigation without an overwhelming amount of information. The user shouldn't have to tap to a different screen unless they were sure of what they wanted. As per my user flow, I felt it was important to have only one screen per decision point where possible. Cards seemed to be the best for this, with dropdowns and scrollability.
Visual design
Virtually no other pet care service I had seen was using orange. I considered a combination of teal and orange, but simpler was better. Orange added warmth and confidence. The wavy lines added a sense of movement, reflecting the purpose of the app. Images and icons also inform the design. Colour is consistent through the app, but each screen has its own look and feel for a nicer experience. Top it off with Work Sans as a beautiful type for easy reading.
Prototyping and testing
User tests proved mostly successful, with users finding it intuitive and engaging. However, I needed to fix a few contrasting issues due to poor visibility (including addressing colourblind users), and more descriptions needed to be addressed for some of the options. This is where most of the changes from the initial wireframe were needed. Eliminate and simplify. Icons are good to have, for example, but I needed to make them tap-able to make it easier for the user to know what they are. More dropdowns, automatic pop-up messaging, and lots of scroll power without too much information to leave the screen.
Completion
Is it ever really complete? Not for me. There's always plenty to improve on (every good designer feels this). I'd love to do more user testing and try new iterations, but there's always a deadline and it needed to be shipped on time.
What have I learned? People reeeally love their dogs. Also, wireframes, user flows and components can help a lot early on if used right (or at all).
One thing I really understand much better now is how much I need to consider the developer in this process, and the limitations they're working with. Also, improving my competency with Figma as a tool improves my workflow, time, and designs. Prototyping, however, is by far my favourite part of the process.
