Hope for Paws

Website Redesign

Overview

Hope for Paws is a non-profit organization that seeks to rescue and raise awareness for abandoned animals by partnering with local no-kill shelters and utilizing donations for the use of animals.

Our focus was to redesign their website to be simplistic, transparent, and intuitive in order to push users to take the main call to action.

ROLE:
User Experience & Interface Design, User Research

TEAM:
Grace H. Park
Austin Simpkins
Julian Bustos

TOOLS USED:
Adobe XD, Sketch, InVision, Photoshop

DURATION:
2 weeks

Background

“What organization should we choose to redesign?..."

one by one Julian, Austin, and I began chiming in some causes that we found were important ranging from water to sanitation to the Amazon Rainforest. We ended up deciding on Hope for Paws due to our mutual love and interest towards animals. From there, we began our research with a stream of questions.

From exploring their current site, we hypothesized that users don’t have enough sense of urgency to complete the necessary call to action. Our solution was to redesign the site to be simplistic while eliminating potential barriers as well as creating a user flow that encourages sympathy and personal connection to the cause.
Hope for Paws Current Site

Research

To understand the pain points that users experience when landing on a nonprofit website, a thorough interview plan was written out to gain insight on potential donors. We wanted to learn more about interviewees':

1. General experience with non-profits.
2. Motivations to donate.
3. Barriers that would prevent individuals to contribute.

After interviewing 5 individuals, here are some of the main quotes we pulled.

Pulled Interview Quotes

Surveys to 20 participants were sent out to hear more about their experience with nonprofits. When asked “What would motivate you to donate to a non-profit?” the three main motivators were:

1. Transparency
2. Relatable cause
3. A belief that the donation would make a difference.

Key Takeaways

1. Money- One of the main hinderances of donating is a visitor’s reluctance to spend money.

2. Connection- User must feel personally invested in the mission of the organization in order to contribute

3. Transparency- Individuals want to know if actual donation funds are allocated as advertised.

User Persona

With the research gathered, a user persona was created to help guide our design decisions to ensure that the user’s needs were always met. Matthew McKonnel is a 25 year old student studying physical therapy and his goals and pain points helped lay the foundation of our redesign.

User Persona

Competitor Analysis

In order to see where Hope for Paws stood amongst the competition, a thorough competitor analysis was done to analyze the strengths and weaknesses of each competitor.

Hope for Paws Competitor Analysis (1)

From there, we wanted to see where Hope for Paws stood amongst the competition. Although their current site has a simple call to action, their community impact was less than expected. With our redesign, we hope to push Hope for Paws closer to our main competitor, UnderDog Rescue.

Hope for Paws Competitor Analysis (2)

Current Site Analysis

We dove in further to analyze the strengths and weaknesses of Hope for Paw's current site and looked for ways to target users while also fulfilling the needs of the organization. We sought to find a better solution of reorganizing their current navigation to be more intuitive and looked for ways to utilize the current strengths of the site.

SWOT Analysis

Sketching & Wireframe

We began our design process by starting off with low fidelity wireframes. These wireframes were the initial framework of our mobile site and were used during testing.

Low Fidelity Wireframes

Testing

As a group, we focused on building out three main user flows for new and returning visitors. With our initial wireframes, we asked participants to walk through the three given user flows that would be the main changes made to the first revision of the site.

User Flows

Iterations

From the tests, we went back and reiterated the specific confusions that were mentioned. Participants stated:

"If I was a newcomer, I would scroll past this text. It's very overwhelming to read."

For our final revision, we went back and made sure to condense the copy of the “About Us” section to be clear and concise making information about the organization easy to digest.

"This banner is distracting for the checkout process since I have to scroll down."

Participants made it clear that it was a bit hard to concentrate on the focus of donations because of the large banner that hung above the steps. In order for donations to be the main focus of checking out, we eliminated the large banner from the second and third steps during the checkout process.

Visual Design

When deciding on what colors to go with for the redesign, we decided we wanted to have a friendly feel while still displaying a sense of urgency and chose colors to communicate just that. Poppins was a typeface we decided on that seemed consistent with the theme of animals.

Hope for Paws Visual Design

Final Prototype

Final Prototype - Click to interact with prototype

Future Steps

Moving forward, we would like to continue testing our final mobile design to see if any changes need to be made as well as working to fully flesh out the desktop version. We also hope to incorporate actual statistics that Hope for Paws can showcase to potential donators to further enhance the transparency of the organization.

From this project, it brought into perspective the role that we, as UX designers, have of bridging the gap between stakeholders and users. We had to not only think of the users’ wants and needs but the needs of the organization as well.

Thank you.