Our client, TAQA Distribution, aimed to unify the digital experience across its two subsidiaries—AADC and ADDC—by launching a modernized mobile app paired with a scalable design system. The project involved a complete redesign of the mobile experience and building a bilingual design foundation to support both English and Arabic (RTL).
Timeline
3.5 months (Feb 2024 – May 2024), from UX exploration to design system documentation, while collaborating across multiple modules and teams.
Background
TAQA is a leading energy and utilities provider in the UAE. AADC and ADDC operated separate mobile apps with fragmented UI and inconsistent design patterns.
The goal was to merge the platforms into a unified product, aligned with the TAQA brand refresh, and ensure seamless user experiences in both English and Arabic.
The initiative focused on creating a component-based design system in Figma, integrating design tokens and variables, and documenting everything in Zeroheight for scalable, developer-ready handoff.
The redesign introduced an intuitive interface, modern visual system, and cross-functional workflow to reduce delivery time and enhance usability.
This section outlines the step-by-step design and delivery approach for the TAQA mobile app redesign and design system—from discovery to implementation.
Research & Planning
Conducted UX audits on existing AADC and ADDC apps to identify inconsistencies.
Studied user feedback and business needs to define key design principles.
Established foundational design tokens (typography, spacing, colors) for multilingual support.
Design & Prototyping
Created scalable UI components and design patterns in Figma.
Designed responsive layouts for mobile in English and Arabic (RTL) formats.
Collaborated with teams across modules to ensure system-wide consistency.
Implementation
Synced Figma components and documentation via Zeroheight for developers.
Provided regular design QA support and component fixes during sprint reviews.
Contributed to the transition from screen-based mockups to component-first delivery.
Testing & Optimization
Conducted internal testing with QA and Dev teams to validate design accuracy.
Iterated based on edge cases, RTL logic, and accessibility checks.
Delivered polished, reusable assets for faster dev rollout across platforms.
The final output included a merged AADC–ADDC mobile app and a centralized TAQA Design System, streamlining cross-platform design delivery.
Unified Experience
A single mobile app combining AADC & ADDC, with consistent UI and interaction patterns.
Multilingual Design System
A flexible system supporting both LTR (English) and RTL (Arabic) interfaces.
Developer-Ready Handoff
All components, guidelines, and tokens documented in Zeroheight, improving dev speed and reducing back-and-forth.
Scalability
Reusable design foundations that will support future TAQA web and mobile platforms.
Here, the outcomes and impact of the project are highlighted, including team efficiency, design consistency, and stakeholder feedback.
Faster Delivery
Component-driven design system reduced visual inconsistencies and sped up delivery timelines by over 30%.
Improved Dev Handoff
Zeroheight documentation enabled smoother collaboration between design and development teams, minimizing iteration loops.
Cross-Platform Consistency
Achieved a uniform experience across English and Arabic versions, improving user satisfaction in both regions.
Team Recognition
Received formal appreciation from leadership and PMs for proactive collaboration, ownership, and creative execution.