DogCare

Providing relief to dog owners by connecting them with trusted dog walkers to care for their pets

Project Overview

Problem Statement

Dog owners often view their pets as family members, which can make it difficult for them to leave their dogs alone. With many people returning to the office after Covid, 67% of owners feel worried and frustrated about leaving their pets for the entire day.

Scope and Constraints

Completing the project within a tight timeline was the biggest challenge I faced. Given the broad scope of the project, I had to complete it within a period of four months.

Role

  • UX/UI designer

Tools

  • Figma
  • FigJam
  • Adobe Photoshop

The Product

An app that makes it easy for dog owners to find trustworthy dog walkers to care for their furry friends when they're away from home. The app offers a background check for all walkers and sends photos to the owners to ensure their pets are in good hands. With this app, owners can leave their pets with peace of mind knowing they are well taken care of.

Impact of Solution

Participants found it easy to hire a walker using the app

Participants liked UI design

Participants mentioned that an app like this could help them trust walkers for their dogs more easily

100%

Of participants were able to successfully complete all tasks

100%

Of participants enjoyed the new design


Positive feedback from stakeholders

Process

I followed the “Design Thinking” process as a roadmap to make sure that my design decisions were supported by user research and feedback.

Empathize

Secondary Research

To begin this project, I conducted initial research on the duration that dogs can be left alone at home and strategies to reduce their time alone. This enabled me to ask more knowledgeable and insightful questions during my user interviews.

Screener survey

To gather information and select participants for the interview, I developed a screener survey aimed at identifying six individuals who own dogs.

Based on the results of the screener survey, it was found that 50% of the respondents have to leave their dogs alone for over 9 hours, which leads to feelings of sadness and guilt.

Screener survey result (see photo)

Interviews

During the interviews, I observed the users' behavior, which allowed me to adopt their perspective and gain valuable insights.

1

Empathize

2

Define

3

Ideate

4

Prototype

5

Test

Findings:

Most of the users expressed negative emotions about leaving their dogs alone, and shared that their daily schedule revolves around their dogs.

Heuristic Evaluation based on Nielsen Norman Group's principles

I conducted a heuristic evaluation to assess the functionality of other competitors' apps, using three of the Nielsen Norman Group's principles. The evaluation results are presented below:

Heuristic evaluation

The heuristic evaluation helped me gain a clear understanding of the Nielsen Norman Group's principles of "Match between system and the real world," "User control and freedom," and "Help and Documentation," which enabled me to implement them in my design work

Define

Affinity Maps

To analyze and categorize the data gathered from the interviews, I utilized affinity maps to identify common themes and groups. This approach provided me with a deeper understanding of the target users, which ultimately helped me create a persona.

Affinity maps (see photo)

Findings:

The affinity map revealed that participants who owned more than one dog were less concerned about leaving their pets alone compared to those with only one dog. Here are the other results:

67%

Participants had not used any dog walker or similar services due to concerns about the reliability and trustworthiness of the walkers and services.

67%

Participants expressed feelings of frustration and worry about leaving their dogs alone while they were away.

Persona

Using the affinity maps, I developed a persona to represent individuals who experience negative emotions when their dogs are alone. This helped me empathize with my target audience and keep their frustrations and goals in mind during the design process.

Persona

Problem Statement

Using affinity maps and persona, I created “how might we” questions to reframe my insights to provide an accurate description of the challenges I had. It also led me Ideate on the right problems during the next phases of the project.

1

How might we
ensure the safety of the dog while it is alone?

3

How might we
ensure that the owner can have their work outside the home without being worried about the dog?

2

How might we
find a trustworthy services for the dog while the owner is away?

4

How might we
monitor the dog remotely?

Ideate

Brainstorm

To begin the ideation process, I brainstormed a multitude of possible solutions to the problem statements. Next, I utilized Idea Affinity Maps to group similar solutions into themes, followed by Post-it Voting or Dot Voting to identify the most promising solutions according to Jamison's perspective. Finally, I applied the Idea Selection Criteria method to ensure that the selected solutions aligned with the problem statements.

I focused on two of the solutions:

  • An app to hire a dog walker
  • An app to hire a dog sitter.
Brainstorm ideas (see photo)

User Stories

After the brainstorming session, I developed the following user stories:
As a dog owner, I want to hire a dog walker, so that I can feel assured that my dog is doing well when it is alone.
As a dog owner, I want to hire a sitter, so that I can feel assured that my dog is doing well when it is alone.


Creating these user stories helped me focus on the users' needs and goals, which made it easier to develop solutions that would meet their needs.

Based on the user stories, here are four key tasks, or 'red routes,' for my persona:

Sign in/Create an account

Look for a walker/sitter (Book a walker/sitter)

Rate a walker/ sitter

Access to their own profile

Information Architecture

After identifying the key tasks, I created a sitemap to guide the development of user flows. The sitemap helped me maintain a clear understanding of the hierarchy of tasks and screens that needed to be sketched.

Information architecture (see photo)

User Flows

I provided user flows for each of the key tasks. Creating user flows allowed me to keep track of the steps users were going to do in order to accomplish each task.
Here are two of the user flows:

User Flow: Hire a Walker/ Sitter

User Flow: Hire a Walker/ Sitter (see photo)

User Flow: Rate a Walker / Sitter

User Flow: Rate a Walker / Sitter (see photo)

Sketching Red Routes

Before moving onto higher-fidelity designs, I began by creating paper sketches which allowed me to test and validate the concept, as well as make revisions to my initial ideas.

During this process, I addressed a pain point of my persona - their concern about the trustworthiness of walkers/sitters - by including background check screens for these individuals in my initial sketches.

Sketches (see photo)

Moderated Usability Test

Participants:
- 5 dog owners

Utilizing Marvel POP, I designed an interactive prototype and performed guerrilla usability testing on five participants. I created several scenarios that consisted of a set of tasks to evaluate the usability of the prototype.

Findings:

All participants found the user flows to be smooth and straightforward

The participants suggested that it would be beneficial to include an option to "contact the walker" after booking the person

Not all participants understood the purpose of the "filter" button, and some did not even click on it during the testing.

Wireframing

By designing high-fidelity wireframes, I was able to delve into more intricate details and gain a clearer idea of what the final screens would resemble.

After realizing that crucial details such as the number and size of dogs, location, and dates significantly impact the resulting dog walker listings, I removed the filter button and designed a dedicated screen at the beginning to capture this information from the user.

One of the wireframes

Recognizing the dissimilarities in the process of hiring a dog walker versus a dog sitter, I decided to remove the "hire a sitter" flow altogether and simply retained the button. However, I intend to develop those screens in the future should the opportunity arise.

High fidelity wireframes for "hiring a walker" and "rating a walker"

Creating a Brand and Style Guide

Prior to designing the high-fidelity screens, I first created my brand platform and style guide. This allowed me to focus on the user interface elements and overall feeling of the app, making it more trustworthy and appealing to potential users.

While selecting my style guide, I prioritized consistency and accessibility, in addition to aligning with my brand platform.

I made sure that the iconography and imagery are all consistent, all my colors have passed the AAA-rated contrast requirements, and all my fonts and UI elements are in favor of both Apple and Google’s design principles in terms of sizing, so everything is as accessible and inclusive as possible.

Style guide

Prototype

High Fidelity Mockups and Prototyping

To create a realistic representation of the final product, I designed high-fidelity screens with animations and transitions. During this stage, I also conducted an accessibility audit such as contrast check and color blindness to ensure that the app was inclusive and accessible to users with disabilities or functional limitations. These high-fidelity screens enabled me to conduct the next two rounds of user testing more effectively, as participants could interact with the app more realistically and provide more reliable feedback.

Hiring a walker flow
Writing a review flow

User Testing

Moderated Usability Test 1

I conducted a moderated usability test, which allowed me to validate my design decisions and detect any usability issues in the design, giving me the opportunity to address them early on.

Participants:
- 5 dog owners

Findings:

The testing uncovered several areas that needed revision, despite receiving positive feedback on the user flow and UI design.

Here are some of the most significant findings from the user testing, both before and after I revised my design solutions:

Pain Point 1:

  • Not clear what the “Next” button would do.

Design Solution:

  • Changed the first “Next” button to “start” and the second one to “Continue”.

Pain Point 2:

  • Expected to see the length of each walk displayed alongside the price.
  • Sort button was not noticeable.

Design Solution:

  • Added the length of each walk.
  • Move the sort button to a separate row, to improve its visibility.

Pain Point 3:

  • Wanted to click on Roxy’s photo instead of the “Edit My Pet(s) Info” button.

Design Solution:

  • Deleted the pets’ pictures.

Pain Point 4:

  • Confused to see the pet's photos when attempting to write a review for Jamison Lee.

Design Solution:

  • Replaced the pets' photos with the walker’s photo, and made the walker’s name to be bold.

Moderated Usability Test 2

In the second usability test, I validated revisions made from the first test with five new participants and scenarios. While users provided more positive feedback about the design and revisions, a few additional usability issues were identified and subsequently revised.

Participants:
- 5 new dog owners

Below includes the results of the second user testing before and after revising my design solutions:

Pain Point 1:

  • “Done” button was not visible at first glimpse.

Design Solution:

  • Moved the “Cancel” button to the top of the screen to make the "Done" button more visible.

Pain Point 2:

  • Home page appeared more like an input form page rather than a typical home page.

Design Solution:

  • Added one screen to be the home page and another screen to fill their information.

Below includes a summary of the pain points identified during usability test 1 and the success achieved in usability test 2 after revising those pain points:

Final Product

Here are some final screens after usability test:

A couple of final screens
View Figma Prototype

Edge Cases I thought about

  • What if a person wants the service for more than five dogs and need the service.
  • What if a walker desires to write a more extended paragraph instead of a brief sentence for their biography to display on their profile card.
  • What if a person wants to add multiple dogs' information while creating an account.
  • What if a person decides to add or edit pets on the review page, after they have already submitted their request.

Lessons Learned

  • The guerrilla usability tests I conducted through sketches did not yield the expected results, so it was wise to also conduct usability tests using wireframes.
  • Usability testing taught me to be flexible in my design decisions since users may have different perspectives, emphasizing the test's significance.
  • This project taught me various product design tools and techniques, highlighting the importance of learning them and how their results impact one another.

Next Steps

  • If time permitted, I would also create the essential screens and user flows for the "sitter hiring" process.
  • If given more time, I would also incorporate distance information on the map, enhancing the visual experience of the users.
  • If given more time, I would also consider developing a web version of the app to explore additional features, such as hover states.
  • One challenge I faced was finding the right color for the CTA buttons. While I initially wanted them to be white for greater contrast with the primary color, the white input fields made this difficult. I ultimately settled on a darker pink color, but given more time, I would experiment with other colors to find the optimal choice for the CTA buttons.

Case Studies

Back to Top