Forward thinking food, for the web.
Nothing Else team
Dave Brown - Founder
Elaine Rush - Nutrition
Nothing Else Food started at Auckland University of Technology as an up-front brand developing products for a market moving towards sustainable consumption. After several years of development, the vegan Low GI Bar was launched in 2015, containing 8 ingredients, and nothing else.
Originally selling exclusively in AUT cafés, Nothing Else was ready to take their products to the larger market, an important part of which was having an online, commerce-capable presence. That’s where I come in.
Building on the brand
Nothing Else had established a brand identity centred around earth tones and a distinctive circular device which acted as a housing for different types of content. The brand system was working well in print, but when translated to the web felt dated and clunky, particularly for such a forward-thinking company.
My solution was to take the existing colours and brighten them to take advantage of the colour capabilities of screens; I also added supporting colours such as yellow and purple which, when used sparingly, break up the ubiquitous red and provide visual interest.
Explorations for translating existing brand elements to the web.
Locking up large logos
The circular shape of the logo meant that in order for the words to be easily legible it needed to be used at a large size that appeared ungainly. To solve this I created a lockup using the main brand typefaces.
The main challenge on this page, after driving actual purchases, is communicating the existence of other flavours in the same family without drawing attention away from the main CTA. Previous iterations of this design used a toggle mechanism to switch between products, but this solution lacked the ability to show an image of the product, and was too subtle to be noticed easily. So the solution was to display cards with preview images for each of the other products in a family. This was then followed by the full range of Nothing Else products.
I built a hover state to reveal a few additional product images and details. The product's full ingredient list (with percentage contents, allergy warnings etc.) is covered under the fold, but this reinforces the packaging's ingredients list which is quite small at that size
Disclaimer: Manufacturing issues for Nothing Else products have stalled the proper launch of this site, so some functionality is currently disabled.