Client:  Compassion without Border Co-founder Moncho Camblor

Role:  Researched, ideated and created solo project under consultation from a senior designer

Timeline: Dec.2023-Feb.2024 (8 weeks)

Background

Compassion Without Borders (CWOB) is a non-profit organization that aims to improve the lives of animals in need on both sides of the border. CWOB focuses on areas where the need is the greatest, but where animals are unlikely to be helped due to financial, geographic, and cultural barriers. CWOB’s current website was built over 9 years ago with minimal resources.

My role is to conduct initial user research and define key personas and user journey. I created the low- fidelity and hi-fidelity designs and then reiterate my designs through usability tests under consultation from a senior designer.

The Problem

CWOB has been struggling to attract and convert new users to donate to the organization due to current outdated website design and inefficient donation process.

• Optimize the homepage for getting donations while clearly communicating the rescued animal’s stories to increase awareness and build urgency in taking action.

• Improve the website navigation to simplify content consumption

• Optimize the donation process journey so the users understand the importance and impact of their donation

Simplified website’s IA, streamlined the donation process, and included key information on the homepage to convince users to donate money

Current website heuristic analysis

1.Inconsistent color, style, typography , and poor contrast of CTA buttons.

too many CTA buttons that failed to emphasize the primary goal of the organization

Competitors use consistent design elements, clean and informative homepages that showcase the organization’s work and impact

Users are unsure about how CWOB helps animals, where the past donation went, and the impact they made

CWOB’s primary target users are people who care about animal welfare and want to help those in need. I sent out research surveys with 10 open-ended questions to 10 potential users who either adopted animals from shelters or want to adopt animals in the future to find out:

•       Their motivation to donate money to non-profit organizations

•       Things they want to know before and after making a donation

•       Their pain points when they are navigating current CWOB’s website and making a donation

•       Their suggestions of how to improve CWOB’s website  in order to convince them to donate

User research questions

User problems with current CWOB website :

• Users are unsure of different donation options ,how the donation will be used and  where the past donation have gone to

• Users are unsure why they should donate to this organization base on the information on the homepage

• Users are unsure of exactly what this organization does and how it helps the community

• Users are unsure if CWOB is a trustworthy nonprofit compares to other nonprofit organizations

Information architecture redesign

Users feel overwhelmed and confused because there are too much information on the website and unorganized.

I decided to redesign IA in order to reorganize information in a more logical and concise way for the user.I consolidated two different navigation bar to one with drop down menus for the broader categories.

• How might we streamline the donation process on the CWOB website to make it more intuitive and less time consuming for potential donors?

• How might we create an informative and organized homepage to convert potential users to donor?

• How might we help users quickly understand what CWOB is doing and why CWOB does what it does?

• How might we build user trust and set CWOB apart from other non-profit organization?

Design style guideline

The main reason that the potential users don’t trust CWOB is because of their inconsistent and outdated design.

Users think the website looks sketchy and confusing. I wanted to create a consistent typography,UI components and using the same colors as the current logo to build a trustworthy brand identity.

Follow 4 design principles informed by research to guide my design process.

Minimal click depth: Navigation is to be facilitated through the use of breadcrumbs and by keeping page layers minimal.

Images to accompany text: Ensure images accompanied the text and use images that can make people feel sympathetic towards the stray animals and understand how CWOB changes animals’ lives.

Straightforward and convenient path: Donation button is easily spotted on the homepage at different sections , and minimize the number of clicking to complete a donation for the users.

Consistency and minimalist design: Use consistent color and fonts on different pages for an aesthetic design, and only include relevant information thats needed for users to decide whether they want to make a donation .

Once I went through my research data, it was time to sketch out the different pages and the donation flow. I then created the initial low-fidelity wireframe for the first round of usability test to get feedback on the structure of the homepage and the donation flow.

Validating the design

Users prefer more visual content in order to relate, sympathize and understand CWOB better

I conducted 2 rounds of unmoderated usability tests which included a total of 15 people to validate whether the users trust the redesigned website and what other features would be helpful for them to make a decision to donate money. I made many revisions to my first iterations, including the following:

• Users are more likely to donate if he/she is able to feel the emotion toward the organization, especially with the right choice of images—I swapped  pictures of rescued  dogs to a video of rescue process and the pictures of dogs before and after the rescue to show what CWOB does and how they change dog’s life

• Users want to get a general idea of what this organization is doing without spending too much time reading all the text—I swapped 4 different icons to clickable images with titles to show what CWOB does, and included 2 different maps to show the total number of animals CWOB saved in Mexico and California

• Users are looking for an easy donation process with minimal click—I embed the donation process on the homepage to shorten the donation process and minimize the number of clicking to reach the final donation page

• Users want to see a catalogue of dogs that need to be adopted on the homepage—I changed testimonials to latest adoptable dogs to encourage adoption since most people don’t read all the text on the website

Final Design

Results & Reflection

Impact:

The results of the second round user testing shows that all 10 users were able to describe what CWOB is doing to help animals; and 8/10 are willing to donate their money to the organization.

Some quotes from the users

” I will spread the mission of this organization to have an awareness to others that the animals are need to be loved”

“The website looks legit and I like the visuals and pictures of dogs whose stories are featured. It seems user friendly and easy to navigate”

What I learned:

• Understanding user’s needs and motivations are the keys that drive the design direction. The insights that I gained from the usability testing helped me to iterate the design to further improve user’s experience.

• Having testimonials is not enough to gain trust from the users. Designing a website that’s aesthetic, easy to understand, and user friendly are crucial.

Next Step:

• Use card sorting method to simply top navigation, and tress test original IA against new one to validate hypothesis

• A/B test different picture and videos for a better storytelling and getting more empathy from users

• Further research with potential users in CA to gain more in-depth insights

• Conduct usability tests with current CWOB users and donors to reiterate the design

View prototype