BlackRock Voting Choice
An industry-first SaaS solution for retail investors to participate in ESG voting decisions inline with their ethical values and policy governance preferences.
O2 Telefonica Design System
Building a multi-brand design system from the ground up to connect global teams on a common design language foundation within O2 Telefonica brand portfolio,
The problem
O2 Telefonica lacked a clear design system for web and mobile. Twelve different sub-brands within Telefonica Germany operated independently, creating their own UI standards. Each sub-brand had its outdated design governance system, never updated since acquisition.
RAITT project
BORN (UK) and TechM/Wipro (India) were briefed by O2 Telefonica to create a future-proof white-label ecommece platform for all Telefonica sub-brands, enabling agility and faster launches.
My role
I worked as a UX Design Lead on this project for over a year, where I was fully integrated into the O2 Telefonica squads. My primary responsibilities included:
- UX design for the white-label ecommerce platform.
- Focusing on Lead-to-Order customer journeys.
- Devising and integrating components into the Figma design system.
- Ensuring quality control of the off-shore team’s UX/UI work.
Architecting ONE, the Design System
By the time I joined the project, the work on the white-label solution had already started in Sketch, however thankfully, we quickly switched to Figma as it supported essential workflows such as branching and version revisioning.
Myself and other two leads were selected to form a dedicated team and create “ONE,” Telefonica’s brand new design system. Myself and the team defined styles, componentized the UI, organized pattern libraries for each platform, and contributed towards the documenting everything in BrandFactory.
Legacy Component Review
I started my work by meticulously auditing all legacy components within the Lead-to-Order cusotmer journeys to understand and map out their behavior and variations.
Figma Component Library
My approach involved creating initial components, taking into consideration competitor and best practice research. I then subjected these components to rigorous internal review rounds. Only after successfully stress-testing them against edge cases and obtaining sign-off did these components secure a place in the Component Library. Subsequently, I established dedicated libraries for each brand, streamlining the reuse of interface elements.
To facilitate design decision-making, I categorized components as Global, Structural, Content, Data, or Utility. This systematic approach served as a guiding framework throughout the design process.
Style Rules – Tariff card example
Next, I created the component style rules, a kind of catch-all for elements that are not visible in the design. For example, how will the component render when you scroll down the page? It’s also where the design system team keeps track of unresolved questions or issues.
Tariff Card component – Demo video
Below is an example showcasing the various components states within a tariff card component.
Tariff Card component – Pricing display variations
Below is an example showcasing price variations within the card, accompanied by one of the numerous sub-brands available. Pictured: WhatsApp SIM
Documentation, documentation, documentation.
Having a structure that includes extensive documentation, including history and best practices, is at the core of the Figma design system we created. It’s a success because people can read the documentation all in one place. They can see everything, starting from the use case to the design and moving on to the handover and the final component page. People can see the whole life cycle of a component.
ONE is the foundation of O2 Telefonica white-label solution
ONE wasn’t perfect, and we faced challenges including UX-to-UI inconsistencies, coaching junior designers to work with Figma advanced workflows, and optimizing our own design workflow. But together, we successfully created a white-label solution for over 12 sub-brands. ONE was a massive endevour and a learning process for everyone, but as a team, we delivered it.
Testimonial
What sets Patrizio apart is not only his professional prowess but also his personality. Patrizio is not just a talented UX professional but also a pleasure to work with. Simply one of the best professionals I have interacted in UX CX area.
Want to know more?
The RAITT program isn’t fully live yet so for now this is all I can share on my portfolio. I’d be happy to discuss about the white label solution in greater depth as soon as it’s public domain.
Recent case studies:
Telefónica Design System
A multi-brand, white-label design system to streamline prod-dev efforts
Femtec Health Inc.
An AI-driven, personalised self-care solution designed to transform the healthcare experience for women.
M&S Scan, Pay, GO
Revolutionising the in‑store purchase experience. Say adios to queues!
The Chat Shop
A SaaS website redesign nominated at The Drum Awards for Experience
TOG Meeting rooms
Seamlessly book desks and meeting rooms in hundreds of co-working spaces
TOG VR viewings A/B test
Space is a powerful tool to foster engagement, inspire innovation, and drive productivity. A virtual tour is the best way to evaluate a space without traveling to it.
The Office Group
An end-to-end website redesign for UK's largest flexible workspace provider
TOG Workspace prospects
A research project to provide TOG with a comprehensive understanding of their customers and achieve core business goals.
M&S Product videos A/B test
Defined the perfect online clothing showcase following a user-centric methodology
M&S Food to Order
A food delivery service trial that led to the £750m partnership with Ocado
M&S in-store kiosk app
An app redesign to deliver true multichannel retailing by uniting online and in-store shopping
