TEAM
TIME
6 Weeks,
Nov - Dec 2021
DELIVERABLES
Affinity Diagram,
Customer Journey Map,
Wireframes,
User Testing,
Responsive Prototype
I was an Interaction Designer and UX Researcher for this project. I conducted user interviews and generated research insights. I led the design process for the onboarding feature from ideation to the final prototype. I also took on roles to design the landing page and the interactions for AR livestreams from mid-fi to hi-fi.
Project Background
In the age of COVID, pet adopters are seeking safer and remote ways to meet their future best friends. The online search process is usually long and tedious; adopters often don't hear back from shelters and it's hard to know if a pet is right for them just from a few photos and a short description. As a design studio project, our team was tasked to create a responsive platform that enables adopters to find pets with ease and convenience.
Pet Connecter is an online pet adoption platform that lets you swipe through pet matches from your local area. Users can input their preferences for their ideal pet and get a number of recommendations. The platform also provides a way for users to meet the pets virtually by providing livestreams of pets residing at shelters.
We began with some exploratory qualitative research into this problem space. We wanted to understand people's emotions and individual experiences with pet adoption.
GOALS
Understand people’s motivation to adopt
Investigate the different stages of the adoption process
Identify existing pain points people experience in the adopting process
Learn how people experience personal connections with pets
METHODS
Directed Storytelling
Semi-Structured Interview
TARGET USERS
College Students
Young Working Professionals
INTERVIEW PARTICIPANTS
We interviewed the participants and took notes. We then compiled our notes and listed our findings on sticky notes for affinity diagramming. We were able to group similar findings together and categorize them into larger problem scopes, which helped us see existing concerns in the entire adoption process.
After reviewing our affinity diagram, we noted some of the major findings we gathered about this new problem space.
The final adoption decision is tightly associated with one’s emotional connection with the animal, rather than a rational weighing of pros and cons.
There is insufficient communication and coordination between the different stakeholders in the pet adoption process.
People build stronger connections to shelters that convey a feeling of trust, as well as happiness and positiveness.
There is a lack of guidance in the transition process of preparing and starting to build connections with the pet.
Circling back to our interview notes, we made one journey map for each interviewee to visualize their individual experience and the pain points along the way. This led to a combined journey map which divided the entire flow into five main segments:
Seeing the pain points from our journey map and our affinity diagram insights, we decided to focus on the phases: Searching, Visiting, and Post-adoption. These phases seem to be most emotionally involved for the target user. We brainstormed features that would encapsulate the phases we selected and drew out a site map for our potential solution.
After we decided the main flow and overall structure of the website, we divided the experience into four major sections based on the updated user journey: Survey – Matching – Applying – Post-Adoption. Each member took on one part of the process and created a set of wireframes. Below are the wireframes I created for the Survey portion and saving to favorites during the Matching stage.
The main stages of the experience translated into these following features:
Onboarding pet preferences survey
Swiping for personalized pet matches
Completing the pet adoption application
Browsing for shelters
Watching shelter broadcasted pet livestreams
Logging post-adoption check-ins under pet profile
We then created paper prototypes based on our wireframe sketches to simulate the on-screen interactions. The prototypes then are used for think aloud user testing. Below is the paper prototype for the adoption application process.
During testing sessions, we presented the different paper prototype flows to participants and asked them to “think out loud” as they interacted with each screen. We wanted to understand these main questions:
Whether the overall flow makes sense
Out of the current flows, where are some areas of innovation that we should pivot to
For the matching process: what are people’s preferences on the default view (card vs grid) on different devices
We compiled our recorded interview notes and found the following insights:
Participants were most interested in the match swiping and the shelter livestreams features.
Some participants were confused about the purpose of a pet profile and whether it was a publicly visible feature or only for the adopters themselves.
Many participants preferred the onboarding survey to remain short and simple, because a long questionnaire might deter people from signing up in the first place.
After reviewing the feedback from user testing, we decided to cut down our project scope to better focus on the searching and matching stage of the pet adoption process. These stages seemed to appeal to users the most and address the emotional needs we identified from before.
Onboarding pet preferences survey
Swiping for personalized pet matches
Completing the pet adoption application
Browsing for shelters
Watching shelter broadcasted pet livestreams
Logging post-adoption check-ins under pet profile
Before we dived into the mid-fidelity prototype, we developed a design style guide. We focused on creating a clean, modern style as most pet adoption websites have an outdated visual style and user interface. We decided to use warm colors to convey a friendly and trustworthy tone. We also included components and illustrations with round edges to showcase the overall experience as fun and playful.
Getting Started
The home page has a call to action button at the top to prompt first time users to get started with the pet matching process. Users can also immediately see nearby pets and shelters, as well as a selection of featured pet livestreams.
Getting Started
First time users are prompted to answer a short survey to figure out their preferences, such as the age and size of the pet as well as ideal personality traits. The user can then create an account to begin viewing their matches.
Pet Matches
After the user fills out their preferences, they can start browsing their recommended pet matches in a card view or grid view. The card view allows for a more up close experience of viewing each pet, similar to swiping through matches on dating apps. The grid view gives a faster overview of all the available matches.
Pet Matches
The user can expand and view a pet's profile. The profile has information like breed, shelter, personality traits, health history and the requirements for adoption. The user can favorite a pet, or contact the shelter about the pet. Once they make a decision, they can begin the adoption process from the pet profile.
Shelters
Users can also look up shelters and see information such as the adoptable animals, time availability and address. On the top of the page, there is a gallery to feature media from the shelter. If the shelter hosts livestreams, the user can go watch the livestream by clicking on it in the gallery. They can also view the shelter rating as reviewed by past adopters to see if the shelter is trustworthy.
In class, we were paired with several other student teams and demonstrated a walkthrough of our mid-fi prototype. Here are some of the main takeaways from the critique:
Push for shelter livestreams to be the hero feature because it is innovative and addresses concerns of the ongoing pandemic.
The pet matching screens need more interactive controls on the desktop view as well as more expanded displays of media and text.
Better utilize the screen real estate when translating to the desktop view, allow more information to be displayed without having the user to scroll.
Our high fidelity prototype is our final design iteration. We focused on refining our mid-fi screens, prompting better user engagement by adding motion and microinteractions.
Pet Matches
In our desktop view, we utilized the extra space better by providing more contextual information. We also included clearer controls to allow the user to navigate through the pet profile gallery. We added microinteractions such as a popup suggesting the user can swipe through matches on the mobile view, as well as animations showcasing the swiping motion.
Pet Matches
Pet Profile
We added a gallery to display videos and photos for each pet profile. On the desktop view, we added a card to highlight the shelter information so users don't have to search for it.
Shelters
Shelter Livestreams
The livestream feature uses augmented reality to showcase which animals are currently starring the show. Users can leave comments on the livestream page and change between camera views if there are multiple cameras.
