Rescu is an iOS app that connects potential dog owners with great rescue dogs from around the world. It allows users to adopt dogs from overseas that are in need of a home.

Project Overview

The Kick-off

Project Type:

Timeline:

Roles: 

Tools:

Academic Capstone Project

Jan - Apr 2022 - 8 Weeks

Solo UX Researcher, UX/UI Designer

Figma

From Jan 2022 to Apr 2022, I completed BrainStation's UX Design Bootcamp to obtain the UX Design Diploma. I was tasked with creating a full-fledged digital experience on my own. I utilized the end-to-end UX design process that took me from research and ideation to designing a mobile app interface and complimentary brand development.

Solution

I designed Rescu as a streamlined service for users to adopt rescue dogs from overseas by including features like an assessment of user preferences, a filter for their recommendations, and providing informative dog profiles. I wanted users to feel confident with the information given to them as well as the app process to take that big step in adopting a rescue internationally.

Design Methodology

For this design challenge, I utilized the human-centered design process because my priority is to address real human needs while determining if an idea is financially and technologically feasible.

EMPATHIZE

Problem Space

Secondary Research

Primary Research

DEFINE

Persona

Experience Map

Opportunities

IDEATE

User Stories

Task Flow

PROTOTYPE

Lo-Fi Wireframes

Mid-Fi Wireframes

TEST

Usability Testing

Applying Feedback

REFINE

Visual Identity

Hi-Fi Prototype

Empathize

Problem Space Overview

For many years I followed the plight of animal rights abuses, specifically dogs in foreign countries - where they are held captive in inhumane conditions while awaiting slaughter for their meat. Organizations like Humane Society International (HSI) have been rescuing these animals and closing dog meat farms, however, problems arise when attempting to place them in homes and transporting them. This encouraged me to delve deeper into the problem space of how we can contribute towards the global movement against animal rights abuses via a digital solution.

Deep Dive

I wanted to find the statistics for dogs that are held captive in dog meat farms and eaten. I also wanted to find comparative statistics of dog owners adopting rescue dogs as opposed to shopping from breeders in order show there is evidence of demand and a solution can be ideated to bridge the gap. 

In South Korea, 

2.5 million dogs

while

1 million dogs

are kept in dog meat farms,

are eaten each year.

Credit: USA Today

In China, 

10-20 million dogs

are killed for human consumption each year.

10,000 dogs

are eaten in a 10 day period during the Yulin Dog Meat Festival in June.

Credit: Independent

In the USA, dog owners acquired their dogs through rescues or shelters from 2019 - 2020

acquired their dogs from breeders of that same year.

Credit: The Humane Society of the United States

User Interviews

To further understand the obstacles that lead to the disconnect as to why international dog adoptions are not common, I conducted user interviews over Zoom video web conferencing with Canadian participants, between the age range of 20-30 and have experience owning a dog

I gathered the notes from my interviews and created an affinity map; sorting quotes by pain points, behaviours, and motivations to develop more insight. 

After organizing them, these were the themes and insights that stuck out the most:

DIFFICULT PROCESS

People generally are worried about the difficult adoption process

My interviewees expressed they did not consider adoption, much less international dog adoption because it seemed too much of a hassle.

CONSIDERATIONS BEFORE ADOPTING

People generally want to adopt but they need more information first

Before adopting a dog from overseas, people want all information on the dog, the organization, and the process in order to make an informed choice.

ADDITIONAL BENEFITS

People generally want more benefits if they are deciding to adopt

Because adoption is risky, my interviewees expressed wanting more benefits if they do decide to adopt internationally.

Chosen Theme and Insight:

CONSIDERATIONS BEFORE ADOPTING

People generally want to adopt but they need more information first

I chose to focus on this theme and insight as it is an important user flow to demonstrate when it comes to adopting a rescue dog since it is an understandable stressor for any potential pet owner who is adopting online.

Define

Persona

Using the chosen insight, I developed my primary persona, Anya. I gave Anya the behaviours reflective of my interviewees; being sympathetic to the cause and wanting to adopt if possible.

 

I had her pain points reflect the main concerns from my participants - which was lack of information, whether that be regarding the dog, the process, or the organization itself.

My primary persona is Anya Ivanov, a 27 year old fitness instructor from Vancouver, BC.

Using Anya, I created an experience map to understand her experience for adopting a dog online. By looking through the perspective of the user, I was able to identify moments of opportunity where I could intervene with my digital solution.

Having developed my persona and examined her main pain points, I was able to seek opportunities for intervention through the experience map.

Ideate

Core Epic & User Stories

Before deciding on the task flow that I will design, I needed to brainstorm the functionality and features of my solution. I developed 26 user stories and grouped them into epics and decided on one core epic to ideate my task flow.

My user stories will follow this structure:

“As a [user] I want to [action] so that I [benefit].”

This was my chosen core epic and the user stories it was inspired from:

I ended up using all the user stories because most of them were information the user wanted to receive, they could all be incorporated into my flow as visual information for the user and not all as actions that needed to be performed.

Task Flow

Goal: Navigating from the landing page to successfully choosing a dog and arrive at payment page

Using this task flow as the blueprint, I would begin to start designing my screens by first sketching them out on paper in order to figure out what works for my user flow.

Prototype

Sketches

Once I determined my primary task flow, I used pen on dot grid paper to sketch out possible solutions. I drew UI inspiration from Dribbble and looked at features from similar apps like Petfinder and dating apps, where you are browsing people who match your preferences and their profiles are informative. I started drafting exploratory sketches. Below are solution sketches that were translated to wireframes.

Landing Page

Explore Page

Start of Quiz

Dog Profile Page

Quiz Page 1

Quiz Page 2

Payment Page

With these solution sketches I decided on which components worked from an UX design standpoint. By working with these black and white sketches, it allowed me make instant iterations. Testing the layout of my information and the information hierarchy was also important. This gave me feedback to confidently prototype my design.

Test

Usability Testing

Using wireframes, I conducted 2 rounds of usability tests with 5 different individuals, obtaining practical, real-time feedback that was incorporated to improve the design and deliver an intuitive user experience. The testers were asked to complete six tasks while navigating through the prototype, which helped me observe how real users interacted with the app and see if the app’s functions and features helped the user achieve their goal. The goal of my user flow being to navigate from the landing page to successfully choosing a dog and finally arrive at the payment page. 

None of the testers had any difficulty completing the tasks and making it through the flow. Using a design matrix after each round, I determined which improvements to prioritize. Majority of the user testing feedback was regarding the visual elements and how they could better assist the user. There were questions regarding the concept of the flow - prompting expansion to give potential users more of a resolution and confirmation of the weight of what they had just done - adopting an international rescue dog.

Major Change #1: More detailed dog profile page

Testers liked the easy-to-read quick stats at the top

Testers liked the dog carousel because they would want to swipe through to see more of the dog

As shown, I added a lot more detailed information regarding the dog, and the facility that received it. I addressed Anya's pain points which helps to instill confidence in the user to go through with the adoption.

I rephrased the dog escort info due to confusion from testers and added a delivery date to better reassure users.

Major Change #2: Creating a next steps page

Testers felt going from choosing the dog immediately to payment page was a bit abrupt and did not fully explain the process to the user

On the second round of testing, testers wanted the app to actually direct them exactly to the resources needed so I added a direct link they can click to get a government permit

Major Change #3: Improving the explore page

I added a title for the list so that users would know what they are they are looking at after doing the quiz

Testers had an issue with not being able to see which filter was selected so I made the selected filter evident.

For the header and filter bar at the top, I rearranged the filter icon button for better accessibility, I showed clear active state for which filter was activated, and I added a title for the list that would be shown to users.

For the header and filter bar at the top, I rearranged the filter icon button for better accessibility, I showed clear active state for which filter was activated, and I added a title for the list that would be shown to users.

For the header and filter bar at the top, I rearranged the filter icon button for better accessibility, I showed clear active state for which filter was activated, and I added a title for the list that would be shown to users.

Additional Changes: It is worth noting that after the user testing, I decided to further expand the quiz section where the app finds out the user's preferences for a dog. Additionally based on feedback, I redesigned the dog UI cards that would be displayed on the explore page. I realized there was not enough information as a preview with just name, age, and location. I saw that the users would benefit from more detail before clicking into a dog's profile page.

Refine

High Fidelity Prototype

Utilizing my brand’s visual identity to bring my prototype to high-fidelity was quite challenging. Initially, one of my biggest challenges was making sure the hi-fi injection for my mobile design was following the WCAG Accessibility guidelines when it came to colour ratios and typeface size. After several changes, union was achieved between my high-fi brand identity and accessibility for my users. 

Now that I've presented the high fidelity prototype, let's go over the key features:

Feature #1: Quiz to determine users' preferences

As shown earlier, I found that a key pain point for users would be since this is an international dog adoption, they have to put a lot of trust in the app on the kind of dog they would be receiving. By providing our users with a quiz section before showing suggested dogs, it gives the user confidence that we would only be suggesting rescue dogs that aligned with what they prefer and that we care about their goals.

Feature #2: Filter for recommendations

Following up on the pain point of preferences, users can browse the suggested dogs generated from the quiz. Not only is the user presented with dogs that will align with their needs, they are also given a preview of information from the dog UI cards before they make the decision to see more about a specific dog. 

Feature #3: Detailed dog profile

This feature of providing users with a Dog Profile for any of the listed dogs on the app is absolutely important. Specifically, the amount of information in the profile is what I realized would be crucial in solving one of our persona's biggest pain points which is not knowing enough about the dog or the clinic/organization to make the decision to adopt. Also providing the user with photos they can flip through would help alleviate their concerns.

Branding and UI

Visual Identity

After completing user testing, I brought my grayscale prototype into high-fidelity realization by developing and applying a visual identity to my digital solution.

To establish my product's brand, I generated a list of keywords that encapsulate my brand’s essence and define the identity of the product.

Excited

Energetic

Connecting

Friendly

Sympathy

Kindness

Warm

Cozy

Comfort

I used these keywords to search for inspiration to create the mood board that led to my colour palette development, and choice of typography system. I wanted these components to evoke an energetic, modern, innovative, warm but also trustworthy brand identity.

Primary | Brand Colour

Secondary | Accents

Neutral | Backgrounds, Containers, Input fills

Semantic/Feedback | Error, Success, Information, Warning

Functional | Header text, Paragraph text, Input fills

Accessibility

Accessibility considerations were made to ensure Rescu is accessible to every user based on the WCAG accessibility standards. We used more than one tool to check the contrast for the colours used in our design - especially components with text. We used:
- Stark (Figma plugin)
- WebAim Contrast Checker

Our brand colour orange CTAs with our white text passed WCAG AA due the usage of large text in 18 pt for all our CTA buttons.

The main colours we use throughout our app for our foreground and background passes the WCAG contrast ratio requirements.

Landing page, List of dogs page, Dog profile page, Next Steps page

Dog description box in UI Cards

The text sizes we used also passed WCAG requirements, we used a text size range of 13-24, with only two lines of fine text being size 12.

Primary Typeface

Marketing Website

Designing Rescu's marketing website allowed me to explore responsive web design. My marketing site needed to promote my product through educating and informing the consumer, which leads to establishing trust with them. By promoting the important features and testimonials, it will encourage the undecided consumer to commit.

Rescu for Apple Watch

To develop my design further, I designed how the app would look like on an Apple Watch device. I wanted to explore the user flow based on the post-adoption process. I designed how the user would be tracking the arrival of their adopted rescue dog. They would be able to see daily updates as well as being able to contact the volunteer escort.

Product Strategy

Next Steps

Include Foster and Shelter Users

Although for this case study, I focused on the user flow of choosing a dog to adopt with information given, there is more that can expanded upon with this app. Revisiting the user stories and epics, I could also design user flows for shelters and fosters that want to help with the cause through the app. 

Monetization for Fosters and Escorts

I would like to explore monetization on the app besides the adoption fees. Once we include usage for fosters, individual fosters could sign up and receive payment after receiving the rescue dogs. Also, volunteer escorts responsible for bringing the dogs could end up becoming paid employees that can work flexibly - similar to Uber's system.

Key Business Considerations

A key business consideration is the scale of the product and service provided. Because the idea is global and far reaching, the business logistics have to be considered such as cooperating with rescue organizations, government agencies for doing background checks, and leveraging foreign governments regarding animal export laws. 

Reflection

Key Learnings

Time Management

After the culmination of weeks to develop my capstone, I realized the importance of time management for deliverables when developing a design through the UX process. Although the bootcamp was an accelerated setting, I realized the time set aside for each step of the process was necessary.

Broaden My Scope

I had to revise the direction of my project and what it encompassed because initially I was only focused on Asian countries, which stifled the design concept by having that boundary. After educator feedback I stepped back and looked from a broader perspective to direct my project back on course.