Johnny B Foods

This website design was for a food science company. Johnny has developed an advanced knowledge of the science of healthy eating and developed formulations that are specially customised to the unique dietary needs of a wide range of people. This website targets companies and individuals who are searching for healthy and beneficial food options and recipes.

The client had an existing website which was difficult to use and read so they reached out to me looking for a simple and effective way to showcase their available recipes & and what they are about. My objective was so design a simple website which represents their brand, showcases their product list and encourages users to fill out an order enquiry form.


Johnny B Food Science


Web Design





Research & Planning

Research conducted on their old site to understand how improvements can be made and how the client's needs and business goals can be met. The old design has no design consistency, it lacks a style that communicates the feel of the brand. It had white text layered on bright and busy images which made it very hard to read. The text is displayed in long paragraphs and in long lists. These kind of design choices make the look & feel boring and uninteresting. The old website also lacked an eye catching modern feel.

Site Map

Expanded and simplified the site's initial structure by using the same content and creating relevant and intuitive user flows. Added in a navigation menu. Added in a CMS based recipes page which will pull information from the CMS collections. Added in a CMS blog page which will lead to the relevant CMS blog template.


Explored two separate ideas. One of them having each recipe category on its own page using CMS and the second having each category displayed as tabs on one page. The second option creates a better user experience as they can simply switch between tabs on one page and more easily type their email and place their order.


Two complimentary typefaces were chosen for both their aesthetic appeal as well as their readability at small scales.

Colour Palette

The colour palette was inspired by yellow/orange tones of crisped bread. Bread being the inspiration as breads are one of the main recipes offered by the company. I then created a colour palette from those colours and tones.


By following the design process and keeping the user in mind I managed to create a simple design for desktop and mobile. The design represents Johnny B Foods and communicates goals while at the same time being easy to use.

Other work

Let's collaborate!
Drop me an email.