Designing clarity at scale for a global digital ecosystem

Design System

B2B

International Teams

WCAG 2.2 AA

Together we built more than just components. We created rules, consistency, and trust across Vodafone’s global product teams, shaping how millions interact with digital products every day.

Three mobile mockup screens from My Vodafone Application. In the middle is the Home screen of the app, on the right is a screen that shows a BarChart with billing informations. On the left, the screen contains WiFi settings cards and a header with bill informations.,

ROLE

Design System Architect

Product Designer

Accessibility Advocate

TEAM

Worked alongside 20+ international product teams and design system engineers.

TOOLS

Sketch

Figma

Zeroheight

Accessibility tools

SCOPE

WCAG 2.2 AA

Design tokens

Documentation

Design system

Note

Due to NDA restrictions, visual assets and some specifics of this project are not public.

About the Project

I was a member of the core team that owned Vodafone's global design system for more than 3.5 years. A system that has been adopted by 14 international markets and used by thousands of designers and developers.

Our work supported a wide range of digital services. From self-service apps to enterprise software, used by millions of customers worldwide.

I spearheaded collaboratively the creation of a scalable, accessible, and consistent design language, working with developers to ensure our components were production-ready, inclusive by default, and truly global in ambition.

Problem

Design and development teams spread across multiple countries presented Vodafone with:

- Fragmented UI experiences
- Iterative design effort across geographies
- Dev-to-design handovers lagging
- Access standards applied inconsistently

Lack of alignment meant slower delivery, decreased usability, and higher maintenance costs across product teams.

Solution

I worked with my team to develop a global design system that corrected for consistency, velocity, and accessibility:

- Developed 150+ reusable, production-ready components in Figma
- Incorporated WCAG 2.2 AA accessibility principles into every component
- Integrated ARIA labels, semantic structure, and contrast standards from day one
- Co-created implementation guidelines with front-end developers for consistent code output
- Worked with 14 local markets, tailoring solutions to their requirements and delivering onboarding and training
- Set up documentation, workshops, and support mechanisms to enhance adoption and reduce friction

This system was the foundation for Vodafone's digital design and development. Empowering autonomy without losing alignment.

Documentation &
Accessibility

To support our product teams globally, we created in-depth design system documentation using Zeroheight. It outlines over 300 components and includes anything from onboarding basics to high-level accessibility details.

The documentation is split into sections:
- Getting Started – An overview of our tools, onboarding practice, and design principles
- Foundations – Major elements like colour, layout, and spacing tokens
- Components – For each component: usage patterns, annotated Figma components, accessibility considerations, and version history
- Accessibility – Practical guidance tailored separately for designers, developers, and content creators, supported by inclusive design principles and relevant standards

We focused on how different impairments (e.g. visual, motor, cognitive) impact user interaction, and made sure our documentation supported building inclusive products from the ground up.

This structure helped us to:
- Speed up onboarding across markets
- Align design and dev teams on shared standards
- Improve accessibility implementation in real products
- Decrease duplication and inconsistency
- Build stakeholder trust through clear documentation

The system also leverages Figma variables to support light/dark modes, up to 400% zoom levels, and adaptive layouts, making it possible for teams to build consistently and accessibly at scale.

Impact

📐 150+ components and variants maintained
🌍 Rolled out across 14 markets in Europe, Africa, and Asia
👩‍💻 Empowered thousands of designers and developers
⚡ Reduced design-to-dev handover time by 40%
♿ Ensured full WCAG 2.2 AA compliance and inclusive design standards
📚 Trained and supported 50+ designers through workshops and direct collaboration

Reflection

This experience deepened my understanding of system thinking, cross-cultural collaboration, and the importance of design as a tool for equity.

I learned how to lead through simplicity, how to battle for accessibility not as a task list but as a norm, and how to build systems that empower teams at scale, across functions, borders, and lived experiences.

This wasn’t just a design project. It was a long-term investment in digital responsibility and a commitment to building technology that works for everyone, everywhere.