e-commerce website design

Working closely with Donna Yeats from the Marketing Consultancy we were given the challenge of designing and building a functional and aesthetically pleasing website for Bin Inn Taranaki. The brief was to engage their customers and allow them to shop from home. It was also important to include the functionality of filtering by diet preferences such as keto, gluten-free, sugar-free and so much more. As well as providing a wealth of knowledge with recipes, there also needed to be a blog functionality to introduce topics on zero waste, sustainable lifestyles and green families. It was clear that we were not just creating an online store, but a lifestyle product.

 

To achieve a design that fit with Bin Inn Taranaki’s brand ethos (and current logo), while also fitting with the clean and bright aesthetic that has been embraced by many health food store and brands, we chose a muted yet bright green as the main colour. This is complemented by pops of colour throughout the website to achieve a harmonious colour palette. Another design feature we employed are the colourful explosions of fruit and food from the left side of the page giving the screen a magazine feel, these feature on top-level pages. On the product pages, we held back on that feature to allow the colour and interest within the product photos to do the talking.
E comerce layout

Blog Tiles - Special Feature

A stand out function in the Bin Inn website is the ability for the client (Bin Inn) to upload a blog/healthy living post or recipe image and the website automatically selects the main colour for the tile block by calculating the most common colour from the image and heading by selecting the best contrast for that colour.

 

Healthy living

Unique Symbols

With over 1,000 products in the online store, we needed a way to help users find them easily. We tagged the products with dietary preferences and food types, and designed symbols to help users identify products that fit their needs.

 

We designed over 60 unique symbols. Our designer started with 12 ready-made symbols as a base starting pointing and using the visual rules in those created the whole set. Ranging from paleo to gluten-free, sugar-free to no added sugar, SLS free to low fat the list goes on. Can you work out what each symbol means? Check out the Bin Inn website, where each symbol has a descriptor.
Symbols