Responses by Andrea Meilgaard, product manager; Ryan Strzok, design director; and Josh Kirk, creative technologist, Zero Studios.
Background: Plenaire is a beauty brand that speaks primarily to a younger audience: Gen Z. The core of this brand is to celebrate each individual’s unique skin chemistry, and the products are made specifically for sensitive and delicate skin. The purpose of this site is to communicate the ethos of the brand and convey the feeling of openness and transparency. Since it’s an e-commerce website, the desired result is that customers purchase the product online.
Core features: “Plenaire is about creating pleasurable and healthy skincare rituals, and this is something that we wanted to highlight on the website,” says Meilgaard. “Together we developed the experience of shopping for an occasion, whether it be a celebration or taking a moment to relax and let go of the rest of the world. The photo and copywriting content for the occasion product detail pages have been curated not only to talk about the product but also to tell a story.”
Favorite details: “One of the details we feel proudest of was being able to generate particles when someone scrolls through the site,” says Strzok. “When paired with smooth scrolling, this gives the site a tactile feel that conveys the sense of what the product might feel like when applied. Another aspect of the site that makes us proud is the art direction: we created unique worlds for each of the occasions and lifestyle imagery that felt thoughtful and airy.”
Challenges: “I think the most challenging aspect was for us to get the overall interactive structure right,” says Meilgaard. “The name Plenaire stems from the French en plein air, ‘in the open air,’ which refers to a method of painting outdoors; this aspect of the brand was important for us to carry through into the digital medium. We wanted the website to feel soft with elements that sort of float in the air, leaving a dreamy, calming feeling for the user.”
Technology: Plenaire is built with Shopify for e-commerce management and Prismic for all other content management. Both are connected to the site using a headless structure, and all data is cached on local servers. This amounts to a superflexible, manageable site with low overhead. The front end uses Highway for PJAX page transitions, and all animations were created on GreenSock—plus a healthy dose of custom math.