One Design System to Rule Them All

Pierre Fabre is a major French pharmaceutical group and the inventor of dermo-cosmetics, which are omnipresent in the health and beauty sectors.

In 2020, as part of a global digital acceleration process, Pierre Fabre called on WIDE’s digital expertise to optimize its customer experience. WIDE’s role was to imagine and design an omnichannel journey for all of Pierre Fabre's brands, while optimizing costs and time to market, maintaining brand consistency, and ensuring scalability.

When Pierre Fabre came to us with this challenge, we immediately understood that we will have to push forward the design system philosophy to deploy a consistent and efficient customer experience on all the digital touchpoints across the group's various brands.

One of the big challenges they faced was adopting a rational approach to brand management that would:

• Streamline the creation of Pierre Fabre’s brand sites worldwide
• Reuse content on all channels and facilitate localization by country
• Optimize the customer experience by creating synergy between e-commerce and brand guidelines
• Share tools, technical resources, and expertise within and between brands
• Provide a scalable multi-brand solution to guarantee the sustainability of the platform and facilitate the group's growth

WIDE worked on the design system’s integration within a site factory to make sure all brand assets were immediately and easily usable – always keeping ROI and sales growth on digital channels top of mind. Following a user-centric methodology, WIDE decided to involve end-users throughout the project by researching and testing the existing ecosystem with over 500 users.

This research phase allowed WIDE to understand users’ needs and difficulties deeply and design more efficient journeys for Pierre Fabre to create a great customer experience. Modeled around two of Pierre Fabre’s pilot brands (Eau Thermale Avène and René Furterer) with whom WIDE built a composite design system to address the rationalization issues for all of their brands. This logic later led to the creation of a master design system, which they called the Core Model. The idea was to adapt this model for each brand across the group. So, WIDE needed a process that could be easily repeated and scaled for each of the group’s brands. With this in mind, WIDE used an 80-20 ratio to build the design system for each brand, with 80% being made up of generic elements shared by all Pierre Fabre’s brands and 20% consisting of brand-specific elements like graphic identity and unique functional needs.

The Core Model consisted of a library of components and templates associated with usage guidelines and integrated within Frontify. The principles of atomic design were used to structure the different elements of the Core Model.

The Design Steps

To build the Core Model and the design systems of the different brands, WIDE went through several key steps:

• Definition of the experience strategy and main principles which would guide design work
• Conduct 5 design sprints to create all the templates needed to address each user journey based on the two pilot brands
• Each block or component was identified and then rationalized in a Core Model approach
• The templates and blocks were then developed into a mobile and desktop graphic model per brand

All the elements also used responsive design, a layer of SEO, and customization capabilities to match the group’s various brand identities. To host the Core Model and the design systems of the brands, WIDE needed a robust and flexible platform that could adapt to the specific architecture. This is where Frontify came into play.

Frontify’s role was simple:

• Create a single source of truth for all of Pierre Fabre’s assets
• Share these brand assets with all stakeholders to help them create new digital touchpoints for Pierre Fabre and all of its sub-brands
• Host the Core Model and its capabilities, and offer suggestions for using it

So far, the results have been positive. The solution has set a solid foundation for all Pierre Fabre’s brands and partners. And, over the next 3 years, it will act as the basis for developing the group’s full digital ecosystem.

These days, we work on the roll-out for international markets (8 brands / 40 countries). We take full advantage of this approach as we just need a couple of weeks to deploy a new website for a specific market rather than several months like we did before. We plan to roll out 120 websites during the next 8 months.

As WIDE puts it: What a virtuous collaboration!

A project of this scope only works if all its players share a common vision and an unfailing commitment to more efficiency. WIDE was fortunate to work with a client who trusted them and was willing to build a true partnership with their team. The rigor and professionalism of the Pierre Fabre project team and two pilot brands WIDE collaborated with initially, were key factors in the success of the project and implementation. Frontify powered this collaboration with a design system to rule them all and helped Pierre Fabre’s multi-brand management and efficiency wishes become a tangible reality. At Frontify, we’re proud of the work we’ve done with WIDE and are excited to embark on the journey ahead with them and Pierre Fabre.