Responses by Adoratorio.

Background: Our project with Yolélé focused on expanding Pentagram’s branding and creating “brand commerce,” a term we use to describe a strongly personalized e-commerce website that provides more than just product listings. Our aim for the navigation was based off of two types of users: newcomers who are discovering Fonio, Yolélé’s main product, for the first time; and returning users, who are already familiar with the product and the website.

For newcomers, the journey we envisioned started from the product itself, presented in a colorful clock wheel on the website’s landing page. For returning users, we wanted them to find strength in the brand commerce with additional resources to purchase, and like recipes and blog posts.

Target audience: With Yolélé, we envisioned three distinct groups of people: people looking for a practical, versatile and highly nutritious solution for their meals; people looking for alternatives to other cereals, namely quinoa; and aspiring or amateur chefs looking for new products to experiment with. With the latter group, we enticed them with the recognizability of chef Pierre Thiam, a cookbook author, well-known chef, friend and host to many other great chefs such as Massimo Bottura, Yolélé’s cofounder.

Larger picture: In conjunction with the website launch, a number of other print and digital communications—particularly an article on the New York Times—as well as more structural actions, such as distributing the product in Whole Foods, took place. The campaign was definitely well received, as the conversion rate for the website’s cart stood at a staggering 60 percent after the first month of release.

Design core: We think the joyful nature of the font we’ve chosen for the project, in line with the brand and logo, conveys an artsy, almost childlike appeal to the website. The central alignment of the elements in most pages—product details, recipes, the about page and others—as well as the sheer dimensions of the titles, subtitles and quotes all play a huge part in the website’s appeal.

Favorite details: The whole project is very dear to us, but if we were to choose a single favorite, we’d choose two! The product showcase on the landing page and the product grid. The parallax effect on the grid and the sheer beauty of the packs in the clock wheel are two things we stop and look at every time we visit the website.

Technology: Given the limited amount of SKUs, we were able to proceed with our usual stack of Vue.js, PixiJS, HTML5 and GSAP to create a completely custom UI. The site’s CMS is a headless WordPress we employ for maximum usability by our partners as well as adaptability to the code, while the e-commerce implementation was achieved by using Shopify’s API for the transactions and to check product availability.