TL;DR
I was the sole product designer for Pernod Ricard's e-commerce website. With a design legacy from a previous team, UI components were used inconsistently, so I had to audit, redesign and see the implementation through while handling several other design tracks.
After showing the impact of the UI misalignment, I sought alignment with design, business and tech to secure buy-in and resources. We chose to standardise rather than rebuild the whole design system, and set up a feedback loop for transparent delivery and ongoing alignment.
The style guide, component library and component documentation now cover the website, deployed to 6 markets across Asia and Europe. They aligned the team's understanding and prevented UI issues. 38 components with 198 variants were delivered at 0.45 man-days per component, saving an estimated 50% of design time.
Context
Inconsistent use of UI components escalated costs and broke design consistency.
The inconsistent interface diminished the brand's luxury feel, confused interactions and hurt the business.
Examples of misaligned UI components
Problem
How might developers, the product designer and the product manager share one understanding of how UI components are used?
So we could cut repetitive, time-consuming hand-over communication.
Kickoff
Four key actions made a smooth delivery across several parties possible.
To avoid hurting business priorities and to align with the global design system approach, I:
- Sought alignment with key sponsors (the business and tech owners) to make the project succeed.
- Secured its priority in the product roadmap and sprint development with the product manager.
- Secured support from the global design system team.
- Found a cost-effective approach with the tech owner and tech lead that aligned with the company-wide strategy.
Technical approach
We standardised the existing front-end code instead of rebuilding the front end with a headless framework.
- Option 1: apply the Stencil.js front-end framework, in line with the global design system practice.
- Option 2: use another headless framework for front-end customisation and scalability.
- Option 3: standardise the existing front-end code without changing technology.
We chose option 3 because:
- A new global design system for the group's e-commerce platforms was being introduced.
- Options 1 and 2 carried high cost and uncertainty, and scalability wasn't a requirement.
- Some UI components could be updated directly through Magento configuration.
Project approach
I set up workflows and feedback loops with the relevant parties.
The project workflow and its feedback loops
Design approach
A four-step design process for each component.
The website was deployed to several markets, so it was important to understand the UI variants needed for local legal requirements or cultural practices.
Step 1. Audit existing design assets: review use cases, find discrepancies and consolidate end-user feedback
Step 2. Benchmark with industry practices: analyse competitors' design for similar use cases
Step 3. Explore all potential solutions and analyse the pros and cons of each
Step 4. Design and test multi-language components with component properties and variables
Final deliverables
A style guide, a component library and component documentation.
Delivered along with the component code and style variables built by the front-end developer.
Impact
The design system aligned the team, prevented UI issues and made maintenance and new features easier.
- 0.45 man-days on average to implement one component: a cost-effective approach.
- 38 components designed and built, with 198 variants for different states and use cases. The most used component had 2.5k insertions in one year.
Component statistics
- 50% of the time saved for one UX/UI designer on mock-up delivery, with 600 component insertions a month on average.
Component insertions over time
38
components with 198 variants
0.45
man-days to implement a component, on average
50%
of design time saved on mock-ups
