A major electricity and water distribution company serving millions of residents across multiple regions in the UAE, operating through two subsidiary brands.
The engagement focused on unifying their digital channels across mobile and web under a refreshed visual identity, ensuring design scalability and bilingual accessibility.
Timeline
Feb 2024 – May 2024
Discovery & brand immersion
Mobile app redesign
Website structure reorganization
Design system creation & documentation
Background
The client operates multiple mobile platforms with inconsistent design patterns, fragmented UI, and duplicated workflows.
Our goal was to:
Merge these platforms into a single, unified product while maintaining backend separation.
Introduce a component-based design system for consistency and scalability.
Ensure bilingual readiness with full RTL (Right-to-Left) support.
Establish a developer-ready handoff process using Zeroheight for faster, consistent rollouts.
A large-scale redesign for a leading UAE-based utility provider, modernizing its mobile apps and website while building a scalable design system to ensure brand consistency and bilingual accessibility across all digital touchpoints.
Objectives
Onboard stakeholders to the project scope for customer-facing channels.
Present framework, approach, and implementation plan.
Share progress and outcomes to date.
Scope
Mobile App: Update two existing apps under the unified brand, establish reusable design components, maintain separate backends for now, prepare for a single unified app in the future.
Web: Define visual direction, audit and reorganize content, redesign non-logged-in experiences, and prepare static pages for launch.
A structured, three-step process to reimagine the customer app experience while maintaining functionality and minimizing disruption.
3-Step Process
Discover – Brand immersion, visual trend benchmarking, exploration of scalable UI directions.
Design – Define design principles, explore three visual concepts, create bilingual-ready components.
Execute – Implement selected concept, document standards, establish governance for future scalability.
Design Principles
Energizing – Modern visuals with energy-focused accents.
Hierarchical – Clear information structure.
Informative – Legibility and clarity first.
Intuitive – Familiar interaction patterns.
Inclusive – Accessible for all users.
Sustainable – Timeless and scalable design choices.
Visual Concepts
Option 1: Minimal adaptation – low change, low complexity.
Option 2: Modern gradient – medium change, balanced complexity. (Selected)
Option 3: Bold disruption – high change, high complexity.
Restructuring the website to align with the new brand, improve content discoverability, and create a foundation for scalable digital growth.
3-Step Process
Discover – Competitive benchmarking, content audit, solution architecture.
Design – Unified information architecture, restructured content blocks.
Execute – Wireframes, responsive designs, and handoff.
Competitive Insights
Benchmarked 27 utility providers globally.
Evaluated against 5 CX pillars: Connected Experience, Sustainability, Customer Control, Affordability, and Support.
Created a unified, reusable component library for mobile and web, ensuring design consistency, faster delivery, and easier handoff to development.
Key Deliverables
35 reusable components covering all major UI elements.
Design tokens for typography, color, spacing, and interaction patterns.
Documentation in Zeroheight for developer access.
Governance model to maintain quality across future releases.
Impact
Reduced design-to-dev iteration cycles.
Enabled 30% faster delivery for future features.
Simplified multi-language support (English & Arabic).