Responses by Lorenzo Angelone, UI and motion graphic designer; Joris Feitz, UX designer; Roderick Goedhart, business director digital experiences; and Luke Vink, creative technologist, Dentsu Creative Amsterdam.

Background: Sustainable plastics manufacturing company PlasticBean is changing how plastic is made, one bean at a time. Its website functions as a portal that turns the abstract story of recycled plastic into an understandable subject, aiming to reach potential corporate clients who wish to reinvent their production process. The website showcases how plastic beans are the seeds of what can happen next in the story of plastic.

Design core: “One of the most important core features of the website is the 3-D scroll experience on the homepage,” says Lorenzo Angelone. “The visitor immediately sees what PlasticBean does when visiting the site and will be taken by the story of the company and its process. We used the bean shape in the logo by placing images in the beans’ oval shape—when users hover over it, the image will smoothly fill up its frame. We also put the beans inside the button as a microanimation; when interacting with the button, the beans will appear in light blue.

“The site is also characterized by the way it scrolls,” Angelone continues. “The website enables the visitor to seamlessly navigate through the website in vertical and horizontal scrolling. This effect brings even more dimension by masking the texts that go from white to black—even masking in full-width images—to start a new chapter.

“The last important style element to mention is the line style,” Angelone notes. “These lines slowly animate in when you scroll through the page for the first time or open a pop-up. The lines ensure the correct hierarchy and division, giving users a good visual distinction between the different sections and chapters.”

Favorite details: “We are most proud of the scroll interactions within the website,” Angelone says. “This begins with the 3-D scroll animation and is followed by the vertical and horizontal scrolls in which the visitor is taken through the story of PlasticBean. We think the website has a perfect balance between informative and authentic with some surprising elements.

“The second thing we are proud of is that everything from brand positioning and identity to the translation of that brand into this platform that was done by our in-house team,” Angelone adds, “a true end-to-end production by Dentsu Creative Amsterdam.”

Challenges: “We had just a few weeks to come up with a concept and design and develop an MVP landing page for the official launch of PlasticBean in Singapore while working on the overarching company Archwey’s site as well,” says Roderick Goedhart. “This was a completely new brand, so there wasn’t a lot of content ready besides the brand design done by our in-house team. Photos of products that we got delivered weren’t on brand, so we re-created all of them in 3-D.”

Time constraints: “The MVP launch was a success, and the bones were there for the site,” says Goedhart, “so during the launch of the MVP, we kept designing and building in parallel to launch the main site ASAP after that.

“Even though we had a tight deadline, we still like that we brought the blue dot from the other sites for Archwey and Arch & Hook, Archwey’s sustainable materials engineering company, selecting text that turns blue as well,” Goedhart continues. “Small details like these might seem insignificant but bring the site to life. On the other hand, it shows these sites are linked and that we care for small details. Time and budget always affect the final solution; there are still parts of the site that are inactive, which is sad to see but a reality of working with new brands.”

Divergent paths: “If we could change something on the site, perhaps we would create the intro in WebGL and not have it be scroll triggered,” Goedhart explains. “We would have needed more time, though.”

New lessons: “For most of the development team, working with Storyblok as the CMS was something new,” Goedhart says. “I don’t know how we would have built this site without Storyblok and the simplicity it offers to build a super-reactive website, not to mention that the client can change modules on the site live. In our eyes, there is not another CMS out there with this flexibility.”

Navigation structure: “The story of upcycled plastics is one that we are frequently exposed to in our daily lives,” says Joris Feitz. “Therefore, we wanted to create a site that not only informs visitors about this process, but also immerses them into the brand’s mission from the very start. The navigation throughout the site balances a fine line between visually appealing layouts and detailed product information, while our top-level navigation follows the traditional structure of a classic brand website with sections like Brand, Product, News and Contact Us that make it easy for visitors to find the most important pages.”

Special navigation features: “We balance the rest of the pages between easy-to-navigate modules that don’t require extra interaction from users beyond standard scrolling behavior,” Feitz explains, “like the various data sliders and the product carousel or simple popups that preserve and put the focus on detailed product information.”

Technology: “The website was developed in TypeScript and React, using Next.js as our framework of choice,” says Luke Vink. “To make the brand identity stand out, we created custom animations using GSAP and its ScrollTrigger functionality to achieve the homepage’s intro sequence, the various horizontal scrolling components and the custom built effects, such as the masked beans and blobs. The website’s content is managed with Storyblok, a powerful headless CMS that enables authors to edit content with a real-time, completely functional preview of the dynamic website.”