TL;DR
Overview - Planned and delivery a design system of an E-commerce website for Pernod Ricard
Worked as the sole product designer for Pernod Ricard, with the design legacy from previous team, there were lots of misalignment of UI component usage. I had to audit, re-design and ensure implementation while handling multiple tracks of other design tasks.
After spotting the impact of UI misalignment, I had to seek alignment with multiple parties from design, business and tech to ensure sufficient buy-in and resources for this project. We decided to go with standardisation instead of rebuilding the whole design system. Feedback loop was established to ensure transparent delivery and ongoing alignment.
Style guide, component library and component documentation were delivered to cover the website that was deployed to 6 markets across Asia and Europe. It successfully aligned team's understanding and prevented UI issues. 0.45 man-day used per component, 34 components with 198 variants were delivered, and estimated 50% of time saved for design task.
ROLE
Product designer
TIMELINE
May 2023 - Jan 2024
PERNOD RICARD'S STAKEHOLDERS
Design: Global design system manager
Tech: Tech owner, Product manager, tech lead, front-end developer
Business: Global prestige manager
Context
The misalignment in the usage of UI components escalated costs and disrupted design consistency
The inconsistency in the user interface contributed to a diminished perception of luxury associated with the brand, leading to confused interactions and negative business impact.
Key Problem
How to create shared understanding on UI component usage among developers, product designer, and product manager?
So we can reduce repetitive and time-consuming hand-over communication.
Kickoff
Four key actions were undertaken to guarantee a seamless project delivery involving multiple parties
To avoid impacting business priorities and to align with the global design system approach, I
Sought alignment with key sponsors (e.g., Business and Tech owners) to ensure the project's success.
Secured the priority in the product roadmap and sprint development with the product manager.
Ensured support from the global design system team for a successful delivery.
Identified a cost-effective approach with the Tech owner and tech lead to align with the company-wide strategy.
Technical approach Exploration
We chose to standardise existing front-end code instead of rebuilding the whole front-end with other headless frameworks
Option 1
Apply Stencil.js front-end framework to align with global design system practice
Option 2
Use other suitable headless framework for front-end customization and scalability
Option 3
Standardise existing front-end code without changing technology
Key considerations for selecting option 3
1
A new global design system for e-commerce platforms within the group was being introduced.
2
High cost and uncertainty associated with option 1 and 2, with scalability not being a requirement.
3
Certain UI components can be directly updated with configuration using Magento.
Project Approach
Initiated the construction of workflows and feedback loops with relevant parties
Design Approach
Employed a four-step design process for component design
As the website was deployed to multiple markets, it was important to understand the UI variants catered to local legal requirements or cultural practices.
Final deliverables
Style guide, component library, and component documentation were delivered
Along with the component code and style variables done by the front-end developer.
Style guide library: Defined typography usage for multiple languages, iconography, color schemes, corner radius, and layout grid variations using reusable Figma styles.
Component library: Managed master component, variant, and component property.
Component documentation: Document standardised component behaviour, usage, and specification as references.
IMPACT
The design system aligned team's understanding, preventing UI issues and facilitating maintenance and feature development
0.45
man-day used on average to implement one component, showing a cost-effective approach
34
components were designed and built, including a total of 198 variants for various states and use cases. Most used component had 2.5k insertions in one year.
50%
of the time was saved for one UXUI designer during mock-up delivery with avg. 600 component insertions per month.
