Top
Start
End
Driving Digital Transformation with du's Design System
Driving Digital Transformation with du's Design System
As one of the leading telecom providers in the UAE, du is undergoing a digital transformation to enhance user experiences across all platforms. Discover key design system projects that empower teams to move faster and drive the success of this transformation.
As one of the leading telecom providers in the UAE, du is undergoing a digital transformation to enhance user experiences across all platforms. Discover key design system projects that empower teams to move faster and drive the success of this transformation.
My Role
My Role
Design System Specialist
Design System Specialist
Team
Team
Design System Lead,
UI Developers
Design System Lead, UI Developers
Design System Lead,
UI Developers
Company
Company
du Telecom
du Telecom
Project Date
Project Date
2024 - 2026
2024 - 2026
Libraries Covered
Libraries Covered
Global, App, Tablet,
and Web UI Libraries
Global, App, Tablet,
and Web UI Libraries
Reading Time
Reading Time
4 minutes
4 minutes
Overview
Overview
My Responsibilities
My Responsibilities
du Design System
Design Tokens (Brand Library)
Colors, typography, spacing, effects
Global Library
Common elements that are used across all platforms
Iconography Library
Used across all
platforms
Motion Library
Guideline on how elements interact smoothly
App
Library
Components tailored to App
Tablet
Library
Components tailored to Tablet
Web
Library
Components tailored to Web
watchOS
Library
Components tailored to Watch
Kiosk
Library
Components tailored to Kiosk
Pages & Localization Library
Template level library
Design System Library Structure
du Design System
Design Tokens (Brand Library)
Colors, typography, spacing, effects
Global Library
Common elements that are used across all platforms
Iconography Library
Used across all platforms
Motion Library
Guideline on how elements interact smoothly
App Library
Components tailored to App
Tablet Library
Components tailored to Tablet
Web Library
Components tailored to Web
watchOS Library
Components tailored to Watch
Kiosk Library
Components tailored to Kiosk
Pages & Localization Library
Template level library
Design System Library Structure
du is one of the leading telecom providers in the UAE, serves millions of customers across mobile, broadband, and digital services. Since its launch in 2006, du has played a pivotal role in connecting people and businesses across the country, offering a wide range of mobile, broadband, and enterprise solutions. du currently undergoing a major digital transformation to enhance user experiences, enabling seamless digital experiences and smarter solutions for a more connected future.
du is one of the leading telecom providers in the UAE, serves millions of customers across mobile, broadband, and digital services. Since its launch in 2006, du has played a pivotal role in connecting people and businesses across the country, offering a wide range of mobile, broadband, and enterprise solutions. du currently undergoing a major digital transformation to enhance user experiences, enabling seamless digital experiences and smarter solutions for a more connected future.
As part of this digital transformation, I serve as a dedicated Product Designer in design systems and play a crucial role to manage all libraries across Global, App, Tablet, and Web platforms. My responsibilities ranged from developing components, eliminate inconsistencies through comprehensive audits, creating a clear documentations, and maintaining design tokens to keep everything aligned.
As part of this digital transformation, I serve as a dedicated Product Designer in design systems and play a crucial role to manage all libraries across Global, App, Tablet, and Web platforms. My responsibilities ranged from developing components, eliminate inconsistencies through comprehensive audits, creating a clear documentations, and maintaining design tokens to keep everything aligned.
Beyond design system development, I drive adoption by educating teams on proper component usage, defining best practices, and supporting governance processes. My goal is to empower teams to move faster with clarity and confidence, reduce redundancy, and deliver high quality experiences that scale. Over time, du’s design system has evolved into a valuable tool that enables teams to work more efficiently, maintain consistency, and play a key role in supporting the company’s digital transformation.
Beyond design system development, I drive adoption by educating teams on proper component usage, defining best practices, and supporting governance processes. My goal is to empower teams to move faster with clarity and confidence, reduce redundancy, and deliver high quality experiences that scale. Over time, du’s design system has evolved into a valuable tool that enables teams to work more efficiently, maintain consistency, and play a key role in supporting the company’s digital transformation.
Highlights
Highlights
Key Projects
Key Projects
Project 01
Project 01
Multi-brand Design Tokens for Seamless Theme Switching
Multi-brand Design Tokens for Seamless Theme Switching
As we support multiple brands under one platform, the need for a scalable token structure became critical. Previously, token management was limited to a single-brand setup, making theme switching manual, inconsistent, and time-consuming.
As we support multiple brands under one platform, the need for a scalable token structure became critical. Previously, token management was limited to a single-brand setup, making theme switching manual, inconsistent, and time-consuming.
To solve this, I contribute to build a multi-brand design token system, allowing brand-specific styles to be managed within a unified structure. This enabled designers and developers to switch themes effortlessly without duplicating components or maintaining separate libraries.
To solve this, I contribute to build a multi-brand design token system, allowing brand-specific styles to be managed within a unified structure. This enabled designers and developers to switch themes effortlessly without duplicating components or maintaining separate libraries.
Impact
Improved scalability and consistency for future brands or theme launches.
3 brands rolled out using with zero component duplication.
400+ components now support dynamic theming without duplication or override.
Theme Switching
Theme Switching
Transition between different brand identities without manual intervention.
Transition between different brand identities without manual intervention.
Component Tokens (Theming)
Component Tokens (Theming)
Naming Conventions & Usage
Naming Conventions & Usage
Color Tokens Documentation
Color Tokens Documentation
Preview of how color tokens are structured and documented.
Preview of how color tokens are structured and documented.
Impact
Improved scalability and consistency for future brands or theme launches.
3 brands rolled out with zero component duplication.
300+ components now support dynamic theming without duplication or override.
Project 02
Project 02
Localization Template Library for English & Arabic (RTL) Layout
Localization Template Library for English & Arabic (RTL) Layout
In order to help designers work more efficiently, UX Writer team has spent ~60% of their time validating an existing string pattern and design system team spent ~50% of their time auditing and updating screen with the correct component for designers.
In order to help designers work more efficiently, UX Writer team has spent ~60% of their time validating an existing string pattern and design system team spent ~50% of their time auditing and updating screen with the correct component for designers.
Additionally, with the number of releases being worked on, the screens may overlap with each other. This made it difficult for UX/UI Designers to figure out the most up-to-date designs for specific journey, leading to hours of redundant meetings just to get everyone aligned.
Additionally, with the number of releases being worked on, the screens may overlap with each other. This made it difficult for UX/UI Designers to figure out the most up-to-date designs for specific journey, leading to hours of redundant meetings just to get everyone aligned.
Therefore, to tackle this issue I took initiative to build template library that serves both Design System and UX Writing teams. This library includes reusable UI templates for common journeys that most likely will be used repeatedly across releases, complete with localization content and layout (EN & AR). This not only help teams move faster but also ensures consistency, reduces back-and-forth, and streamlines collaboration.
Therefore, to tackle this issue I took initiative to build template library that serves both Design System and UX Writing teams. This library includes reusable UI templates for common journeys that most likely will be used repeatedly across releases, complete with localization content and layout (EN & AR). This not only help teams move faster but also ensures consistency, reduces back-and-forth, and streamlines collaboration.
Impact
Reduced design validation and audit time by 30–40% across UX Writing and Design System teams.
Enable 2x faster design delivery for reusable user journey.
All templates were used in 25+ journeys within the first 3 months.
Content String Collection (EN & AR)
Content String Collection (EN & AR)
UI Template - Login & OTP
UI Template - Login & OTP
Used repeatedly more than 5x across all releases for different use cases
Used repeatedly more than 5x across all releases for different use cases
UI Template - Billing & Payments
UI Template - Billing & Payments
Used repeatedly more than 15x across all payment journeys
Used repeatedly more than 15x across all payment journeys
Impact
Reduced design validation and audit time by 30–40% across UX Writing and Design System teams.
Enable 2x faster design delivery for reusable user journey.
Templates were used in 15+ journeys within the first 3 months.
Project 03
Project 03
How Research Uncovered Hidden Problems in Design System
How Research Uncovered Hidden Problems in Design System
After built and evolving Design System for over 2 years, Developers reported some components available in Figma libraries but it wasn’t implemented or published in Storybook. Causing confusion, delays, and unnecessary back-and-forth with the Design System team.
After built and evolving Design System for over 2 years, Developers reported some components available in Figma libraries but it wasn’t implemented or published in Storybook. Causing confusion, delays, and unnecessary back-and-forth with the Design System team.
To understand better the root cause, I initiated a research that included surveys, interviews with both designers and developers across different teams. The data showed 50.7% of developers faced this issue, while designers also faced difficulty discovering the right components, leading them to modify components due to tight deadlines.
To understand better the root cause, I initiated a research that included surveys, interviews with both designers and developers across different teams. The data showed 50.7% of developers faced this issue, while designers also faced difficulty discovering the right components, leading them to modify components due to tight deadlines.
These insights led us to realign Figma and Storybook, close component gaps, and enhance documentation. As next steps, we proposed regular design system sprints, improved naming and keyword for easier discoverability, and consolidating all design system documentation into a single platform that’s accessible to both designers and developer
These insights led us to realign Figma and Storybook, close component gaps, and enhance documentation. As next steps, we proposed regular design system sprints, improved naming and keyword for easier discoverability, and consolidating all design system documentation into a single platform that’s accessible to both designers and developer
Impact
We’re still in the process of improving our Design System, so the full impact may not be fully visible yet. I will continue tracking the outcomes and look forward to sharing measurable results.
Brainstorming & Planning
Brainstorming & Planning
Preview of the initial planning, question mapping, and synthesis process.
Preview of the initial planning, question mapping, and synthesis process.
Impact
We’re still in the process of improving our Design System, so the full impact may not be fully visible yet. I will continue tracking the outcomes and look forward to sharing measurable results.
Copyright © 2026 ・ Muhammad Reza Rahmawan ・ All Right Reserved
Thanks for scrolling all the way down!
Thanks for scrolling all the way down!
I truly appreciate your time. If you’re excited about product thinking, design system, or just want to chat and collaborate on something cool, let’s make it happen! 🚀
I truly appreciate your time. If you’re excited about product thinking, design system, or just want to chat and collaborate on something cool, let’s make it happen! 🚀
Copyright © 2026 ・ Muhammad Reza Rahmawan ・ All Right Reserved