Home
Building a Design System for NEOM's Digital Ecosystem
Building a Design System for NEOM's Digital Ecosystem
Building a Design System for NEOM's Digital Ecosystem
8 min est. read
Overview
NEOM's emails and cloud pages were being designed in Photoshop, approved by the client, then rebuilt from scratch by developers guessing font sizes, spacing, and colors. What was approved rarely matched what went live.
I built a Figma based component library that gave teams a shared foundation for the first time, with exact values in dev mode, bilingual components from the start, and a library that grew iteratively as the project evolved.
NEOM's emails and cloud pages were being designed in Photoshop, approved by the client, then rebuilt from scratch by developers guessing font sizes, spacing, and colors. What was approved rarely matched what went live.
I built a Figma based component library that gave teams a shared foundation for the first time, with exact values in dev mode, bilingual components from the start, and a library that grew iteratively as the project evolved.
My Role
Lead Designer
Responsibilities
Design Systems Strategy
Timeline
Q3 2024
Outcomes
Outcomes
Production Speed
Production Speed
Teams assembled campaigns from shared components instead of rebuilding from scratch.
Teams assembled campaigns from shared components instead of rebuilding from scratch.
Zero Rework
Zero Rework
Arabic and English built from the same library, no rework between markets.
Arabic and English built from the same library, no rework between markets.
Accurate Builds
Accurate Builds
Exact values in Figma dev mode meant developers stopped guessing. What was approved finally matched what went live.
The Challenge
Every campaign was a one off. Developers had no way to extract values from Photoshop files so everything was estimated. Arabic was treated as a translation exercise rather than a design one. At NEOM's scale, with multiple campaigns and two language markets running simultaneously, this wasn't working.
Every campaign was a one off. Developers had no way to extract values from Photoshop files so everything was estimated. Arabic was treated as a translation exercise rather than a design one. At NEOM's scale, with multiple campaigns and two language markets running simultaneously, this wasn't working.
Approach
Concepts First
Visual direction was locked in with client approved concepts before any components were built.
Built Iteratively
New components were added to the library as new campaigns required them. The system grew with the project.
Figma Dev Mode
Developers could see exact values for the first time. Builds came back significantly closer to approved designs.
RTL as a Design Problem
Every component was built with RTL support from the start. Arabic hierarchies were rethought not just mirrored.
Concepts First
Visual direction was locked in with client approved concepts before any components were built.
Built Iteratively
New components were added to the library as new campaigns required them. The system grew with the project.
Figma Dev Mode
Developers could see exact values for the first time. Builds came back significantly closer to approved designs.
RTL as a Design Problem
Every component was built with RTL support from the start. Arabic hierarchies were rethought not just mirrored.
Understanding Atomic Design
Atomic design breaks down UI into five stages:
atoms, molecules, organisms, templates, and pages, to enable consistency and reusability at every level.
Atomic design breaks down UI into five stages:
atoms, molecules, organisms, templates, and pages, to enable consistency and reusability at every level.
Two Libraries, One Unified Framework
Separate libraries for EDMs and Cloud Pages, each optimized for desktop and mobile, with unique components for both English and Arabic content.
Separate libraries for EDMs and Cloud Pages, each optimized for desktop and mobile, with unique components for both English and Arabic content.
Design Tokens: The Visual Foundation
Color, typography, spacing, grids, icons, shadows, effects, and radius tokens ensure harmony and scalability across the entire system.
Color, typography, spacing, grids, icons, shadows, effects, and radius tokens ensure harmony and scalability across the entire system.
Component Structure: From Atoms to Pages
Showcasing how individual elements (atoms) scale into full templates and pages across both EDMs and Cloud Pages.
Showcasing how individual elements (atoms) scale into full templates and pages across both EDMs and Cloud Pages.
Optimized for Devices and Languages
All components are fully responsive and support RTL layouts for Arabic, ensuring a seamless experience across audiences and screen sizes.
All components are fully responsive and support RTL layouts for Arabic, ensuring a seamless experience across audiences and screen sizes.
Built for every use-case
Components aren’t one-size-fits-all, they need to adapt to real-world scenarios. Whether it’s a primary button in a checkout flow or a card in a product listing, flexibility allows the system to meet different functional and visual needs without sacrificing consistency.
Components aren’t one-size-fits-all, they need to adapt to real-world scenarios. Whether it’s a primary button in a checkout flow or a card in a product listing, flexibility allows the system to meet different functional and visual needs without sacrificing consistency.
Outcomes
The gap between approved designs and live builds closed significantly. English and Arabic outputs built from the same library for the first time, eliminating rework between markets.
The gap between approved designs and live builds closed significantly. English and Arabic outputs built from the same library for the first time, eliminating rework between markets.
Learnings
The real problem wasn't visual inconsistency. Designers and developers had no shared language. Figma changed that. Building Arabic support in from the start was faster than retrofitting it later. A system is never finished, starting lean and growing iteratively was the right call.
The real problem wasn't visual inconsistency. Designers and developers had no shared language. Figma changed that. Building Arabic support in from the start was faster than retrofitting it later. A system is never finished, starting lean and growing iteratively was the right call.