There are two key elements that define Liberté as a brand – but the tricky part is that they’re pretty much the opposite of one another.
Liberté gets its credibility from its heritage, quality, and consistency. But it gets its passionate audience by focusing on newness, discovery, and flavor exploration. So, when it was time for a brand refresh, our challenge was to communicate the ways the brand was embracing what it’s always stood for while also exploring how to become even better. Our brief, then, was to express the idea of how the product is “consistently interesting” – through design, content, and partnerships.
Liberté’s site was the central element of the brand’s refresh. We saw it as an opportunity not only to present the usual elements of a brand’s identity – products and history – but also to communicate how Liberté looks at the world, who they want to partner with, and how they live their values. That meant content, sure, but it also meant changing the site’s look – dramatically.
The original site comprised three main pages:
1) The homepage with a culinary feature, a carousel of Liberté products, and a link to the brand story
2) The product page, which used unnecessary blue gradients that didn't feel tied to the brand and featured very small 3D product renderings
3) The brand story, which focused on the French-Canadian heritage of the brand and was expressed through travel-inspired souvenirs: a French to English dictionary, postcards from Montreal, a miniature Statue of Liberty, paintbrushes, and a looking glass
The overall vibe of the website felt historical – sort of like a time capsule. And while it spoke to where the brand came from, it didn't say much about what they stood for or where they were going.
The design also felt very removed from their recent package redesign, which had moved the brand’s at-shelf presence into much bolder and richer territory. So we set out to make designs that would both integrate the new aesthetic and leverage those elements to tell more compelling stories.
Because the color white is so closely associated with yogurt, it gets used pretty ubiquitously across the category, which meant it was important to us to use white judiciously in order to stay consistently interesting. We drew color inspiration from the new package design by using cream and black as the primary colors so that we could reserve white for use with the logo. On the site, then, white only appears in the header, footer, and menu – even reversed-out typography is in Liberté’s signature cream color.
To highlight Liberté’s bold flavors, we created radiant, full color backgrounds for each product page and focused on telling each hero ingredient’s unique story. For a fresh, graphic take on products, we retired their old 3D renderings in favor of flat designs. Because the category is full of 3D product illustrations, we capitalized on the 2D format of the web and placed flat mockups on black for an even bolder juxtaposition – something that feels distinctly Liberté.
We also repurposed the flavor illustrations from the tops of the packages as hover states and backgrounds. This added some texture and whimsy to the experience that still felt understated, and communicated that Liberté takes prides in the details and makes the most of what’s simple and delicious.
To keep things consistently interesting on the site, we created a system of templates that uses angled breaks to mimic the shape of the accented “é” of the Liberté logo. Instead of the standard horizontal break, these angled breaks took a symbol unique to the brand and made it into a dynamic page element.
In addition to these design elements, we also needed to present content that expressed who the brand was in a way that communicated their stake in being organic, their interest in speaking to people who are into flavor and quality, and the way their heritage informs their outlook on the future.
Like any brand, Liberté wanted to lead with product – so, in order to focus on what makes them unique and present something that feels focused on their audience’s interest in exploring flavors, we pulled their limited edition partnership flavors to the fore. We also highlighted the flavors on their individual pages with descriptions that felt fresh and bold.
From a philosophical perspective, though, what sets Liberté apart is their decision to embrace what inspires their passion, whether it’s popular or not. That idea – that spirit of taking a leap of faith and doing something you know is right – was perhaps their most differentiating asset. In a previous project with them, we’d made videos that featured partnerships with other people and companies who embraced that same leap-of-faith spirit. So, using an editorial approach, we elevated those videos, and accompanying long-form stories, into a way to communicate a creative, compelling understanding of Liberté’s identity.
For example, Liberté’s partnership with Organic Valley to provide organic dairy for their products is something that would often be relegated to a three-click deep afterthought on an About Us page. But, in our treatment, it become a key element of the homepage, with its own dedicated page, as well. And rather than focusing on what Organic Valley does for Liberté, we chose to highlight the brands’ shared ethos of quality, passion, and doing what’s right, no matter the cost.
When a brand refresh is done right, it doesn’t mean just a shift in color or a new font. It means a visual and content-based representation of everything a brand stands for. It means bringing the true identity of a brand to life in a way that’s clear to everyone who touches it – whether it’s at a glance or through deep engagement and interaction.