Arabic
Design & Delivery
PepsiConnect · EMEA · May - July 2025
Expanding PepsiConnect into Arabic-speaking markets meant building the design foundation before the first screen. This covers how the Arabic design system came together — the research, the decisions, and the system that now supports every Arabic market going forward.
Research to delivery. System architecture, component library, RTL logic, global file creation, market customisation, prototyping, dev handoff, design QA — across Saudi Arabia, Egypt and the UAE.
PepsiConnect · EMEA · May - July 2025
Expanding PepsiConnect into Arabic-speaking markets meant building the design foundation before the first screen. This covers how the Arabic design system came together — the research, the decisions, and the system that now supports every Arabic market going forward.
Research to delivery. System architecture, component library, RTL logic, global file creation, market customisation, prototyping, dev handoff, design QA — across Saudi Arabia, Egypt and the UAE.
DS Scope & Markets
EMEA · Saudi · Egypt · UEA
DS Scope & Markets
EMEA · Saudi · Egypt · UEA
Global impacted area
DO · PM · CE · Prototype
Global impacted area
DO · PM · CE · Prototype
Markets delivered
03
Markets delivered
03
Live Markets
Saudi Arabia · Egypt
Live Markets
Saudi Arabia · Egypt
The Challenge
Taking PepsiConnect in EMEA, an Arabic region
Let’s clear things up
01
Arabic users navigate right to left. The existing component library was built entirely for LTR — layout, icons, animations, and navigation all pointed in the wrong direction for these markets.
02
Building screens directly on LTR components would have created inconsistency across markets and made future updates a manual effort every time. A shared foundation was the right call.
03
The system needed to work alongside the global DS — not separately from it. Updates to the standard library had to flow through to Arabic markets automatically.
04
Every component needed to support both directions — swappable between standard and Arabic cleanly, without breaking layout or visual consistency.
How I approached it
Research first → System second → Screens third
01 ——
Arabic e-commerce research
Started with Amazon.sa, Noon, and Carrefour — observing how Arabic users navigate, where icons sit, and how interactions flow. Understanding real behaviour before forming an opinion on direction.
01 ——
Arabic e-commerce research
Started with Amazon.sa, Noon, and Carrefour — observing how Arabic users navigate, where icons sit, and how interactions flow. Understanding real behaviour before forming an opinion on direction.
01 ——
Arabic e-commerce research
Started with Amazon.sa, Noon, and Carrefour — observing how Arabic users navigate, where icons sit, and how interactions flow. Understanding real behaviour before forming an opinion on direction.
02 ——
Mirroring — tested and evolved
Mirroring was the starting point. Tested it across components, identified where it held and where it needed a more considered approach, then rebuilt those components with proper RTL logic rather than just flipping them.
02 ——
Mirroring — tested and evolved
Mirroring was the starting point. Tested it across components, identified where it held and where it needed a more considered approach, then rebuilt those components with proper RTL logic rather than just flipping them.
02 ——
Mirroring — tested and evolved
Mirroring was the starting point. Tested it across components, identified where it held and where it needed a more considered approach, then rebuilt those components with proper RTL logic rather than just flipping them.
03 ——
Figma explorations and prototype iterations
Multiple directions explored directly in Figma before committing. Navigation flow, tap targets, and reading patterns validated with real Arabic content — not placeholder text.
03 ——
Figma explorations and prototype iterations
Multiple directions explored directly in Figma before committing. Navigation flow, tap targets, and reading patterns validated with real Arabic content — not placeholder text.
03 ——
Figma explorations and prototype iterations
Multiple directions explored directly in Figma before committing. Navigation flow, tap targets, and reading patterns validated with real Arabic content — not placeholder text.
04 ——
RTL rules documented
Icon behaviour, naming conventions, layout logic, animation direction — all documented before a single component was built. A working reference shared with the dev team to ensure consistent implementation.
04 ——
RTL rules documented
Icon behaviour, naming conventions, layout logic, animation direction — all documented before a single component was built. A working reference shared with the dev team to ensure consistent implementation.
04 ——
RTL rules documented
Icon behaviour, naming conventions, layout logic, animation direction — all documented before a single component was built. A working reference shared with the dev team to ensure consistent implementation.
05 ——
Naming convention — organised for scale.
'_Arabic' suffix on every DS component for easy identification in the library, and '[Ar]' prefix on screen-level components for instant recognition during market file work. Swapping between standard and Arabic became a one-second decision, not a hunt.
05 ——
Naming convention — organised for scale.
'_Arabic' suffix on every DS component for easy identification in the library, and '[Ar]' prefix on screen-level components for instant recognition during market file work. Swapping between standard and Arabic became a one-second decision, not a hunt.
05 ——
Naming convention — organised for scale.
'_Arabic' suffix on every DS component for easy identification in the library, and '[Ar]' prefix on screen-level components for instant recognition during market file work. Swapping between standard and Arabic became a one-second decision, not a hunt.
06 ——
Components rebuilt for RTL
Layouts, icon directions, animation behaviour, sidebar positions, breadcrumb direction, carousel scroll logic — every interaction reconsidered for RTL. Arrows point left. Breadcrumbs reverse. Carousels scroll opposite. Even the question mark flips.
06 ——
Components rebuilt for RTL
Layouts, icon directions, animation behaviour, sidebar positions, breadcrumb direction, carousel scroll logic — every interaction reconsidered for RTL. Arrows point left. Breadcrumbs reverse. Carousels scroll opposite. Even the question mark flips.
06 ——
Components rebuilt for RTL
Layouts, icon directions, animation behaviour, sidebar positions, breadcrumb direction, carousel scroll logic — every interaction reconsidered for RTL. Arrows point left. Breadcrumbs reverse. Carousels scroll opposite. Even the question mark flips.
07 ——
Global Arabic files — CE, DO, PM
Arabic versions of all three global product area files created and linked to the global source. Any update to the standard DS flows through to Arabic markets automatically — no manual rework needed.
07 ——
Global Arabic files — CE, DO, PM
Arabic versions of all three global product area files created and linked to the global source. Any update to the standard DS flows through to Arabic markets automatically — no manual rework needed.
07 ——
Global Arabic files — CE, DO, PM
Arabic versions of all three global product area files created and linked to the global source. Any update to the standard DS flows through to Arabic markets automatically — no manual rework needed.
08 ——
Saudi Arabia and Egypt — delivered end to end
Both markets designed, QA'd, and shipped on top of this foundation. Market-specific customisations layered on the global Arabic DS — not built alongside it as separate files.
08 ——
Saudi Arabia and Egypt — delivered end to end
Both markets designed, QA'd, and shipped on top of this foundation. Market-specific customisations layered on the global Arabic DS — not built alongside it as separate files.
08 ——
Saudi Arabia and Egypt — delivered end to end
Both markets designed, QA'd, and shipped on top of this foundation. Market-specific customisations layered on the global Arabic DS — not built alongside it as separate files.
Learnings
What this reinforced
01
Working under live deadlines with full end-to-end ownership — no precedent, no safety net — sharpened decision-making in a way no structured project could. You learn to trust your judgement when there's no time to second-guess it.
02
Arabic isn't a translation of English. It's a different cognitive experience entirely. Taking time to genuinely understand the language, the culture, and the user behaviour before designing changed the quality of every decision made after.
03
Every hour spent building the DS right was an investment in every designer and every market that comes after. That shift — from designing for now to designing for scale — is the one that stays.
01
Working under live deadlines with full end-to-end ownership — no precedent, no safety net — sharpened decision-making in a way no structured project could. You learn to trust your judgement when there's no time to second-guess it.
02
Arabic isn't a translation of English. It's a different cognitive experience entirely. Taking time to genuinely understand the language, the culture, and the user behaviour before designing changed the quality of every decision made after.
03
Every hour spent building the DS right was an investment in every designer and every market that comes after. That shift — from designing for now to designing for scale — is the one that stays.
Recognitions
The work didn't go unnoticed
