Product & ux work

Baton Rouge Food Bank Website

  • Agency: Gatorworks
  • Role: Lead Designer
  • Responsibilities: Wireframes, Accessibility Design, Visual Design, User Experience Design
About The Client

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.

Screenshot of the Baton Rouge Food Bank website homepage in a browser window.

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:

Information map of Food Bank's "Impact" user pathway.
Information map of Food Bank's "Give" user pathway

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.

Wireframes for the homepage and other layout templates for the BR Food Bank website at desktop size.
Screenshots of call-to-action buttons for funds, time, and food in BR Food Bank website navigation

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.”

Graphic showing examples of fonts, colors, and visual styles used for BR Food Bank website


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.

Screenshot of "Our Impact" graphic from BR Food Bank homepage that shows statistics of how they serve the community
Screenshot of an interactive map showing statistics for parishes served by BR Food Bank.

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
Screenshot of the Food Bank homepage at desktop size.
Screenshot of the Food Bank About page at desktop size.
Screenshot of the Food Bank Impact page at desktop size.
Screenshots of the open navigation, Give, and Food Donation pages at mobile size.