Sumner Community Food Bank
Redesigned website to enhance usability and responsive design
“We need a website that’s more impactful and easy to navigate so we can better serve our clients and inspire our donors, volunteers, and community.”
Mobile Incompatibility
Lack of responsive design impacts usability for 75% of mobile users.
Heavy Text Design
Text-heavy layout reduces clarity and user engagement.
Lack of Awareness
Fails to inspire contributions to the food bank program.
Usability
Trust &
Engagement
Awareness
To create a user-centered redesign website, I conducted a target user analysis with Food Bank to understand the needs, behaviors, and challenges of key user groups. This ensured the new design is accessible, engaging, and effectively serves the community. Sumner Community Food Bank's four main target users are:
Individuals in Need
People from diverse backgrounds seeking food assistance, requiring clear, accessible resources with language support.
Donors & Supporters
Community members and organizations looking to contribute through monetary donations, food drives, or volunteering.
Volunteers
Individuals interested in offering their time and skills, requiring a simple way to sign up and understand available opportunities.
Community Partners
Local businesses, nonprofits, and government agencies collaborating with the food bank to support its mission.
To better understand how to effectively address the problems, I conducted a current website analysis and competitive analysis, comparing the Sumner Community Food Bank website with other nonprofit food banks. This helped identify key areas for improvement and informed our redesign approach.
From our initial meeting, I gained valuable insights into the reasons behind the redesign and the goals we aim to achieve. Following this, I identified key problems with the current website.
I conducted a competitor analysis focusing on Food Lifeline and Puyallup Food Bank to gather inspiration and identify best practices for our website redesign. This process helped me identify common features and effective design elements across these websites. Immediately, I noticed two key differences:
Clear Visual Hierarchy
Both websites have a clear visual hierarchy that shows the action that the organization wants the user to take on their site. For example, make a donation, to volunteer, or seeking food assistance.
Meanwhile, the Sumner Food Bank’s website lacks a clear hierarchy, making it difficult for users to navigate and locate the information they need.
Clear Hero Image and CTA
Both websites use a large hero image on their homepage, while the Sumner Food Bank uses an image carousel to present its information.
Additionally, according to NNGroup, image carousels are often ignored by users, who may not take the time to read them, leading to important information being overlooked.
After organizing our research and defining the solution, I began exploring potential designs for the website. We went through several rounds of initial iterations, incorporating feedback to ensure the wireframes addressed all necessary elements effectively.
After completing the wireframes, I created a style guide to maintain visual consistency across the entire design.
To evaluate the effectiveness of the redesign, I conducted usability testing with 8 users using Maze. The testing included two task flows and a general prototype evaluation to assess usability, navigation, and overall experience.
Success Rate:
100%
Misclick Rate:
20%
Average Duration:
17.7sec
Success Rate:
100%
Misclick Rate:
37.5%
Average Duration:
52.9sec
One user noted confusion when trying to find the list of accepted food donations in Task 2
“When I was asked to see what types of foods to donate, I headed straight to the donate button, which led me to CharityProud instead of the list of items to donate because that's where my eye was drawn to.”
Users rated their experience an average of 4.5/5, indicating a smooth and intuitive interaction. While overall satisfaction was high, insights from testing highlight areas for further refinement to enhance clarity and usability.
I gained insights into user flow and how attention is distributed across the interface by analyzing heatmap data. This helped me identify areas where users hesitated or overlooked key information, allowing me to refine the design for better clarity and navigation.
To address the issue, I updated the CTA to differentiate between financial and food donations, ensuring a smoother user experience.
I created the final design based on wireframes and a structured design system, and refined it through iterations after user testing to ensure a consistent and user-friendly interface.
I redesigned the layout to improve navigation and highlight key actions like donating and seeking assistance. The image carousel was replaced with a hero image and clear CTAs for better engagement.
I simplified the text-heavy layout by prioritizing key information, using clear headings, and incorporating visuals. This enhances readability, improves user engagement, and makes the content more accessible.
I incorporated Social Proof by featuring real feedback and impact metrics. According to Cialdini's Principle of Influence, seeing others' positive experiences and the measurable impact of their contributions builds trust and encourages more users to engage with the food bank.
I implemented a fully responsive design to enhance usability across all devices. By prioritizing mobile-friendly layouts, the new design ensures a seamless experience for 75% of users accessing the site on mobile.
This redesign challenged me to adapt my UX approach, balancing resource limitations with the need for a fully responsive design. It reinforced my ability to stay flexible, problem-solve effectively, and create impactful user experiences despite constraints.
Adapting to constraints
The food bank didn’t have much time for user interviews, so I relied on other ways to gather insights. I researched competitor websites, used existing data, and followed best practices.
This experience taught me that every project is different, what matters most is the ability to adapt while still achieving effective design outcomes.
Prioritizing mobile usability
With 75% of users on mobile, I focused on optimizing the layout, navigation, and interactions to enhance usability across all devices.
This strengthened my ability to create adaptable designs that maintain functionality and accessibility, regardless of screen size.
To ensure the redesign meets user needs, the next step is to optimize usability and engagement based on post-launch insights.
Analyze post-launch data
After a few months of the website being live, I will gather and analyze user data to evaluate the impact of the redesign. This will help identify any areas for improvement and ensure the site continues to meet user needs effectively.
⭐ ⭐ ⭐ ⭐ ⭐
Rita was matched with my organization on CatchaFire to help us with our website visual redesign for a nonprofit food bank.
Right away I was impressed with not only her knowledge and skills but also her proactive approach to the project. She helped with the handover from the UX designer, asked questions and made sure she understood everything going into the project. The designs themselves were great, and she worked with me in Figma to make sure they were just what we were looking for. She was wonderful with the feedback, making changes and iterating.
This website will have a huge impact on our ability to get our message across, help people find food, and find the volunteers and funds that make this program possible. Rita's work is going to help a lot of people in the future!
Thank you Rita!
Katie Garling
Communications Manager, Sumner Communication Food Bank
