This mini project came about as I was inspired to test out my Webflow and website interaction skills. After seeing the Simply Chocolate website I wondered if I could create something similar for a different
e-commerce product. As the user journey and experience of the Beavertown website could be much improved I thought it might be a good choice.
Nick Dwyer's amazing hand sketched illustration style is one of the unique selling points for Beavertown. However, the website lacks interaction and feedback for the user, making the user journey more difficult and less intuitive. I wanted to explore how this could potentially be improved.
This Simply Chocolate website won Awwwards.com website of the year in 2017. An e-commerce page that keeps its product front and centre. It has amazing micro-interactions where the chocolate bar is unwrapped and a piece broken off as the page is scrolled. Its very simple colour palette adapts and changes depending on the product showcased.
Working on Figma I created these concepts directly inspired by the Simply Chocolate site. One of the things that I foresaw as an issue was the colour contrast between the product header and the background - something which I later solved with a dark outline stroke on the text. Another problem I had to overcome with this page layout was with some items floating and fixed potentially overlapping others. I got around this by placing the main text content slightly left of centre. Illustrated Beavertown icons were placed around the page to help stay on brand and link back to the products. I introduced fruit around the can to help give the customer an idea of the flavours of the beer.
Initially, with the concepts I created in Figma, I used typefaces similar to the ones used on Simply Chocolate, such as the sans serif 'Kanit' in bold. When it came to making the prototype in Webflow I thought it would be best to stay 'on brand' and to use Beavertown's own typefaces.
An early idea for the product interaction was the beer can rotating and then revealing more of the label in 2D towards the right as the page scrolled down. I dismissed this due to the amount of area on the page this would take up, and the amount of time required to create this for each product offering. Instead, I created an interaction where a pint glass of beer went down as if it was being drunk by the user as they scrolled down the page. This scroll interaction is likely to create joy for the user and therefore keep them on the page longer and hopefully entice them to buy a product.
Next time I create a website like this with floating and fixed elements I will be careful not to use 'absolute positioning' where possible as I found the position of elements can change depending on device and browser - sometimes overlapping other items on the page.
To make the page more suitable for the tablet format I fixed a white box background behind the 'Add to box' and arrows on the bottom of the page. I also moved the text information to the left hand side, centred the Beavertown logo (which disappears on downward scroll) and added a hamburger navigation menu.
To make more space on the mobile format I removed the pint glass, changed the beer can and arrow position to 'static' and made the text information full width.