The Gentle Barn

UX Design

ROLE
UX Designer & Researcher,
Visual Designer
TEAM
Jason Gong
PROJECT DURATION
January - May 2022

Redesigning The Gentle Barn's website from the ground up to attract new donors and streamline the user experience.

The Gentle Barn is a non-profit organization that focuses on rescuing animals, giving them sanctuary, and welcoming visitors to connect with nature. The organization primarily relies on donations from both individual and corporate sponsors to sustain its operation. However, the current website is outdated and has become less effective at communicating its services to its target audience.

01 — Empathize

Interviews

I reached out to participants who are already familiar with non-profit organizations and have made donations in the past. All of my participants are working adults aged 33 - 58 who are married, have school-aged and adolescent children with more than $80,000 household income annually, located in different parts of the US. This user group is an important indicator for the design of Gentle Barn's website because having financial stability is almost always a prerequisite for making a significant amount of donation. At the same time, being a parent also means that they could provide me with insights into children's relationships with charities.

02 — Define

Key Insights

Data collected from the interviews are organized into an affinity diagram and then synthesized into three key findings.

1. Users have strong preference for quality introductory videos and images.
Visitors of NPO's websites tend to react toward imagery that evokes strong emotional responses. Videos and images should provide them a glance into why they should contribute and who are the beneficiaries of their money. However, they shouldn't be feeling
guilt-tripped into donating. Instead, the images should acknowledge their inner parental instinct, the desire to help those in need and be a role model for their children.

2. Returning donors appreciate the transparency and timely updates.
Donors are inclined to make more contributions when they feel that the organization is trustworthy by being transparent about the whole process. They also expect to see a timely update on real impacts resulting from their donation.

3. Targeting specific groups to give a personal touch can increase engagement.
My participants are actively involved in their local community's online groups, such as local parenting, hobbies, and religious groups. Some even enjoy being the leading voice of their local community. They also contribute to some charities through their employer, colleagues, and professional organizations.

03 — Define

Persona

Julia Hodge, the persona I created from aggregated interview data, helps keep the user goals at the front and center of the project.

04 — Ideate

User Journey Map

During the interview phase, I made sure to ask my participants to walk me through their thought processes which helped inform the journey map for my persona. From this map, I was able to highlight areas where I could improve the experience of interacting with charity websites. Noticeably, potential donors like Julia might be overwhelmed with options and have a problem convincing their friends to contribute. The insight I learned here is that I should design the experience to reflect The Gentle Barn's unique brand positioning and prioritize the organization's transparency to build trust and gain committed followers.

05 — Ideate

Competitive Audit

The competitive audit was conducted with a selection of similar organizations focusing on the effectiveness of navigation, overall appearance, and mobile-friendliness of the website. To my surprise, most animal sanctuaries' websites are hard to use, visually unappealing, and poorly designed for different screen sizes. The only decent website with interesting UI patterns was made for Farm Sanctuary. In addition to the use of attractive imagery throughout the site, they were able to properly show visual hierarchy and follow the Gestalt Principles such as Similarity, Proximity, and Closure.

06 — Ideate

Card Sorting and Tree Testing

The closed card sort included 56 cards sent out to 11 participants. The current version of the website had up to 15 clickable buttons in the navigation and the header combined, which I narrowed down to nine categories for my participant to sort out the site inventory. My card sort result showed a strong correlation for 49 out of 56 cards amongst the participants.

To identify major problems with the navigation, I set up a tree test using five prompts sent out to 11 participants. On average, only 2 or 3 out of 11 participants could finish the tasks without any difficulty, and often, there would be one person who would go straight to FAQs.

"The meaning of each label all made sense to me, but I believe some cards could qualify for multiple categories."
07 — Ideate

Information Architecture

The new information architecture introduces simplified top-level navigation and rearrangement of ambiguous items such as "Financial Statements" and "Partnership" to ensure more efficient ways to complete tasks.

08 — Ideate

User Flow

Several key user flows are defined for user-testing and proof of concept, including tasks that benefit from simplicity in contrast to other tasks that might work better with more flexibility.

09 — Prototype

Paper Prototype

After revising information architecture, I have developed two low-fidelity paper prototypes for the usability study — one for desktops and one for mobile devices. The new design focuses on encouraging users to browse sequentially instead of taking the time to go through all available dropdowns. I believe this approach should reduce the cognitive load on the user while exposing users to content that otherwise might have been missed by going directly from the homepage to the desired goal.

10 — Test

Usability Studies

I conducted usability studies using two extensive prompts with three participants. The key findings are as follows:

INSIGHTS
RECOMMENDATIONS
"Sometimes more is more. Other people like me might want to see more on the page. Depending on what I'm looking for, I might want to try different things for myself, and I think that is a positive thing."
11 — Prototype

Low Fidelity Wireframe

Based on my first round of user testing insights, I began to tackle navigation issues with earlier design by redesigning the navigation bar to have a good balance between option and simplicity. During this phase, I was able to test early prototypes for responsive design. Since the core user experience for The Gentle Barn happens when the user is at home in front of their desktop computer, I started by designing for the desktop first, then progressed towards smaller devices.

12 — Prototype

Visual Design

The current color palette used by The Gentle Barn does not pass the WCAG guideline for color contrast. The inconsistent design throughout also adds to the unpleasant experience for their users. Thinking back to my persona, I started with a new set of colors and typefaces that better reflect their needs and personality. Instead of Arial's corporate feeling, I opt for fonts like Lora and Karla that are more playful and forgiving. I took a step further with the logo and used Londrina Solid to emphasize that The Gentle Barn is not about perfection but more of a space that welcomes all kinds of people. The logomark depicts a pathway toward the barn that felt inviting and inclusive.

13 — Prototype

High Fidelity Prototype

This hi-fi prototype was created for further usability studies while addressing previous problems. It includes dropdown menus, a functioning search filter, button hover interactions, actual edited content, and a newly added checkout flow.

14 — Prototype

Design System

To create a consistent visual language for The Gentle Barn's website, I came up with a new design system from the ground up. The designs were made in Figma and formatted with functioning component variants ready to share with the rest of the design team.

15 — Prototype

Responsive Design

Each component of the website are designed to feel consistent across any device by maintaining the same visual hierarchy while keeping in mind how elements could shift in response to various screen sizes.

Takeaways

While I could solve major issues in the original website with my redesign, I believe there are still more works that could be done through follow-up usability studies. I learned that I could address my users' concerns regarding organization transparency with thoughtful navigation and clear presentation of information. While non-profit organizations are conventionally serious institutions and do not immediately remind me of fun but in this case, I learned that sprinkling some delight on top of the core experience is a much-needed transformation.

arrow_upward

Similar Projects