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