‘A Waste-less Journey’ is an informational One Pager commissioned by ao.com to bring awareness to food waste. The Singe Page website takes you on an interactive visual journey from the supermarket to the kitchen presenting facts and tips along the way. The animation happens as you scroll with the use of the awesome Skrollr.js plugin. Quite a nice touch when the clock fast forwards while the chicken in the oven:) Cheers for the excellent build notes below, sure our readers will find this helpful. If you’re keen to learn how to achieve a similar effect in your One Page website, check out the Skrollr Workshop we’re promoting.
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.
