Bruised Food Club (BFC) is a non-profit organization that fights food waste. They already had a wordpress.com managed by multiple people with different levels of tech skills.

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

I led the end-to-end re-design and development of the website, balancing the organization's requirements and the limitations for their Wordpress.com subscription plan.

The client wanted to have a modern-looking website with information about the organization, what they do (organizing 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 the ability for custom code.

Buying a different theme was also not an option again due to the budget restrictions.

Complete audit of their current website

Made screenshots and mapped all existing pages in Figma

Created new Information architecture

Designed the full website in Figma, defining new layout and structure

Developed the site using the Wordpress.com basic builder with pixel-perfect execution

Created Wordpress components to support future iterations and updates

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

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 - again following the requirements of the client.

I included a section with numbers and used it as a "break" in the content.

The existing website had a blog page and showed 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 markets 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 one 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 for Wordpress sites (it makes updates easier and safer) was also not possible. Therefore, I had to adapt the design so it can be replicated with the drag-n-drop builder 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