Website Redesign & Development

Richmond Food Bank


The Richmond Food Bank needed me to redesign and develop their old website. My role in the project was to help design & develop a site that helped users easily find what they needed.

See it in action
View Website

Web Designer/Developer


March 2017

Technology Used

Adobe XD, Photoshop, Illustrator & Inkscape
HTML/CSS, JQuery, WordPress, WP Timber

In this case study

    A non-profit organization

    The Richmond Food Bank (RFB) is a local non-profit organization that strives itself to help people that are in need. They provide necessary foods and essentials to over 2200 people each week, but have had countless problems setting up and managing their site; as someone who volunteered at the food bank during high school, I had the opportunity to work with them to show my appreciation for their hard work and dedication in the community.

    The goal of this re-design was to create a site that made resources easily accessible to those looking to or needing help. This involved creating a welcoming environment to encourage users to feel safe and secure in what they are doing.

    Having volunteered at the food bank during high school, I remember having to go through their website to find the information on where to start.

    Project Goals & Objectives

    For this redesign, it was important to establish a clear brand position — something that creates a positive perception by the users on the organization. In the client’s case, a key part of the organization was focused on creating a safe and welcoming community.

    “We’re the major emergency food relief NPO in Richmond and the only food bank in Richmond. We have built up a supportive community around us, and our long-standing presence in the community helps us provide food assistance to Richmond residents in need.”

    Up until this point, the food bank had been using a generic WordPress theme for its own website; it is a great starting point for many businesses to use as it’s fairly cheap and quick to implement. However, one of the disadvantages of using a pre-made theme is that there is a big limitation on customization in order to fit the needs of the company/organization.

    Richmond Food Bank's old website before the redesign.

    In the case of RFB, a lot of the content felt uneccessary, buried behind a sea of sub-menus, and didn’t seem like it was important enough to warrant separate pages.

    The first step was to decide what objectives we wanted to communicate and how we could do that by simplifying the content we already had.

    Layout Design

    At the heart of Richmond Food Bank is the community of helpful citizens trying to help those in need. An obstacle we had was that a lot of the content had to be restricted simply because the old site had existing blog posts and pages that the client wanted to migrate to the redesign. Throughout my discussions with the client, we came to two main ideas we thought was important to demonstrate on the site: How to help and How to get help

    How to help is important since RFB does not receive any government funding whatsoever. Rather, they rely on help from local businesses and communities in order to help other people.

    How to get help is also an important aspect of the website; there are many reasons why people need to get help: having low wages, disabilities, living in poverty… there needed to be a way to encourage users to seek help without being afraid to seek it. The RFB also provides programs such as grocery distributions and deliveries.

    We needed to provide easy overview of who the RFB is and what services they provide.

    For example, on the homepage, there are three sections leading to how you can "volunteer, get help, or donate"; it was important to place these services at the top where it was convient for users.

    Visual Focus

    When it came to engagement, the RFB provided services to the less fortunate which meant they needed to be trustworthy and reliable. I also devised a simple style guide to develop the site on:

    Creating a style guide establishes specific rules for different areas of your work. It helps communicate a consistent message to your audience and acts as a starting point for other designers to create their work on.

    The RFB is a very old organization — in fact, they have been around for almost 3 decades. I wanted to compliment the look of the site with more
    modern, rounded, and large typography with bright colours. Blue was used as the primary colour as it has been the main colour of the organization for many years. Blue also works well since the colour symbolizes trust, loyalty, and security, all of which the organization should encompass. To accompany this, I added yellow as a secondary colour to help create contrast and make important elements stand out.

    The Results

    “Jason did a wonderful job with designing our website. He took into account our programs, services, audiences, and culture to create a website that effectively represents us to our community. Jason took into account our needs and comments to ensure that the website suits us. He even provided a style guide to help us move towards a unified brand. Thank you for your work and dedication!”
    — Alex Nixon, Volunteer Coordinator

    final result
    Other Studies
    Website Redesign & Development

    Richmond Food Bank

    Take a look