THE GENTLE BARN (TGB)
Project scope
To build The Gentle Barn’s increase donation rate, and to increase engagement rate of kids-friendly programs.
Problem space
(1) Not structured Information Architecture
(2) Lack of donation transparency
(3) Confusing donation and support navigation
My role : UX/UI Designer
I played a core part in designing the visual system, wireframe, and conducted user interviews. Based on the the research, I created a concept storyboard as a form of Ideation. To understand how users think and behave conceptualize, group on an information architecture, I conducted a tree testing and card sorting and refined sitemap accordingly.
The Impact
(1) Created a new design system for designers and developers to communicate effectively between tech and design requirements.
(2) Tree testing increase 92% success rate with a refined sitemap
Team
Anjali Karthik Rao
Chloe Jang
Flita Fernandes
Kirtika Arora
Outcome
What we did on Homepage
(1) Add a hamburger navigation to simplified top-level navigations
(2) Use Family imagery to provide target user group’s attention
(3) Add a search bar helps users to find a desirable contents
(4) Add mission statement to make a clarification about The Gentle Barn’s purpose
What we did on Mobile version pages
(1) Add a search bar to find desired contents quickly
(2) Users can understand event’s information and reserve it without going through multiple steps
(3) Verified mark and Financial report preserve the trust
(4) Suggesting donation amount are opportunities for users to nudge their amount of donation
Understand
ABOUT THE GENTLE BARN
The Gentle Barn is an American nonprofit 501 animal sanctuary organization located in Santa Clarita, California. The Gentle Barn's mission is to provide sanctuary for abused animals who would not otherwise be able to find homes.
WHY THE GENTLE BARN?
First of all, we worked with The Gentle Barn because its mission is outside of just making money, and it’s wonderful to work for a cause we believe in. Currently, The Gentle Barn’s website is outdated and has become less effective at communicating its services to its target audience. And, the website has not been redesigned since 2013. It's no longer adequate for users and sponsor firm’s needs. Therefore, our team decide to redesign the website. We strongly believe that even basic process changes — like redesigning donation forms or updating animal pages could have great effects.
PROJECT SCOPE & HYPOTHESIS
We used desk research to narrow down redesign scope. We will know the project would be successful if we achieve the following;
1. Increase Donation rate
2. Increase engagement rate of Kids-friendly programs
Research
CURRENT EXPERIENCE
The organization primarily relies on donations and events fund from both individual and corporate sponsors to sustain its operation. However, the current website is outdated. Since the images on the website are low-resolution and inconsistent visual visual hierarchy, it has become less effective at communicating its services to its target audience. Also, the unaccountable donation process can also cause hesitation amongst potential donors. People especially want to make sure that their money is going to something credible that will make an impact and help the cause. Also, the unclear categorization for programs information and reservation process causes hesitation to potential visitors.
COMPETITIVE ANALYSIS
Next, our team analyzed three most popular non-profit animal organizations. Throughout the research, we found out some must-have design elements to find ways The Gentle Barn site can stand apart.
FROM THE RESEARCH WE DEFINED..
Must-avoid elements;
Big amount of text contents
low-resolution imagery
Too many '“Donation” CTA
Must-have elements;
Noticeable “Donation” CTA
Financial report and verified mark inside Donation page
Timely update on real impacts resulting from their donation.
USER GROUP
We hypothesized that the (B) group is a potential-target group because they already know the basic idea of an animal non-profit organizations and are willing to support it. However, they less actively engage with the organizations than A group.
QUALITATIVE USER RESEARCH
Questions We Asked
Please tell me about yourself.
How and when did you decide to make a donation to animal sanctuary organizations?
What information do you look for before making a decision?
What are the things that make you pause make a donation?
How do you find animal event or field trip information? What makes you to participate to the events?
We reached out to five participants who fit the potential user profiles. The research goal is to identify what their motivation is and what barriers exists to making a donation to kid-friendly animal programs.
From the interview, we found these pain-points
-
They were inclined to make greater contributions when they felt the organization is trustworthy. They also expected to see a timely update on real impacts resulting from their donation.
-
-
They’d like to spend time with their kids to stimulate interest and motivation in wildlife. However, they don’t know where to get the information.
KEY TAKEAWAYS
What our team better understood after the research
THE GOAL
How might we guide users easily, donate and involve with TGB’s Kids programs?
CARD SORTING
The current version of the website had up to 15 clickable buttons in the navigation and the header combined, which we narrowed down to seven categories for my participant to sort out the site inventory.
FROM THE CARD SORTING, WE ACHIEVED ..
-
Our card sort result showed a strong correlation for 43 out of 46 cards amongst the participants.
TREE TESTING
Questions we asked
Task 1: Where would you find what's The Gentle Barn does.
Task 2: You want to support The Gentle Barn. Where would you find to support them?
Task 3: You want to find animal materials for kids. Where would you find this?
Task 4: You want to go to weekend Field trips with your kids. Where would you find this?
Task 5: You want to know The Gentle Barn's donation report. Where would you find this?
We set up a tree test using five prompts sent out to the same participants to understand how users think and behave conceptualize, group on the revised information architecture.
TASK RESULTS
FROM THE TREE TESTING, WE ACHIEVED ..
-
As a result, the tasks were completed by participants, 87% ended up at a "Correct” answer and Out of all tasks completed by participants, 76% of answers were chosen without backtracking.
-
We found Task 5; : You want to know The Gentle Barn's donation report. Where would you find this? has the highest direct failure rate (29%). This means users assumed financial report will be in Donate page.
-
We found Task 4; Find Field trips with kids has the highest indirect success (33.3%). This means users assumed Field trip information will be in Blog page.
REFINED INFORMATION ARCHITECTURE
(BEFORE) Based on the card sorting results, we made this IA map:
(AFTER) After tree testing, we made this IA map
PAPER PROTOTYPE AND USABILITY TESTING
We conducted a paper prototype with new wireframes for four participants to find usability errors and determine whether they comprehended the concept of a new page.
Task 1: You find out that your 5 years boy is interested in horses. Were would you find animal materials for your kids?
Task 2: After reading about The gentle barn, the organization seems to positively impact society. So you decide to support them. Where would you find out about how to support them?
FROM THE PROTOTYPE TESTING, WE ACHIEVED
Opportunities
Highlight a default donation amount and add option of inputting a custom amount
Add filter search bar for users to find desired contents quickly.
Add Why Sponsor CTA next by sponsor Animal to help users to understand how the sponsor works.
Pain points
They got stuck when choosing the amount of money to donate on the donation page.
On Our animal page, it took time for them to find horses in California because of overload of portions on the page.
They were confused about the difference between Sponsor animals and Donation.
Design & Iteration
MID-FI WIREFRAME
Based on the testings, we refined mid-fi wireframes for kids page, homepage, donation page, program and animal pages.
Kids page
Homepage, Program, and Donation page
STYLE GUIDE
The current color palette used by The Gentle Barn does not pass the WCAG guideline for color contrast. However, the inconsistent design throughout also adds to the unpleasant experience for their users. Thus, I re-created a style guideline considered accessibility and readability.
Reflection
WHAT I LEARNED & NEXT STEPS
