One Design System to rule them all
How can we boost our digital capabilities and enhance customer experience when we are already the world's 2nd largest dermo-cosmetic laboratory, operating subsidiaries in 45 markets and a distribution network covering more than 116 countries?
Above all, how can we achieve this by ensuring a consistent, attractive, and effective customer experience while simultaneously optimizing time to market?
It was with this objective in mind that the Pierre Fabre Group approached us to design together the group's new digital ecosystem for all of its brands.
Pierre Fabre, a major French pharmaceutical group, is the originator of dermo-cosmetics, hence the group is particularly present in the fields of health and beauty.
In 2020, as part of a global digital acceleration initiative, Pierre Fabre called on the Wide Agency's expertise to help optimize its client experience.
The objectives were to:
- Develop the online presence of the group's brands
- Strengthen the brand's territory, participation, and conversion
- Develop client awareness
Thus, our role was to envision and design the omnichannel experience of all the group's brands, while also integrating a rationalization approach aimed at optimizing costs and time to market.
To this end, we decided to establish a design system enabling us to implement a coherent, efficient client experience across all the digital contact points of the group's various brands.
One of the major challenges therefore was to introduce a rationalization approach in order to:
- INDUSTRIALIZE the creation of branded sites on a global scale
- REUSE content across all channels, facilitating localization for different countries
- OPTIMIZE the consumer experience, the synergy between the e-commerce components and the brand
- POOL TOGETHER the tools, technical resources, and expertise
- MULTI BRAND in order to ensure the platform's sustainability and align it with the group's growth strategy
We thus were able to work on integrating the design system within a factory site in order to immediately and easily make all the brand assets accessible.
Performance and conversion issues were also at the forefront of our concerns. The platform was designed to further improve the ROI and contribute to the growth of sales on the digital channel for all PF Group brands.
A user centric approach
With regard to methodology, we really wanted to involve the end users throughout the entire project. In particular, we conducted an in-depth research process to better understand the customer experience, their needs, and their difficulties within the existing ecosystem. We were then able to conceive and design new, more efficient customer journeys, testing them with over 500 users to ensure their relevance.
The Core Model
To lay the foundation of the design system, we worked with two emblematic pilot brands representative of all the group's brands: Eau Thermale Avène (ETA) and René Furterer (RF)
In order to meet the challenges of rationalization, we decided not to create a single design system, but rather a concept based on a master design system that we called the Core Model, which would then be adapted for each of the brands.
We established a ratio of 80% generic elements common to all brands versus 20% of brand-specific elements including in particular the graphical identity and certain specific functional requirements.
The design systems of the brands are created from a duplication of the Core Model. However, the generic content with component descriptions and specifications etc. remain stored exclusively in the Core Model thanks to the referenced content functionality of Frontify.
Core Model Life Cycle
This Core Model approach will also enable us to consolidate future developments and enter into a continuous improvement process that benefits all the brands.
To simplify, our Core Model consists of a library of components and templates together with usage guidelines, integrated into a platform specifically for design systems: Frontify
We applied the atomic design principles to structure the various elements of the Core Model
The design stages
In order to develop the Core Model along with the design systems of the different brands, we worked through a number of key steps:
- Definition of the experience strategy and the broad principles that would guide our design work
- Five design sprints to create all the required templates addressing each of the user experiences based on the two pilot brands
- Each block or component is identified and subsequently rationalized in a Core Model approach Core Model
- The templates and blocks are then converted into Mobile and Desktop graphics for each of the brands
All the Core Model elements were naturally conceived in responsive design. They include an SEO optimization layer as well as customization capabilities enabling the easy integration of different brand identities.
In order to host the Core Model and the brands' design systems, we needed a robust and flexible platform. This must be able to adapt to the specific architecture we conceived for this project.
The role of this platform is to:
We decided to rely on the Frontify solution because it perfectly met our needs and also enabled us to:
- Control development and maintenance costs thanks to its SAAS approach
- Enjoy the benefits of a tool that is constantly improving
- Provide us with a framework and build on best market practices
- Have access to dedicated support and a committed community
- Easily integrate with third-party tools we use such as sketch, git, and invision, etc.
A solid, high-performance foundation available to all brands and their partners providing the basis for developing the entire digital ecosystem of the brands over the next three years.
A mutually beneficial collaboration
Such a project can only come to fruition if all stakeholders together share a common vision with a strong commitment throughout the project. We were fortunate to have the opportunity to work with a client who placed their trust in us and with whom we were able to build a true partnership. The rigor and professionalism of the Pierre Fabre project team and the pilot brands we worked with were key factors in ensuring the success of this project.