Student Work

PawStride Dog Walking App Concept

Image containing phones displaying screens of the PawStride dog walking app concept. Text says: PawStride - Dog Walking App Concept

Dribbble Product Design Course

As part of an exploration further into the design industry, I enrolled in a course offered by Dribbble that focused on UI/UX design (user interface/user experience design), also known as product design. The course was 16 weeks long and was conducted online. The virtual learning format was a combination of independent study through pre-recorded videos and weekly, live sessions with a mentor and classmates. My mentor was Janus Tiu, an experienced product designer working in the industry. The course covered the beginnings of both user interface and user experience design, mainly in the context of mobile applications and websites.

While I had obtained a degree in graphic design prior to this course, I wanted to become more familiar with UI/UX design. Our world is becoming increasingly more reliant on digital technologies, and knowing how to design in this context is key. This knowledge will be also helpful in the future when communicating with various parts of a larger design and marketing team. In addition,  being more attuned to the needs of users, business goals, and accessibility will help me to be a better designer overall, no matter the specific discipline.

Project Details

Our main project was to conceptualize a hypothetical dog walking app that would allow users to schedule a walk for their dog when they are too busy or otherwise unable to do so themselves. Each student was to come up with their own app solution. While a real life scenario would be much more in-depth in terms of research, testing, and development and would most likely involve a team, we were able to get a glimpse of what goes into creating a digital product. We took part in tasks such as market and user research, creating user flow diagrams, wireframing, visual design, and prototyping. We used the program Figma for the visual design and prototyping.

User Research, Goals, and Problems

Making a successful product means satisfying the needs of both users and the business; if you fail to cater to users, it will result in frustration with and even mistrust of your business, thus leading them not to use your product. When coming up with the concept for this product, our class made sure to keep this in mind throughout each stage of development. Just making something visually-appealing or feature-packed does not necessarily equate to a usable or valuable product.

User Research: Conducting Interviews

I used Google Forms to create a written interview, which generally followed the template another student shared with the class. I sent the form to friends and family, and also posted it publicly online. I gained form responses from 11 people between the ages of 24 and 58 (most were in their mid to late 20s). All resided within the United States (primarily Rhode Island, but one was from California). All participants either owned or often helped take care of a dog.

(If you are interested in the structure and all questions present in the interview form, you can
view a screen recording here).

I asked about many things related to their dogs and dog walking, such as behavior, personality, medical conditions, whether or not they’ve thought about using a dog walking app, qualities they look for in a dog walker, and what would make using a dog walking app better for them. Below is some of the most important data I collected from the written interviews:

Have the participants ever considered using a dog walking app? Why or why not?

  • Many of the participants haven’t considered it
  • They would be too worried about a stranger walking their dog and would have a hard time trusting them
  • They do not want strangers in their home
  • Cost
  • Have too much going on in their lives
  • Family already helps with walking the dog
  • Dog acts too wild, hasn’t responded well to training, and is reactive
  • They didn’t know there were dog walking apps

What would make the participants more comfortable using a dog walking app?

  • Knowing the walker’s past experiences with dogs
  • Knowing the walker’s background
  • If there was a rating/qualification system in place for walkers

Features participants would like to see in a dog walking app:

  • Ratings/reviews/recommendations
  • Verifications
  • Biography on a dog walker’s experience with handling dogs/pets
  • Report with the dog walker’s information, similar to a resume
  • Background checks
  • Scheduling system
  • Tracking system that shows where dog walker is going with your dog
  • Being able to connect with others that already use the app
  • Way to pay for services

What would be the most important features for walkers?

  • Robust scheduling system with a clean UI design, easily-customizable time slots of availability, and general ease-of-use
  • Option for dog owners to add their dog’s info so dog walkers can pick and choose based on how hard a dog would be to walk
  • Safety reflector harnesses provided by app

User Research: Constructing a User Persona

A user persona is a fictional portrayal of a target user for your product. Our online class broke out into groups to develop user personas based on our individual user interviews we conducted. My group came up with the following persona to use while developing our app solution.

(Image in this user persona was sourced from Unsplash).

Shanon Guinand

  • Digital Marketing Manager
  • 30 years old
  • Owns one dog

Background

Shanon Guinand is a busy Digital Marketing Manager who loves her dog, Bob. The dog has a special diet and he is prone to running after other animals. Shanon used to walk Bob twice a day. Now, she has to go to the office and she needs someone to walk Bob, since she no longer works remotely.

What Shanon is Looking For

“I want to find compassionate, trustworthy dog walkers that have great backgrounds in caring for pets and knowing how to handle their behaviors or medical conditions.”

Goals and Ambitions

  • Find a trustworthy dog walker that has experience working with dogs that have special needs
  • Would like to know where her dog is at all times

Frustrations

  • Not enough time to walk her dog now that she no longer works remotely
  • She is hesitant to trust strangers
  • Bad past experiences with others taking care of her dog

Solutions Used in the Past

  • Friends and family
  • Kennel/dog boarding
  • Taking the dog to work or on vacation when possible

User Observations I've Had in the Past

From the personal experiences of myself and people that I know, I can attest that apps can be frustrating sometimes for users. Many apps struggle with categorizing and displaying information in easy to understand ways, making performing what should be a simple action discouraging. I wanted my app to be very straightforward for anyone to jump in and use. I’ve also learned that it is important to design with web accessibility in mind for those with disabilities, and I tried to use what information and tools I had at my disposal to make my app compliant in terms of text size and color contrast. I plan on diving deeper into accessibility in the near future.

Business Goals

The ultimate, overarching goal of any business is to gain profit. In this case, that means gaining and retaining users that book dog walks. A portion of each walk’s profit would go to the business, so each walk booked would be critical to this product being a success.

Two other goals that tie into the first are saving money and time; this can be done during the app design and development phase. Creating simple wireframes of design ideas will help narrow down what is working and what isn’t before any time is spent on visual design. Making reusable, editable components (often for elements like buttons) during the UI design phase cuts down the amount of time needed to edit each individual object if stylistic changes are needed. Establishing a standardized design system keeps things consistent throughout the app and also eliminates any guesswork when creating new screens. Creating and testing working prototypes helps to pinpoint what is successful and what isn’t before any resources are spent on the development of the final app.

My Plan to Meet User and Business Goals

Business goals cannot be met without meeting the user goals. The way I determined I’d need to do this is:

Market Research

We got a taste of market research during this project by testing out some popular dog walking apps currently in the market. The two I tested were Rover and Wag! I tested each and wrote down what I thought was great and what needed improvement.

My Analysis of Rover

Rover offers several services: dog walking, boarding, house sitting, drop-in visits, and doggy day care. I tested out the first parts of booking dog walking appointments. You can make a profile for your pet, as well as select the frequency, day, and time for walks. Caregivers near your area are what appear in the search. Caregivers have biography information, background checks, reviews, and what types of services they offer in addition to dog walking. GPS is used to keep track of walks. You can also chat with the caregivers. The Rover Guarantee includes 24/7 support, as well as vet care reimbursement.

I like the simplicity of the app and how quick it was to begin the process. I didn’t have any problems doing the first set of basic tasks. I do wish the opening page (the services page) and overall feel was a bit more friendly and had more imagery relating to pets, but I will say that it is very quick to mentally process and to-the-point.

My Analysis of Wag!

Wag! also provides several services, which include dog walking, drop-ins, overnights, and training. I tested out the beginning of booking a dog walking appointment. You can fill out your pet’s bio and choose from different tiers of walks, as well as choose to be quick matched with a caregiver or choose from ones who have requested your booking. You are asked for your walk schedule, as well as home access information. Caregivers have background checks and you can chat with them. GPS is used to keep track of walks. Wag! provides 24/7 support.

I like that this app has a more friendly feel than Rover and has more pet imagery. I do wish the pet bio section wasn’t nested within the corner menu, however (I preferred Rover’s layout because it was located right at the bottom).

Ideation

After conducting research and defining goals, it was time to move onto creating rough concepts of the app.

The Original User Flow Diagram

Creating user flow diagrams (or maps) are essential for planning what pages will be present in a digital product, knowing how they connect, and for outlining what paths the user will take through them. This is done before any wireframing or visual design takes place.

While my final user flow did change once the app was designed, this was the original one I had come up with for both the onboarding and booking a walk flows:

The original user flow diagram created for the PawStride app, showing how the user would move through the app during onboarding and booking a walk

I used this user flow diagram as an aide during the wireframing process; it helped me to determine how the app would function and the journey the user would be taking. This part of the process also made it so I kept the user and business goals at the core of my focus.

The Original Wireframes

Before spending valuable time on visual design, it’s important to make sure your core idea is solid enough to be a truly effective solution. Wireframes are essentially bare-bones representations of your app or website design. They are general rather than specific, focusing mainly on layout and function; the final text, images, and visual design are usually not inserted at this stage. You can make wireframes using pen and paper, or even digitally, as I did for this project. While I didn’t do it for this class project due to time constraints, real teams will sometimes have users test a working prototype made up of wireframes so that they can get an idea of the project’s reception and what direction to go in.

For these initial concepts, I focused on making the app straightforward in terms of usage and information being readily available. I would later take many of these concepts and refine them, as well as break forms up into multiple pages to prevent the screens from being overwhelming.

Visual Design, Prototype, and User Testing

After my wireframes helped me establish concepts I wanted to move forward with, I started on the visual design of the user interface and making a prototype of the app in Figma.

Visual Design of the User Interface

This app was designed with accessibility, simplicity, and functionality in mind. I wanted the most important info and actions to be easy to read and available at all times from any interior screen, because it can be frustrating not being able to find or access what you need in a timely manner. Making sure there was enough contrast in main elements was one of the most important things when designing this app layout; I used a contrast checker plugin when designing for accessibility purposes.

I wanted to incorporate a paw print within the logo and in the background of the app to give it a playful feel and directly tie into what the app is for. The "Stride" portion of the logo is skewed in order to allude to motion. The complementary, bright color scheme of orange and blue was meant to imbue the app with a sunny, energetic feel; the blue helps tone down the orange so that it is not overpowering to the eyes (but still attention-grabbing), and draws some inspiration from being outdoors under the sky. I chose the font Nunito for the interface and logo due to its rounded style, which contributes to the overall friendly, approachable feel.

Due to time constraints, I didn’t end up including a tracking system, but that is another feature that I believe would be greatly beneficial. Upon revisiting this project months later, I feel that I could have made the logo a bit more imaginative, and that I should have either used less orange throughout the app or adjusted the blue to be somewhat darker, as the saturation and value of the colors I chose compete a bit. I could have even went a different direction with color and instead used greens; it seems to be a common color between Rover and Wag, which makes sense from a color psychology standpoint, as it alludes to nature and can be seen as calming.

Photos were sourced from Pexels and Unsplash. Most icons (besides the paw I created) were sourced from the Bootstrap Icons plugin.

A collection of screens from the PawStride app, as well as the logoA collection of all of the visual styles, colors, and components used in the PawStride app

User Testing and Prototype

In the online class, each student had a group of other students complete a small number of tasks in their dog walking app prototypes and also received instructor feedback. Both students and the instructor told me my design was clear, straightforward, and easy to use, but the bottom buttons on the homescreen needed to be lower in visual hierarchy so as not to overwhelm or confuse the user, putting focus back on the options for dog walking. To do this, I decided to use buttons that were more similar in shape and size to the confirmation buttons present on form pages.

Screenshots of the PawStride homescreen before and after design changes to the two lower buttons

Once the changes were made, I was able to complete a working prototype of the app.

Click the video below to view the working prototype of the app, complete with all of the screens that I designed. This flow shows someone signing up with email, adding their dog, and booking a dog walking appointment.

What I Gained From This Course

This course expanded upon my existing design knowledge by extending it to the digital space, as well as giving me more insight into the goals and mindsets of both consumers and businesses. While there are several things I would change if I redesigned this project, I learned the beginnings of how to provide a positive experience and minimize frustrations or hesitation for users, which in turn helps to satisfy business goals. I’m glad that I decided to take this course, and I believe that it will provide value to me and any design or marketing team I work with.

Learn More About My Designs

Visit Home Page