Designing at Scale:
Systems & Product Flows

Design System

B2B

International Teams

WCAG 2.2 AA

Co-leading the design system, I translated system components into real product flows, improving clarity, accessibility, and speed of delivery across markets.

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 14+ international product teams and design system engineers.

TOOLS

Sketch

Figma

Zeroheight

Accessibility tools

SCOPE

WCAG 2.2 AA

Design tokens

Documentation

Design system

Product flows & screens

Note

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

About the Project

Vodafone serves millions of users across 14+ markets worldwide. Over 3+ years, I co-led Vodafone's global design system while actively shaping product experiences.

My work combined system-level scalability with hands-on product design, creating components, improving flows, and ensuring accessibility in real user-facing products.

Problem

Vodafone’s digital products spanned multiple markets and platforms, with diverse design approaches and workflows. My challenge was to help teams work more efficiently, ensure a consistent and accessible experience, and support the rollout of new features across customer-facing and internal tools.

Challenges
- Balancing global system consistency with local market requirements.
- Migrating legacy screens while fixing inconsistencies in flows and components.
- Coordinating adoption and usage across 14 markets and multiple teams.
- Aligning design system goals with product-level needs without slowing feature development.

Solution

System-Level
- Co-led the global design system
with reusable Figma components.
- Created 100+ components, ensuring consistency, accessibility, and responsive behavior.
- Built a Zeroheight documentation site with guidelines, patterns, and usage examples.
- Trained 50+ designers across multiple regions to adopt and apply the system correctly.

Product-Level
- Rebuilt 150+ product screens
during the Sketch → Figma migration, applying system components to real flows.
- Improved core journeys for clarity, accessibility, and usability.
- Collaborated closely with PMs, developers, and researchers to iterate on flows and screens based on feedback.
- Ensured WCAG 2.2 AA compliance, making experiences more inclusive for users with different needs.

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

- Adopted across 14+ markets, powering customer-facing apps and internal tools used by millions of users.
- Redesigned 150+ screens, improving clarity, consistency, and accessibility across key user flows.
- Trained 50+ designers, enabling faster adoption of the design system and reducing duplicated work.
- Helped product teams focus on features, speeding up design-to-development handoffs and improving delivery efficiency by ~30%.
- Contributed to more intuitive, user-friendly flows, making key tasks easier and faster for end users.

Reflection

This project taught me how to balance system thinking with product design thinking. While co-leading a global design system, I also designed hands-on flows and interfaces that shaped real user experiences. I learned to scale design across diverse markets, collaborate effectively with cross-functional teams, and build products that are consistent, accessible, and user-centered.