This app was developed as the first project of the Dribbble product design course. The project was an opportunity to learn the product design process and develop the necessary hard skills.

The process comprised research, design, prototyping and user testing in order to discover pain points with existing apps and develop an improved user experience.

The problems with other dog walking apps

Based on user research, a number of pain points with current dog walking apps were highlighted.

Two prominent pain points can be summarised as convenience and confidence.

Convenience

The research revealed that current dog walking apps were not convenient to use, especially for short-notice walks. This was doubly frustrating due to the combination of users’ concern for the welfare of their pets and the pressures of juggling life’s other everyday demands.

Confidence

Users’ concern for the welfare of their pets was the source of the other pain point, i.e., a lack of confidence in using an app-based service. While pictures, profile information and reviews were mined for information to make decisions, users still had some worries over trusting walkers with their pets.

Addressing the pain points

Goals

Taking a user-centric approach, three project goals were set:

(1) Easy access to the app for both first time onboarding and repeated use

(2) Quick and convenient instant booking for dog walks

(3) Liked profiles that promoted connections between users and walkers

Solutions

These goals were achieved by developing the following features for the dog walking app:

(1) Ability to search and browse the app without an account and a quick-set up option for sign-up

(2) 2-step process to create an instant booking for a dog walk with a message informing users if selected walker was unavailable

(3) Liked profiles are customised to the user, allowing the person to leave notes about walkers and view user-specific information (e.g., number of walks)

While those sets of screens were the major focus for achieving the goals, screens for walker profiles and chats were also created since these were integral to the other features.

Designing the solution

User flows

User flows were drawn up to determine the best paths for users to achieve the goals. Wireframes fleshed out those paths, while fully designed prototypes allowed for testing and improvement.

The solutions for all three goals evolved over time. While envisioning the first two goals was more straightforward, the path to achieving the third was more elusive and took longer to visualise.

Wireframes

Wireframes of options for the onboarding, walkers’ view (list and map) and walkers’ profiles screens were sketched out.

Design details, user testing and information requirements all played a part in requiring adjustments. The basis of the end product are all here and are highlighted.

Design aesthetic

The keywords for developing a design aesthetic for the app were fun, bright and accessible.

Blue was chosen as the main colour because it’s the colour of loyalty, which is a defining characteristic of our relationships with our dogs.

Other colours were initially included in the palette but were discarded to eliminate unneccesary visual clutter and confusion.

Livvic font was chosen because of its less serious appearance.

In terms of accessibility, the colour combinations were chosen to adhere to WCAG colour contrast guidelines, and the line height was set to approximate WCAG recommendations.

Prototyping, testing, evolution and final screens

Prototypes of the initial wireframes were created. These were then tested in 3 rounds with 5 different people across the total number of rounds.

Onboarding

The general feedback regarding the onboarding process was positive. The option to bypass a longer sign-up process with a quick set-up option was appreciated, and the overall feeling from the language was thought to be friendly.

This flow remained the same after the first round of testing aside from some suggested textual changes.

List view

The list view was confusing, largely because it was titled Home. This was not what would be expected from a home screen. There was a disconect between the title in the bottom action bar and what was on screen. Additionally, it was unclear what was being “listed” in the view or how it could be changed.

The action bar icon and title were changed from Home to Find, and input fields for making a booking were added.

Instant Booking

In an attempt to mimimise the number of steps needed to make instant booking, the design went against established UI patterns.

Clicking on a profile activated the instant booking CTA rather than moving to the profile screen. The attempt to rectify this resulted in too little information for the user to know where/how to make an instant booking.

The final iteration moved the function to the bottom action bar and achieved the 2-step process desired.

Liked profiles

Initially the Liked profiles function simply filtered the list to show only those profiles that had been liked.

In order to promote connections between users and walkers, the function was changed so that the walkers’ profiles were tailored to the specific user. The main feature was allowing users to leave notes about walkers, which the testers all rated highly.

Testing also revealed, however, that no one could find out how to leave a note. The order of the information on the card was changed, resulting in success.

Reflections on creating my first app designs

I think that the major takeaway from this experience has been that I need to expand my idea of what it means to design from a user-centric standpoint.

Throughout all the iterations of my designs, achieving the goals of maximising convenience and confidence for users was always at the forefront. I would think about how I could reduce the number of steps to achieve an instant booking or which flows would signal that the app respected the users.

I think the problem was that I did not shift the way I thought about presenting the content. The screens continued to be organised in terms of static content practices: important items were in the top left, attempts were made to standardise screen headings. I needed to start thinking about what information was needed and where for users to achieve their goals rather than presenting it in a well-ordered, left-to-right and top-to-bottom manner, expecting users to find their way.

Thanks for reading this far.