Bruised Food Club is a non-profit organisation who fights food waste. The organisation already had a website based on wordpress.com which I redesigned and manage.

You can see it here: https://bruisedfoodclub.org

Scroll down to see my progress and the limitations of my work.

The client wanted to have a modern-looking website with information about the organisation, what they do (organising weekly food markets) and how to be supported (receiving donations).

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.

This is how the front page of the website looked like:

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

Here is an example of About page:

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 (not sure if this exist)

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

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.

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.

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.

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.

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