Scroll Down
The Brief
Seren is a revolutionary side-loading toaster and as such the distributors of the product required a responsive, slick, modern website to promote the product’s innovative design and features. The site must highlight all of the toaster’s unique features as well as illustrating clearly how it out-performs ‘element toasters’ in many different ways.
The Solution
We were provided a clear list of the key features the website needed to focus upon, each of which had a short companion video. Deciding the product speaks a lot for itself, there were but a few major areas we needed to explain, so a one page animated infinite scroller was superb for this project.
The top of these features was the ‘side-loading’ toasting rack, enabling a massive range of products to be toasted – far more than any conventional toaster. As such we wanted to incorporate this primary unique selling point at the top of the page, animating it opening as the user starts scrolling.
These subtle animations became thematic going down the page enhancing the modern feel of the site.
For the ‘Light Intelligent Technology’ section we utilised a nifty trick of ‘page pinning’ allowing us to fix certain parts of the page content whilst others, namely the product controls, would animate through the page scroll, updating at appropriate times.
‘Thermo Regulated Browning’ required us to illustrate, by the clearest possible means, how the Seren toaster consistently browns the perfect toast, round after round. Again we utilised ‘page pinning’ so we could illustrate side-by-side just how this manifests itself. Cheekily, having the results compared to a conventional toaster next to each other really highlights how much better the Seren is!
Another section of the page which took a great amount of thought and planning was the ‘Multi-use Toasting’ section. The client wanted to illustrate how the Seren performs in toasting 46 different types of breads, pastries and frozen products. After much deliberation, we made this an interactive, standalone segment in and of itself, so users simply choose a product from a list or scroll through them in sequence. After all – with so many possibilities, the choice can only be down to the consumer!
As with all good appliances these days, the Seren comes in a variety of colours. Again, we made this interactive, so potential customers can easily see how the different colour options look whilst at the same time providing clear ‘Buy Now’ CTAs for each.
And finally, we spent a long time making sure that all of the creative, interactive UI elements utilised on desktop resolutions performed equally well on mobile and tablet devices. In all, we feel we achieved a truly standout website for a truly standout product!
Toby Feldman
Brand Manager - Tristar Products
I couldn’t be happier with the way the site turned out. Some of the animations and creative use of UI/UX went far beyond my expectations and delivered something which we believe really makes the product stand out in the marketplace.