Baton Rouge Food Bank Website
- Agency: Gatorworks
- Role: Lead Designer
- Responsibilities: Wireframes, Accessibility Design, Visual Design, User Experience Design
The Greater Baton Rouge Food Bank has been feeding the hungry in Baton Rouge and its surrounding parishes for 30+ years, providing food and educational outreach by collaborating with community partners.
Project Highlights & Key Learnings
What I Did
With this project, BR Food Bank’s website got a major overhaul. We restructured the navigation to point down two main user paths, and made sure to create ample opportunity for visitors to interact with the organization in their preferred way. The updated visual design makes the website warmer and more welcoming than the previous dark aesthetic, making for a happier experience overall.
The outcome was pretty great. In the first year after launch, the new website design resulted in:
- 75% increase in pageviews
- 59% increase in pages visited per session
- 47.3% drop in bounce rate per session
What I Learned
Storytelling is everything.
BRFB came to us with SO much data and content surrounding their community impact. In our initial meetings and throughout the design process, I came to realize that this information would be a key factor in creating the inviting, positive experience of interacting with this website by. This drove my decision to design the homepage in a way that would emphasize these numbers.
The Problem
BR Food Bank's previous website served a purely functional purpose: it provided basic information on how to give and receive donations, but that was about it. The design was mostly gray with little color and didn't project a lot of personality.
In our initial meetings, the client emphasized that they wanted the new website to be inviting and driven by storytelling, to allow the user to feel more connected to their mission of helping the hungry in the greater Baton Rouge area.
Project Goals
Create a new website that would encapsulate their mission and impact while also allowing them to grow by acting as a central hub of information on how to get involved.
Incorporate spaces to showcase personal stories of hunger and data-driven content, inspiring people to give—whether that be through funds, food, or their time.
Develop a visual style that would bring more life to the content through color and plenty of opportunities to use vibrant photography and video assets.
Information Architecture & Wireframes
We established early on that there were two main pathways we wanted to direct site users down. Path one: learn more about BR Food Bank, their impact, and their many programs/initiatives. Path two: give to the food bank through money, volunteer time, or food donations. We broke those down further into distinct pathways that would guide users through impact-related content and ways to give:
From there, I produced wireframes for the main templates of the site, balancing the priorities of “impact” and “give.” Multiple types of flexible content buckets are included on the homepage and everywhere else, giving ample opportunity to share personal stories from the community and promote events and initiatives. The full site is comprised of modular components so that new pages for programs and services can easily be built by the internal team.
Calls-to-action for the three main ways to give—“funds,” “time,” and “food”—are present in key spaces, such as the homepage and in a page tile that can be used anywhere. Most importantly, they are prominent in the navigation on all screen sizes and can therefore be accessed without needing to search high-and-low.
Visual Design
Because we’re dealing with the heavy topic of food insecurity, I wanted to project a friendly, welcoming vibe to further position BR Food Bank as a go-to resource for those in need. Keeping the brand’s red as a main color, I added dark blue and a creamy off-white to create a bold, basic aesthetic. A mix of colorful stock photography and vibrant photos provided by Food Bank brings additional life to the site.
Headlines and body copy are set in Chivo, a neo-grotesque sans-serif that effortlessly straddles the line between “official” and “approachable.”
Storytelling
Food Bank wanted to communicate their impact through distinct types of information on the site: pure numbers data and a visual example of their geological reach. I included two areas on the homepage to accomplish this—a block with animated numbers that displays their impressive statistics, and an interactive map that highlights which Louisiana parishes they serve and a tooltip with stats for each parish that appears on click.
Food Bank came to us with tons of B-roll and drone footage that shows off the behind-the-scenes of their organization and events. To take advantage of this and bring in a splash of personality, I gave them the option to use video backgrounds in the headers of key pages.
Final Designs & Results
The final design breathes life into the Baton Rouge Food Bank’s content with more color and opportunities to tell the story of their impact on the community. Users are able to easily take action via the “Give” bar in the navigation, and now also have the opportunity to get more familiar with BRFB’s team and mission.
The new design turned out to be a hit with users. In the first year after launch, the updated BRFB website saw:
- A 75% increase in pageviews
- A 59% increase in pages visited per session
- A 47.3% drop in bounce rate per session
