Archipelago: Pernod Ricard internal Branding & Design System

Client: Pernod Ricard
Date: 2021 - 2023
Services: Design System

Impact

Aligned visually 10 running SaaS products

Delivery speed increased by 37%.

6 internal AI solutions used Archipelago, representing 3.3M€ in design & front end development costs per year. 

Context

When I joined the digital transformation at the very beginning in October 2020, 3 intelligent solutions was planned for release 4 month later in February 2021. At that time, we Pernod Ricard didn’t have any internal branding, and no Design System. We used Ant Design system to have a strong foundations to optimize design to dev delivery because we didn’t have the time to build our own.

Later, we decided to create our own Design System to increase consistency accross the SaaS products: in term of visual, but also in term of UX patterns. This design system became the official Pernod Ricard internal branding and design system.

The challenge of the project was to migrate strategic SaaS product without impacting their roadmap. All the SaaS product of the digital transformation were under migration when I left Pernod Ricard (10 products)

At the be, we identified that each solution was very similar in terms of interactions:

  • Visualize historical informations,
  • Create simulation and input data,
  • Compare simulations

At that time, none of the squad had the time to think about what I named the para-app: all the additional features that make the difference between the results of an algorithm displayed on an empty page and a fully usable solution, for example:

  • Homepage and welcome screen
  • Activity notifications
  • Profile
  • FAQ
  • Simulation creation
  • Simulation comparaison

The creation of Pernod Ricard design system followed 2 objectives:

  • Align the multiple solutions visually and in term of interactions
  • Accelerate the design and developments phases by building organisms and templates

 

More information about the digital transformation in Pernod Ricard FY21 Annual Report Page 34

Our approach

At the beginning, we identified that each solution was very similar in terms of interactions:

  • Visualize historical informations,
  • Create simulation and input data,
  • Compare simulations

At that time, none of the squad had the time to think about what I named the para-app: all the additional features that make the difference between the results of an algorithm displayed on an empty page and a fully usable solution, for example:

  • Homepage and welcome screen
  • Activity notifications
  • Profile
  • FAQ
  • Simulation creation
  • Simulation comparaison

The creation of Pernod Ricard design system followed 2 objectives:

  • Switching from an individual product approach to a product platform one, by aligning products visually and in terms of UX Patterns
  • Accelerate the design and developments phases by building organisms and templates

 

More information about the digital transformation in Pernod Ricard FY21 Annual Report Page 34

Final screens

Color palette

Guidelines

Patterns

AI Patterns

Component example: Datepicker

Component example: Header