Development of a UI design for a mobile application with an associated functional prototype for testing.

Introduction

There are a few dog-walking applications available on the market but none that I found made the decision making process easy for the dog-owner. Typically owners have to spend an inordinate amount of time scouring over walker profiles, saving their selections, and conduct their own vetting process by communicating back and forth with the dog-walker.

Most of the time this level of concern makes sense as dog parents can be extremely protective about their pets. However, there are opportunities to make this simple task painless and deliver the service easily. In this application, I explore methods to reduce the time it takes dog owners to book a walk.

This project was submitted as part of Dribbble's Product Design Bootcamp. It was a great opportunity for me to learn design & dive into UI prototyping using Figma.

I am extremely grateful to my amazing design mentor Rachelle Btesh, and my cohort of 8 fantastic design students for their feedback and suggestions.

Design Brief

Dog owners sometimes need help caring for and walking their dogs. Create a service to connect dog owners with dog walkers. Consider how we can help dog owners trust their dogs are in safe hands.

Design Process: Research & Empathize. Define Requirements. Ideate. Prototype. Test. Refine & Deliver. Measure & Analyze.

As far as the UX Flow is concerned, our job as designers is to clearly answer 3 questions: (1) Who is the user? (2) What is their goal? (3) What steps must be taken to complete the goal?

We used FigJam for Empathy Mapping, User Flows & Mood Boards. User Research (qualitative) was conducted by interviewing friends & family.

User Research

User Persona

"I don’t want to book a day in advance, more like an hour before."

Background: Norina is a busy doctor who loves their dog India. The dog has certain special needs: sheds a lot, very meek and gets intimidated by other large dogs (her eye has been bitten), has a benign tumor & will eat trash if you don’t keep an eye-out.

Goals & Ambitions: (1) Find a trustworthy dog walker (2) Service is affordable

Frustrations: (1) Finding someone in short notice (she has a hospital schedule) (2) Not knowing what happens during the walk

Tools Used: (1) Uber (2) Tinder (3) Doordash

An interesting thing that I learned was that this passionate dog lover had prioritized speed and ease-of-use versus wanting to do thorough background research about each of the walkers. The use of Uber app was something that inspired me in terms of designing for convenience.

Market Research

We researched prominent dog walking apps in the market: Wag & Rover.

They both had their set of unique advantages and design workflows. Core components for user onboarding consisted of logging-in, selecting a service (making a decision), adding a pet (with behaviors), then creating a user profile (with location).

Ultimately, my UX was inspired from the Zeel mobile application which makes booking massage therapists at home a very easy process.

Entrusting a stranger to walk your pet is a sensitive issue where safety is a top concern. The same can be said about booking a cab at night, or inviting a massage therapist at home. Ultimately, the business has to establish a strong degree of trust which can be demonstrated by the use of design.

Screenshots of Zeel Massage App for reference. All design copyrights belong to Zeel.

The majority of apps I reviewed made the user go through a search directory to review various walkers based on several variables and filters. I am hoping to reduce the mental overhead for users by removing their different hourly payment rates. This dog walking application vets and certifies all walkers prior to listing them. There are 3 different types of walking services that the user can select, and each is associated with a fixed service fee. This gives the user a uniform & simple experience when booking a walk.

Screenshot of Walking Services that a dog-owner can pick out.

The fixed-prices keeps the UX consistent, lowers decision-making variables to make a speedy service decision.

Wireframing

After conducting our user & market research, designing an early user-flow diagram it was easy to identify missing gaps in our research. The design process is an iterative circle, so we can always return back to the research phase even when designing wire-frames.

In fact it was during the development of wire-frames, we were able to anticipate certain issues a user could face, and think about the strategies to overcome these:

• Multi-pet issues and how it affects booking flows

• One flow per feature. Ex: Onboarding, booking service

• Consider edge cases and multiple use cases

• Consider different flows for log in

• What is the value prop of putting the dog profile?

• Should we combine dog walkers and dog owners as a persona?

The wireframes was to serve 3 purposes: (1) Present the info that will be laid out (2) Outline the structure and layout (3) Convey the overall direction & description of the user interface.

Some of the research questions I attempted to answer:

• What are the intended user and business goals when interacting with this page?

• How can the content be organized to support these goals?

• Where should the main message and logo go?

• What should the user see first when arriving at the page?

• Where is the call to action?

• What will the user expect to see on certain areas of the page?

Learned that the key is simplicity to get the best ideas out. Always start with low fidelity designs first, with a simple grayscale color palette. FigJam is a great tool for drawing low resolution wireframes to share, but even paper & pen is a great place to start.

Visual Designs

We learned about the 9 basics of Visual Design: balance, proximity, alignment, visual hierarchy, repetition, contrast, color, negative space.

Mood Board (pictured above)

The emotions and feeling of the user-interface I wished to incorporate:

Primary: Playful, fun, colorful

Secondary: Accessible, quick, easy

However, ultimately I wanted to learn how to use design libraries better to improve my productivity rather than design my own library system. I chose to go with MaterialUI 3 as my primary component library. I also utilized the iOS 15 UI Kit for Figma to develop the mobile application designs.

Pictured Above. MaterialUI's robust & well-defined Branding Guidelines that were used in this dog-walking application

Screenshot of wireframes design for the Application.

As part of my research, I also decided that back-and-forth messaging between the dog-owner and the dog-walker are not needed, so as far as to make a booking. Dog-walking is a straight-forward process, and the business would vet walkers prior to listing them. The dog-owner can leave a Message/Instructions for the dog-walker once before booking the walk. They can coordinate via cell afterwards if needed.

Pictured above screenshot of frame covering the dog-walker's schedule.

I utilized the S8 Calendar Component (Designer: Roman Kamushken) in my UI, adjusted to the color-scheme branding provided by MaterialUI for consistency.

Outcomes & Results

This has been my first UI design project and particularly getting deep with Figma. Some of the particularly exciting innovations I got too dabble with include recent features such as smart-animation, auto-layout and utilizing design libraries.

If this were being made into a production ready app, the next steps would include subjecting the prototype to some user feedback sessions with at least 5 different users. And then preparing hand-off documentation for the developers.

Link to Prototype.