Old Homepage
new Homepage
OVERVIEW
Redesign of Best Friends
In this personal project, the goal is to increase the pet adoption rate on the website of Best Friends. I started off conducting user interviews, secondary research, and usability testing to understand how pet shelters work and find out what are the motivation and pain points during people's adoption journey. I also used competitive analysis, journey mapping, user flow, and site map etc. to better redesign a streamlined user journey for this project. Furthermore, I used participatory design session create new features to enhance Best Friend's competitive advantages and drive the adoption rate.
CHALLENGE1
How to build trust with potential adopters for Best Friends?
1. User Interviews & Journey Mapping
I conducted a total of 3 user interviews and performed journey mapping exercises to better understand user's adoption journey, needs, and pain points. For people who are not familiar with the shelter, their most important first step is to find out whether the website and organization are trustworthy before they start exploring pets.
"I want to adopt instead of buy a pet because it is helping the animals and society. Before the adoption, I want to make sure I find an organization that I can trust. " - Eduardo, Interviewee
2. Usability Testing
I conducted a total of 5 usability tests on the current website of Best Friends.
When test participants were asked to find information about what Best Friend is and their impact, only 1 out of 5 participants was able to find the information under 'About us', which is not located within the main navigation bar and hence difficult to notice.
All test participants started off reading the paragraph under the hero image, however, no one read all the text and the paragraph also did not contain the information to help the participants decide if they could trust this website.
Additionally, the 'About us' page is text-heavy and lacks visuals, which decreases the readability for users, leading to a failure to build trust in users.
This lack of trust is problematic because it would potentially drive the users away.
SCREENSHOT OF CURRENT HOMEPAGE
SOLUTION TO CHALLENGE 1
Provide key facts and impact about Best Friends to build trust in users in noticeable areas
In the redesign, I reorganized the information about Best Friends and visually presented it in the most noticeable areas on the homepage. When users land on the page, they can immediately learn about the key facts of Best Friends, including history, impact, and values.
In addition, I also moved the 'About us' to the first item in the navigation bar to help users easily find more information about the organization if they want to.
SCREENSHOT OF NEW HOMEPAGE DESIGN
CHALLENGE2
How to mitigate potential adopter's concerns before they apply for adoption?
1. Usability Testing
After users have built trust with Best Friends, the next step in their journey is to find information relevant to topics such as adoption process, adoption fee, post-adoption support. However, among 5 users that participated in usability studies, 3 out of 5 had difficulties finding the information regarding adoption process on the current website because this information is not easily discoverable to the users (it is distributed throughout the site and is all in text-heavy form, which is hard to interpret). In the usability tests, most participants expected to find information pertaining to processes under 'Adopt' in the navigation bar. However, they could not successfully find the information when they click on it:
2. Affinity Mapping (User Interviews & Secondary Research)
I used an affinity map to summarize the insights I got from user interviews and secondary research, the top 3 most important aspects users are looking for during the 'Remove Uncertainty' process regarding adoption rate are:
● Information to reduce concerns regarding commitment (trial and return policy)
Most users are risk-adverse and think adopting a pet is a huge commitment, and all the interviewees mentioned during the user interviews that having a period of time to get along with the pet, either through shelter visit or a trial period of adoption, is important to them.
● Information about adoption process
All interviewees mentioned understanding how the adoption process works is very important. Information about the adoption process could allow users to know what to expect in each step of their journey.
● Information about post-adoption support
The majority of people do not have experience raising a pet and they will be concerned about their ability to take care of the pets. Therefore, having information about post-adoption support would assuage any doubts that potential adopters might have.
Making all this information come in handy on the website for the users is extremely important as they are critical in user's decision-making process during their adoption journey.
SOLUTION TO CHALLENGE 2
Part A: Grouped all information relevant to adoption in one place and created Adoption 101 to assuage concerns
.gif)
I created a new site map and user flow (see appendix) to better understand how to structure the information on the site to make them more easily and quickly accessible to the users on the website. I organized the information architecture of the website so that it could fit easily with user's journey. Two main actions I took to achieve my goals:
First, I grouped all the information regarding adoption in one place and categorized them into 3 brackets: Adoptable Pets, Adoption 101, and Unique to Us. When users hover their mouse or tap on the 'Adopt' in the navigation bar, they immediately have access to all the resources they need to answer their question and clear their concerns before, during, and even after their adoption journey.
A MORE STRUCTURED INFORMATION ARCHITECTURE IN THE NEW DESIGN
Second, I created a new Adoption 101 page that contains all the information and resources a potential adopter need in their journey with Best Friends, including Adoption Process, Adoption Fee, Foster to Adopt, and Post-adoption support section.
NEW ADOPTION 101 PAGE
SOLUTION TO CHALLENGE 2
Part B: Created a new feature 'Talk to a buddy' to assuage concerns in potential adopters and increase engagement
Potential users might prefer to talk to someone who has previous experience adopting or even taking care of a pet. If they don't have people like that around them, it might be a roadblock in their adoption journey.
Buddies are the volunteers who adopted from Best Friends in the past. Potential adopters can reach out and talk to them to learn more about their experience or ask any questions regarding their pets, the process, and whatever concerns they have during any step in the adoption process with Best Friends.
BUDDY DISCOVERY PAGE
BUDDY DETAIL PAGE
By providing the 'Talk to a buddy program' to users, the website will be able to clear their concerns and increase the chance for them to apply for adoption. In addition, the 'Talk to a buddy program' also provides the opportunity to increase user engagement both before and after adoption, creating a virtuous loop to motivate more potential adopters to adopt from the website in the future.
CHALLENGE3
How to improve pet discoverability, especially for dogs that are less popular?
1. User Interviews & Usability Testing
From user interviews, I learned that the top 3 qualities people are looking for in a pet are:
However, during usability tests, 4 out of 5 users were not able to quickly locate this information they need for the pets. All the information was shoveled into a big chunk of text, which greatly decreased the pet discoverability and user's overall experience on the website.
CURRENT PET DISCOVERY PAGE
CURRENT PET DETAIL PAGE
2. Expert Interview & Literature Reviews
After conducting an expert interview and reviewing online research, I discovered that dogs under 20 pounds have an 99% adoption rate if they are under ten and healthy. This indicates that for smaller and younger dogs, they are almost guaranteed to be re-homed. Therefore, finding a solution to help dogs that are less popular get adopted would be able to increase the overall adoption rate.
SOLUTION TO CHALLENGE 3
Part A: Separate health history and add in characteristic keywords in the pet detail page to increase pet discoverability
In the pet detail page, I added a section that shows a few descriptive keywords about the pet's characteristic to help potential adopters quickly imagine whether they could get along well with them.
In addition, I also separated 'Heath History' as an independent section so readers can quickly find information regarding the pet's health without having any difficulties.
By doing these two things, users can easily read information about the pet's temperament, size, and health that they care the most.
SOLUTION TO CHALLENGE 3
Part B: Add 'Pet of the week' to homepage and show less popular dogs first in the pet discovery page
In the new homepage, I added a 'Pet of the week' section to feature dogs that are older and bigger, which are less popular among adopters according to the expert interview and secondary research insights. By adding this section, those dogs will have more exposure and will be more likely to be adopted.
PET OF THE WEEK FEATURE ON THE NEW HOMEPAGE
Moreover, in the pet discovery page, I prioritized to show the dogs that are less likely to be adopted - more senior, bigger, or have health issues. By prioritizing them, we will allow more people to see them and hence increase the adoptability of elderly and larger sized dogs.
LESS POPULAR DOGS ARE BEING PRIORITIZED IN THE DISCOVERY PAGE
KEY TAKEAWAYS
1. The importance of design documentation
From the outset, I documented all the project goal, research, and key decision-making in files to help me keep everything organized. This is particularly helpful when I'm working with other people. In this case, one of the product designer joined me halfway through the project, by showing my teammate the source of truth, they will be able to catch up and stay on the same page with me, and I do not have to explain my rationale behind some key design decisions before they joined the project. Particularly, design system is very helpful in facilitating the project and keeping the design consistent.
2. The value of understanding the business and its challenges
Understanding the shelter business and its challenges can help us uncover more opportunity to further drive the adoption. For example, I learned that from the business perspective, one of the challenges is that bigger and older pets have low adoptability. Therefore, leveraging this insight to create new feature and give them more exposure could further increase adoption rate.
3. Being scrappy when resources and time are short
In this project, I worked with limited resources and time. When I couldn't find enough participants for in-person usability tests, I conducted the rest using online usability tool to complement in-person tests; when I wanted to validate my design with users and receive honest feedback, I shared the design to the designer community. When time and resources are short, being creative is the solution.
NEXT STEPS
● To create engineer handoff documentation using Figma or Zeplin
● To implement the design and validate decision decisions based on the performance of monitor key metrics such as monthly total number of application, conversion rate (application submitted/total traffic), number of pets applied by popularity(to monitor the adoptability of less popular pets)
● To explore unimplemented ideas such as user reviews, online pet visit, etc.
APPENDIX:
INFORMATION ARCHITECTURE
Site Map
I conducted competitive analysis to find out the best practice to organize information. I created a site map that can maximize user's experience for adoption - information can be easily and quickly accessible to users in an organic way.
INTERACTION DESIGN
User Flow
To better understand user's journey and interaction with Best Friend's website, I created user flow to map out their actions throughout each step of the journey. The following user flow represents a user who is looking for a pet to adopt and he is referred by a friend to the site:
PROTOTYPING
Rapid prototyping to gather initial feedback from the users
Before diving into high-fidelity prototypes, I created low-fidelity wireframes to quickly validate my ideas and concepts with users. The idea of low-fidelity prototypes is to gather honest feedback from users so I can quickly swift direction according to their feedback without worrying about having invested too much resources and time on the design and not willing to abandon my own design.
LOW-FIDELITY WIREFRAMES
INTERACTION DESIGN
Form Design
In usability tests, users found the current application form long and frustrating. They did not know what to expect after they filled out the form. In my new design, I have grouped questions into 4 different categories: Personal Information, Housing Situation, Pet Experience, and Personal Preference. In addition, I also inform users about what would be the next step after they have submitted the application:
CURRENT APPLICATION FORM
NEW APPLICATION FORM
INTERACTION DESIGN
Responsive Design for different devices
Users enter Best Friend's website using different devices. A responsive website can streamline their experience no matter what device they choose to browse the website.
WEB
Width: 1440px
TABLET
Width: 834px
PHONE
Width: 375px
.png)