Whiskersutah.org Redesign

Project overview

Adopters , fosters and volunteers are people who are taking care of stray animals or pets and some have the goal of involving with only the animal shelters. Providing them a better means of outreach will help them getting more involved and the stray animals/pets will have a new home. One such organization that takes care of stray cats is Whiskersutah.org.

Role: UX researcher, UX/UI Designer, QA Tester
Team of 3
Duration: 6 weeks
Tools used: Miro, Trello, XD , Figma, Gloomaps

About Whiskersutah.org

Whiskers is a 100% volunteer-run non-profit that cares for the well-being of cats, with an emphasis on seniors. Whiskers bring in cats from Davis, Weber, and Salt Lake counties and pair them with people for adoption and foster, as well as host many volunteer-run events. There isn’t a brick-and-mortar center for the organization; instead, all cats are housed with fosters, volunteers, and stakeholders until they are adopted. Whiskers’ focus is on those most at risk due to age, special needs, or medical cases.

The Challenge

The problem we found in our research is that animal lovers find that the Whiskers' website is difficult to navigate also it is text heavy, forms take time to complete, and donation page do not itemize details. Some of the fosters and adopters too expressed their concerns that there is very limited information of the pets available on the website.

The Goal

The goal is to increase the outreach as much as possible and retain the adopters, fosters and volunteers . Whiskers' website plays a vital role as it is not a brick and mortar organization.

The Solution

To achieve the goal we understood that simplifying the Whiskers' website to make it more user friendly by redesigning its information architecture and providing understandable outreach.

Step 1:Research

In order to better understand the users we identified and used the following research methods

  • Surveys
  • User Interviews
  • Competitive analysis
  • Heuristic analysis of the existing website

This project began with identifying survey goals and sending out surveys to better understand current about current adopters and fosters and volunteers those who are involved with Whiskers and also others.

Understanding the user

We understood that most of our participants adopt their pets from animal shelters and they love to adopt/foster pets in the age range of new born-5yrs and monetary funds plays a vital role in making them choose animal shelters over breeders .Whiskersutah.org does support fosters by giving cat food, medicines and baskets and also over the phone support from a VET/nurse. Most of the participants fostered 1-2 pets in the past year and some didn't because of pandemic. These participants fostered pets often before pandemic. Some participants choose only cats over dogs because they are easy to take care and only common illness is cold.

At this point we also understood that Whiskersutah.org does a great job in taking care of aged cats and their program is called Grey Whiskers Program. We now understood that we have to emphasize more on this program when redesigning so as to have a wide outreach for this program and help those abandoned aged cats.

User Interviews

Four participants who are adopters/fosters were interviewed and one of them is also a donor, we also did one stakeholder interview. The participants ranged from being familiar with Whiskersutah.org to being completely involved with Whiskersutah.org. At the beginning of the interview, a usability test of the current Whiskersutah.org was conducted to define users’ motivations and pain points.

The goals for the interview included:

  • Identifying user’s behavior patterns when approaching a non-profit organization's website
  • Identifying a user’s priorities when choosing a pet online
  • Exploring if users have expectations when pet shopping
  • Learning pain points and successes for choosing pets online and completing the procedures respectively for adopting and fostering

The key findings from the interview included:

  • Users choose cats over dogs. Because they are easy to take care and some of them really prefer only male cats . Users have to chose pets in such a way to balance their work-life.
  • Adopters prefer to choose cats based on age, gender, time in shelter and underlying medical conditions. Being an adopter/foster is an all day job and most of the participants interviewed are full time employees and hence they wanted to choose pets with demographics that can be a best fit to balance their everyday routine.
  • Users choose a particular shelter based on how informative and transparent the website is. choosing a shelter to adopt/foster a pet is really time consuming and Whiskersutah.org is not a brick and mortal and their only means of communication is their website .
  • Users expressed their interest of knowing about the support they can receive from their organization after taking the pets home. Many shelters or organizations doesn't mention the kind of support they provide to their fosters. This would be helpful to choose the pet that they can foster.

"We check in with all of our adopters and fosters as well as a follow up to adoption/fostering and remain a resource throughout the process of their adopt/foster and later."
             - A stakeholder

The key findings from the stakeholders' interview included:

To add additional pages for adaptable cats - Being completely volunteer around this requires more people to complete this challenge.
Recruiting more Fosters- Stakeholders would like a page on our website specifically dedicated to Foster’s.
Fundraising is also a huge deal for them because they rely on donations and so we understood that the redesign must emphasize this need to expand their reach.

Affinity mapping

Once we had all the user interview data we completed the affinity mapping and grouped the insights based on their similarities and common properties .

Affinity mapping diagram which is the output after grouping the research insights based on characteristics.

Empathy Map

Once the interviews were completed, an empathy map was produced to find commonalities from the users’ answers. This empathy map shows that interview participants are not particularly fond of the current Whiskerutah.org’s website because of its lack of information and thus inability to choose cats.

Empathy mapping of Whiskers

Persona

Data from user interviews and the empathy map influenced the making of this persona. The persona is looking forward to adopt/foster. This persona feels overwhelmed checking out Whisker's  websites and couldn't come up with a decision.

User Persona of Maggie Pullen

Competitive Analysis

By looking at the strengths and weaknesses, we found our main competitors. We prioritized styles and functions. This showed us strong points, which we later used as inspiration anchors in the ideation stage.

Competitive analysis of other prominent non-profit pet organizations like Humane Society , Best Friends of Utah, etc.

Step 2: Ideate

Based on our user insights, and an understanding of the market, we developed the information architecture. We completed the card sorting activity to understand how users categorize the navigation menu, developed a roadmap to prioritize features and user flows to plan how a user would navigate the app to complete specific tasks.

Feature Prioritization Matrix

How might we include the user needs to increase the user retention? User interviews and market research influenced many of the “must have” features to allow for easy browsing. Navigation with clear language was deemed as an important feature by all user interview participants and also transparent details about cats.

Card Sorting

How might we emphasize the mission and vision of Whiskers to it's future users? As we understood that Grey Whiskers program is also one that the stakeholders want to emphasize more we added it to the main navigation menu to increase it's visibility to the users. We used the current website and pulled out all the interaction elements and menu options and added new options from the feature prioritization matrix to complete the card sorting. We also named the categories accordingly which in turn became our main navigation menu. We also did A/B testing to see if we have got all the existing features were covered in the card sorting.

Card sorting

Site Map

How might we improve the UI of Whiskers? Once we finalized with the menu names and options , we created the site map for the Whiskers website.  

Site map of the redesign

User Flows

How might we make the process easier for the users to adopt/get involved? The feature prioritization matrix, along with user research and Whiskers’ current website influenced this user flow and its navigation. The current navigation on the Whiskers’ site was confusing to users as they could not choose pets or understand what the links meant. This user flow seeks to include clear language and navigation for a user and showcases how a user would choose his/her role and proceed accordingly.

User flow

Step 3: Wireframe

How might we increase the usability of the website? User flows led me to sketches and then to low and mid fidelity wireframes. The wireframes are designed with having the mobile first approach , so that the end product will be responsive across all the devices. We also ensured the copy is as informative and is able to convey the mission of Whiskers. After the lo-fi wireframes we did a user testing for both the mobile and web. The iterations were all done in the mid and hi-fi prototypes. The below image is the mobile lo-fi wireframes.

LO-fi wireframes

Step 4: Test

Once we had established high fidelity wireframes and polished them, it was time to test the app. We was testing to see if the content was easy to navigate to, whether the placement of the content was intuitive and to gauge users’ impression of the branding.

This usability test was completed on high fidelity prototypes for Whiskers’. The screens tested were the homepage, Adoption page, Adoption form, donation page and Grey whiskers program. Five participants who are frequent participants at Whisker’s were tested.

Tasks included in the test were:

Objectives

Results

Success:

Pain points:

Redesign evolution

Redesign screenshotsMore redesign screen shots

Reflections

This project allowed me to understand the market, cultivate balanced interview questions and how to define problems. I was able to focus on issues that were important to the user and create a solution for these concerns. I also began to understand that while research participants share commonalities, they are not a monolith and how to navigate those nuances within research.