A Waste-less Journey

We built this piece to raise awareness about the large amount of food that is regularly wasted in the UK and throughout the world. We chose to present it as a visual journey from the supermarket to the kitchen.

The piece features the Skrollr framework to serve a parallax background that provides a clean, simple, and animated background but also maintains the focus on the main journey. We also utilised SVG’s as much as possible to reduce the load of the piece and for scalability on both mobile and tablets. We also used Sass to easily and efficiently maintain the CSS elements within the project.

We had some issues when working with the mobile aspect of the piece. Rather than continue using the portrait orientation as we originally planned, we decided to force landscape orientation on mobile and tablet. By forcing landscape orientation, we were able to show the user the full kitchen scene and the animations that happen within it. This also made it much more user-friendly when taking the CTAs and additional content into consideration.

Another main issue that we faced was that as this originally a vertical scrolling piece that took the user on a horizontal journey, we built a layer of functionality that (on mobile and tablet) allows the user to swipe both horizontally or vertically. We found this helped users who were slightly confused when they were swiping vertically but moving through the piece horizontally. As the skrollr framework doesn’t actually support this, we were pleased with the results.

Overall, we took a number of learnings form the project and we’re happy with the outcome. Our only concerns that we have is that the piece may not perform as well on low-end devices as it does on an iPhone 6 for example. However, when considering the number of animated elements, we’re still proud of what we’ve achieved when used across desktop, tablet, and mobile.