Bruised Food Club

Overview

Bruised Food Club is a non-profit that redistributes surplus food via weekly donation-based markets. They needed a refreshed online presence that clearly communicates their mission, engages supporters, and fits within strict technical and budget limitations.

My Role

I redesigned their WordPress.com website, improving the user experience and visual design to better reflect the organization’s values. I continue to manage and maintain the site today - https://bruisedfoodclub.org.

Limitations

They already had a subscription for Wordpress.com and because of the limited budget they didn’t want to upgrade it to have more design options and ability for custom code. Buying a different theme was also not an option again due to the budget restrictions.

The website before

This is how the front page of the website looked like with my notes on it:

Some of the problems:

• The header and the main navigation section took big part of the screen due to the vertical logo
• The social media icon (Instagram) is not aligned with the rest of the navigation links
• The navigation links had some drop-downs leading to too many different pages with overlapping content
• The information was scattered and unclear

And this is the about page:

Some of the problems here:

• The main navigation block is the same as on the home page - takes a lot of visual space because of the vertical logo image
• This page contained links (green buttons) that lead to other pages
• The big image with the timeline that was difficult to update without having the source file and also the file was too heavy and this was reducing the loading speed

What I did

Mapping all pages

First I took screenshots of all existing pages and mapped them in a Figma file including the links between them.

Removing and combining pages

I reviewed all of the content and decided to combine some of the information that was related. For example, instead of having different pages with information about the organisation, the teams and the board members, there could be one page “About us” collecting all of this. This reduced the links and the dropdown in the main navigation.

Figma design (Home page)

I started with the redesign of the Home page following the requirements of the client. I used the same background image but made it cover the whole visual page and added the title and a CTA button there. The next section had information about the weekly markets - following the requirements of the client. I included a section with numbers and used it as a “break” in the content. The client a blog page and used to show the last 3 blog posts right after the hero section. During the redesign I moved that section lower on the page in order to show the weekly market since that was one of the requirements. Another section that I included was how the organisation contributes to the UN sustainability goals. Following is another “break” section with info and CTA leading to the blog where the user can find more information about the action BFC is taking to prevent food waste. And the last on before the footer is a Donation block with a special QR code and information on how to support BFC.

Wordpress design

The subscription Wordpress plan (Wordpress.com, not a separate Wordpress installation) was very limited and doesn’t support custom code, choosing a theme and/or using a child-theme which is highly recommended when using themes (it makes updates easier and safer). Therefore, I had to adapt the design so it can be replicated with the drag-n-drop components available in Wordpress.

Final thoughts

Redesigning without the ability for custom CSS code was challenging for me because for every element I had to make multiple clicks and spend a lot of time on each section. The user experience of the Wordpress builder is not optimised for speed and efficiency which I highly value. The final design is not an exact copy of what I did in Figma because of other technical limitations with Wordpress components and the lack of customization. Personally, I’m happy with the final work and I keep getting positive feedback from BFC members as well as everyone they help.

You can see the result here: https://bruisedfoodclub.org

Rollup

As a non-profit organization BFC often participates in various events and I noticed that they don’t have a lot of marketing materials to promote themselves. I decided to help them by designing a new rollup for them. And after a few weeks of exchanging draft ideas, I made the final design and send it for printing. This is a photo I got when they received it:

And I’m happy to see that they use it for their events: