Web App, Personal Project

Foodfilld

Summary

Foodfilld is a personal project and joint collaboration between friends to create a food blog detailing our search for the best foods around the Lower Mainland.

See it in action
View App
Role

Web Designer/Developer

Started

In Progress

Technology Used

Adobe XD, Photoshop, Illustrator & Inkscape
HTML/CSS, Vue.js, WordPress RESTf API

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.

    With this in mind, 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.


    Design Solutions

    Throughout my discussions with the client, we came to two main ideas we wanted to demonstrate on the website: 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. That being said, we can break this down into two subcategories: volunteering and donating.

    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.

    Visual Focus

    When it comes to engagement, people must be able to trust the reliability of what RFB is able to provide. I began by devising 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. To accompany this, I added yellow as a secondary colour to help create contrast and make important elements stand out.

    Acknowledging the audience

    At the heart of Richmond Food Bank is the community of helpful citizens trying to help those in need.

    Since the homepage is the starting point for many users, we needed to demonstrate a quick overview of who the RFB was, and what services they provided.


    Finishing the website

    For the visual design, I triedsdsa s

    http://www.richmondfoodbank.org

    final result
    Other Projects
    Web Development

    Chinatown Society Heritage Building

    Take a look