Berkeley Food Pantry
Increasing donations and volunteer hours
BACKGROUND
The Berkeley Food Pantry (BFP) is a nonprofit organization located in Berkeley, California, dedicated to alleviating food insecurity among individuals and families in need. BFP is currently facing a lack of support — and are actively seeking more volunteers and donations. However, the current website poses challenges in allowing users to becoming actively involved in the organization.
MY ROLE
UX/UI Designer
PROJECT
Mobile End-End App
TIMEFRAME
Mar 2023 (80 hours)
Overview
DISCOVERING THE PROBLEM
During and post pandemic, I was keen to help my community, particularly those in need. While I grazed the internet to find a local non profit, stumbled across this Berkeley Food Pantry (BFP) and this article:
Berkeley Food pantry was struggling due to a shortage of volunteers and donations. I wanted to understand how I could show up for my community to support in any way possible - so naturally I found myself on their website. However, it was at this point that I identified another set of issues…
THE PROBLEM
The current website makes it extremely difficult to be a part the community, resulting in inefficient support, donations, and volunteers.
Research
HEURISTIC EVALUATION + SITE ANALYSIS
Website audit lead to discovering more problems
As a starting point, I began my research auditing the existing website's user interface and content. I wanted to determine their current areas of focus and how we may improve both business and user needs. I found the overall website was more catered to broad instructions to those in need of food instead of their mission and ways individuals can help. There is a disconnect and lack of information about the issue Berkeley Food Pantry is trying to tackle:
Unclear mission and impact
Limited and unclear ways to volunteer
No clear evidence of Berkeley Food Pantry's impact or how individuals make a difference.
Additional heuristic evaluation revealed several problems with the website’s design:
Problem #1
Lack of accessibility
The website lacks to provide clear and immediate feedback to the user. The navigation pane disappears upon entry to a new page and lacks the contrast against the black background.
Heuristic Violated: lack of visibility of system status + recognition vs recall
“This nav bar keeps disappearing on me, thats pretty annoying, I don’t even know where to look for information”
Problem #2
Lack of high quality content
The website’s homepage lacks the relevant information - a clear mission and its inaccessible design confuses users. The navigation links also reappear within the page which is redundant.
Heuristic Violated: match between system and the real world + aesthetic and minimalistic design
Problem #3
Information overload, no text hierarchy
Walls of text that lack visual breaks, consistent text styles and hierarchy appear intimidating. May discourage readers from engaging with the content.
Heuristic Violated: lack of minimalistic design
“There’s too much going on, my eyes just glazed over the entire page”
Problem #4
Lack of transparency
Users skeptical to donate due to poor transparency and discoverability. Lack of evidence showing how where your donations are being allocated.
Heuristic Violated: match between system and the real world
Problem #5
Application is offline
Inefficient signup process leads to higher drop-off rates and discourages potential volunteers. Registration process lacks clarity
Heuristic Violated: Recognition versus recall
“I’m definitely not signing up if I have to send out an email and wait for their response.”
USER RESEARCH
Key insights from surveys
I distributed a questionnaire to 16 respondents in order to gauge their perceptions regarding food insecurity, food waste, societal concerns, and their attitudes towards supporting a nonprofit organization. I sought to understand their reasons for caring about these issues, their level of involvement, and the factors that motivate them to take action. Some key themes I gathered were:
USER INTERVIEWS
Users felt a lack of credibility and mounts of frustration with the current site
I also conducted 7 user research interviews to uncover a few major pain points. I wanted to understand how users would currently navigate the Berkeley Food Pantry website, their thoughts and whether they would be a supporter of this organization. User research participants consisted of current, past or prospective supporters of food waste/support related non profits. Some key points included: the lack of financial transparency, layout and accessibility issues. Users who initially felt inspired by Berkeley Food Pantry eventually lost their enthusiasm to volunteer once they encountered the application process.
SECONDARY RESEARCH
How do successful non-profits focus on their community?
I conducted a competitive analysis of nationally recognized nonprofit organizations that focused on food waste and food security. I wanted to understand how successful non-profit organizations present themselves to the public in order to attract more supporters. The audit of these websites provided me valuable insights into the implementation of well designed websites and their effective content strategies for non-profits.
Through visiting many different non profit organization’s websites, I noted several key themes.
All parties are important. Content is optimized on the website to show the those in need as well as supporters from all aspects.
Keep the process simple. A clear donation path allows users to quickly donate and keeps them on the right track
Real photos of people. This humanizes the experience, creating a sense of authenticity which is important for gaining trust.
Define
USER PERSONA AND THEIR JOURNEY
Aligning on user needs and their motivations
Drawing insights from user interviews and supplemental research, two distinct proto-personas and their user journey emerged: The Discouraged Activist and The Cautious Giver. I uncovered key emotional moments that the Berkeley Food Pantry needed to address. The anxiety someone may feel when donating to non-profit for the first time or the confusion a volunteer may face when signing up for activities
USER AND BUSINESS GOALS
Identifying the sector between user and business goals
With the understanding of both past and prospective volunteers and of Berkeley Food Pantry’s business goals, I created a diagram of everything that encapsulates both groups. It’s critical to understand the intersection of both goals. This enables me to prioritize which objectives are most critical and allowing me to determine the solutions that will meet both parties' requirements.
Ideate
INFORMATION ARCHITECTURE
Building a framework through improving the website’s navigation
Through surveys, interviews, and card sorting exercises that I conducted, it was revealed that:
Users wanted a single volunteer sign up process that was easy to register and understand.
Advocating for the cause was of lesser importance.
I laid out the sitemap and content structure to allow me to bucket each of the sub categories. Providing users with a clear overview of the site's structure through a comprehensive and clear navigation pane is particularly important for Berkeley Food pantry, which contains a large amount of information, resources, and content. The revision allows users to facilitate quick access to the desired content, improving the overall user experience by reducing frustration and confusion for new supporters.
Design
WIREFRAMING
Redesigning through iterative sketching and wireframing
After organizing my research and solution through the site map, I visualized the page layouts through sketching. Earlier research revealed that the landing page holds significant importance on the website, as it needs to effectively convey Berkeley Food Pantry's mission while offering users straightforward routes to access additional information. I streamlined volunteer sign-up with an online form that shows available days and hours for selection and registration.
VISUAL DESIGN
Creating trust and compassion through UI design
It was critical to convey Berkeley Food Pantry’s integrity, a food waste organization who’s trustworthy, empathetic, and sustainable - allowing supporters to feel confident in supporting this cause. To achieve this, I opted to keep the color green as the primary color with accents of cream. I intentionally avoided using overly distracting or too many colors to ensure that they wouldn't overshadow the cause and the authentic images of individuals who both support and benefit from the Berkeley Food Pantry.
Test
USABILITY TESTING
Conducting usability testing with Hi-Fidelity Screens
I asked participants to think out loud while interacting with the prototype. The main objective of the test was to evaluate how easy and efficient the website is for users to navigate website, sign up for volunteering and learning the impact of donations. Furthermore, I gathered user feedback by having them rate the likelihood of donating and volunteering for this organization on both the current website and the redesigned prototype.
Key findings from usability testing
Although users found the redesign notably more accessible and easier to navigate, I was still able to identify a few areas of concern. I synthesized test results through affinity mapping and organizing these into common themes/categories. I concentrated on the most prevalent usability issues highlighted by participants. As a result, I identified several major areas that needed enhancement:
Users stated that they wanted to view volunteer options more quickly without committing to possibly even volunteering.
Users stated concerns of potentially wanting to choose different times to volunteer on different dates.
Users expressed that the main donation page did not the same information as the ‘donate funds’ page. They were also confused by the pie chart as to what was the goal vs what was still required.
ITERATIONS
Major priority revisions were made
Through the feedback gathered from usability testing and key usability issues discovered through affinity mapping, I selected 4 iterations to implement into the final design. I considered frequency and severity, as well as what would have the biggest impact within the time constraints of the project.
Before
Users found that when they clicked on "View More" and were taken to a new page, it was disruptive and may cause longer load times.
After
Users found that when they clicked on "View More" and were taken to a new page, it was disruptive and may cause longer load times.
Before
1. Users were unsure how they were able to select different volunteer times throughout different days selected.
2. No clear distinction between volunteering activity details and volunteer signup at the bottom of the page. With no reference to the volunteer sign up, user may not see it at the bottom of the page
After
1. Included extra copywriting to assist users in distinguishing between the two distinct sections of the page.
2. Incorporated a clickable word within the details section to direct users to the bottom of the page for the registration process.
Before
1. Users were confused by where the pie-chart started.
2. No reference to the ‘Your Impact’ of monetary donations page. Users would have to redirect and find page manually through navigation bar.
3. Users were not able to comprehend the direct impact of their donation amount.
After
1. A bar graph with target year - intuitive visual aid to quickly communicate the goal to the users.
2. Direct link from donation page to ‘Your Impact’ page.
3. Impact indicator allows users to understand the amount of meals being provided per their donation.
The Final Solution
RESPONSIVE DESIGN & FINAL SCREENS
It was equally crucial for users to have seamless access to all sections of the website via mobile devices. The existing website shows inconsistencies in alignment and spacing, along with problems related to overwhelming blocks of text, as also observed on the desktop version.
Bringing everything together, the final designs are showcased below or view the final prototype here →.
Addendum
CHALLENGES
Selective Design: Not every idea or feature could be incorporated due project and time constraints. Learning when and how to make design decisions and effectively communicating and justifying those choices was a critical skill that I honed throughout.
Design with Empathy: The most important lesson from this project was the need to design with a deep sense of empathy. Understanding the project's mission and the people it aimed to assist was pivotal. It required me to delve into their potential pain points and requirements.
WHAT’S NEXT?
If this were a real-world project I would:
Present my user research findings to stakeholders to determine the priorities for the MVP, and define success metrics.
Measure success after launch by data analytics of volunteer hours, retention, and drop off rates.
NEXT UP ↗