A fresh digital showcase of a sustainably impactful product

Amsterdam-based digital experience agency Resn created a bold and enticing website, as well as a digital visual identity for Apeel. Apeel is a company that aims to reduce our global food waste problem by making an edible, plant-based coating that can be applied to fresh produce to extend its shelf life. The objective was to create a website that showcases the product in a way that is captivating and inspiring to Apeel's target audiences: retailers and consumers all across the world. Demonstrating how the product works as well as explaining its sustainability impact.

A quick Apeel explanation

Apeel’s proprietary coating is made from materials that are found in the skins and seeds of fruits and vegetables. It is edible, safe and tasteless. When applied to produce, it slows water loss and oxidation, which are the two main causes of spoilage.

What Resn created 

Apeel's identity was initially designed for the offline retail environment only. Resn expanded it for the digital domain. Their digital brand refresh amplified Apeel's existing brand guidelines and brought fresh flavours to the mix. With new photography, colours, illustrations and typography that appeals to consumers and retailers. 

The website shows users the product in action - virtually - by using simple animations that demonstrate the difference in shelf-life between unprotected foods and those protected with Apeel. With simple slide controls, users can see a side-by-side 3D animated comparison that shows how much longer their food lasts when protected with Apeel.

For users, the intuitive structure of the website allows a quick understanding of the Apeel basics before they dive deeper into the content.

For the techies amongst us

The website was built using Nuxt 3/Vue.js as well as Tailwind and GSAP for the animations.

For Apeel’s internal team, Resn developed a robust CMS that lets them easily create new, unique pages fast - with 85+ components and variations. This is all created with Storyblok content blocks, and edits are previewed in real time. 

The CMS was also built to be able to handle different languages in the future.

The Resn Apeel team & process

The team was compact, consisting of 7-8 members ranging from design, motion, development to production. A relatively small team for the size of the project - considering the amount of modules, implementation into CMS, and multiple rounds of QA - pre- and post-content population - to ensure each module looked and functioned correctly.

Since the project's timeline was relatively short, it was essential that the team was flexible. They paid close attention to the UX approach: carefully mapping out the entire experience at first, before defining a design and going to production. 

They ended up with a sitemap, UX, UI and a module list that the client can now use as a reference for all the modules Resn created against the CMS when they take over the site. 

Apeel then approved UI and dev built the modules, followed by piecing the pages together in the CMS. Resulting in this award-winning website with a fresh and bold design - perfectly showcasing and explaining how Apeel works and what its sustainable impact is.

Awards

Everything feels in balance, very good and fresh. Strong design in combination with good movement language.
Jort Boot - Dutch Digital Design curator & creative director Lama Lama

• Awwwards, Developers Award 
• Awwwards, Site of the Day