Context
Mobily (Etihad Etisalat Company) is a major Saudi Arabian telecommunications provider established in 2004. It launched commercially in May 2005 after breaking a local wireless monopoly, and today it offers mobile voice, high-speed internet, fixed-line, fiber (FTTH), and data center services to individual and business customers.
A selection of screens designed during my time at Mobily.
Building Before AI
This was years before AI became part of everyday design workflows.
Every feature started with conversations. We wrote user stories, mapped user journeys, sketched ideas, created wireframes, tested concepts, and gradually transformed them into polished interfaces using Figma.
Nothing was generated.
Every screen, every component, every interaction was designed by hand.
Looking back, it was one of the best ways to learn product design because every decision forced you to think before you designed.
My Role
As Senior Product Designer, I helped the company transition from a traditional product to a modern, user-friendly digital experience. I took a hands-on approach to building our new design system from scratch and mentored a junior designer through the process.
My responsibilities included:
- Design System Management: closely guided the step-by-step building of the new design system from scratch to ensure quality and consistency.
- UX Strategy: defined the overarching user experience strategy to guide the modernization effort.
- User Flows: designed seamless, intuitive user journeys across platforms.
- Visual Language: established the new visual language alongside the design system.
- iOS App Updates: contributed to the update and modernization of the entire iOS application.
- Web Refresh: modernized the web platform's look, feel, and overall aesthetic.
- Mentorship: acted as the primary mentor to a junior designer, providing hands-on guidance and direction.
New Design System
We built the new design system across all levels of Atomic Design — from atoms, molecules, and organisms to full templates and pages — while ensuring every component fully supported the Arabic language (right-to-left localization).
While my colleague focused more on the operational side of things (such as tokens, variables, and naming conventions), I concentrated heavily on the UX and UI execution of these components.
Our design system components needed to fully support the Arabic language, requiring careful implementation of right-to-left (RTL) localization across every element to ensure a native, seamless experience for users.
We built the new design system across all levels of Atomic Design — from atoms, molecules, and organisms to full templates and pages.
Limitations & Challenges
Transitioning a large-scale company like Mobily to a fully digital and modern experience could not happen overnight. We lacked total creative freedom when building components, as we were visually constrained by existing designs to ensure the visual identity did not change too drastically at once.
Working within these tight guardrails deepened my respect for the legacy product and existing brand equity, teaching me how to innovate within constraints and find creative ways to push the experience forward without disrupting user familiarity.
Impact
During my time, the system was not launched yet; however, we turned around the existing designs to be more modern, usable, and relatable to customers. We were limited by legacy branding and infrastructure, so the change was not super drastic. Yet, we set a solid foundation for the digital transformation and future evolution of the design system.