mystc 5: Reshaping saudi main telco
Service:
UX/UI, Research, Development
Client
stc, Saudi Arabia
Field:
Telco
Year:
2024-25
Timeline:
pj Overview
stc, the leading telecommunications provider in the Middle East, has been a key partner of frog for over a decade. As part of our most recent collaboration, we redesigned their entire B2C digital ecosystem—spanning six customer touchpoints, a unified design system, and a refreshed brand identity.
I was responsible for leading the design system delivery and shaping critical UX/UI experiences across the suite of products. The project ultimately reached more than 25 million users, while also strengthening stc’s brand presence across digital platforms. Delivered in close collaboration with stc’s in-house teams, the outcome was a cohesive, high-fidelity, market-ready product that elevated both usability and brand perception.
Led design system delivery and key UX/UI for stc’s B2C digital ecosystem redesign (6 touchpoints + brand identity).
Collaboration with in-house designers and developers resulted in a high-fidelity, market-ready product.
Impact: 25M+ users reached | €3M+ project value | strengthened digital brand presence.
Users Reached (Mln)
Cost (Mln)
N of screens delivered
Research: What was blocking success?
The project brought together a distributed team across Italy, India, Ukraine, France, Spain, and Saudi Arabia. Over 37 weeks, we followed a structured plan designed to clarify expectations, define the vision for the new product, uncover challenges, and set creative directions.
We kicked off with an on-site collaborative workshop, aligning on objectives and opportunities. This session involved 21 stakeholders from across stc’s departments, complemented by stakeholder and user interviews to capture a comprehensive picture of the company’s ambitions for the redesign.
To better understand customer needs and perceptions, we conducted in-depth interviews with stc users. Insights from these conversations, combined with immersion activities, helped us shape the new mystc value proposition and identify key opportunity areas.
We then tested early design directions through research with both existing and prospective users. The findings highlighted major pain points: low engagement, limited customization, and a complex interface. The existing UX lacked brand expression, innovative features, and intuitive navigation.
To reimagine the experience, we explored external benchmarks and developed 12 forward-looking concepts. These were presented in a co-creation workshop with the client, enabling us to prioritize ideas, assess their impact, and define the most promising directions for both users and the business.
We developed three creative directions for stc’s digital brand, building on the existing brand guidelines while addressing the evolving needs of users. Each direction was explored through wireframes and presented to the client for discussion. Following evaluation, one solution was selected as the preferred path forward.
from ideation to delivering a ready-to-market product
The detail-design phase spanned 20 weeks, during which we established clear team responsibilities, tools, and technologies. To streamline collaboration, we introduced integrated Design and Development Ops. The project was managed on Jira, with dedicated boards set up to support designers and developers working in agile sprints.
We began by mapping both existing and desired functionalities, prioritizing them to define the MVP. Once the creative direction was set, we designed the key screens and flows that shaped the app’s core structure—reimagining the user experience across platforms, story by story.
With the main screens and visual direction in place, we shifted focus to building the Design System. I led the multi-touchpoint Design System track, ensuring it supported both RTL and LTR (Arabic) documentation for maximum flexibility. Together with designers and developers, we developed system components for iOS, Android, and responsive web.
In this role, I owned the communication between design and development teams, while coordinating a junior designer who supported the delivery, and an external Arabic designer who helped refine RTL-specific components. This collaboration ensured consistency, adaptability, and a production-ready system.
The entire Design Language System (DLS) was documented on Zeroheight, creating a single source of truth that centralized all designed and developed components for easy access across teams.
The DLS and its coded frontend components deliver long-term value, scalability, and a seamless developer experience by:
Driving consistency across touchpoints and product evolutions.
Maintaining quality throughout the design–development workflow with automated handovers.
Establishing a single, reliable reference for developers.
The system was implemented with coded components for iOS (Swift, SwiftUI), Android (Kotlin, Jetpack Compose), and Web (React), following best practices in each stack to ensure clean architecture and maintainable code. These components serve as high-fidelity implementations of the design system, integrated with design tokens exported directly from Figma, and unified through a shared UI API.
To maximize adoption and efficiency, the components were progressively refined based on continuous feedback from stc’s web and mobile development teams. This ensured the DLS not only captured design intent but also became a practical accelerator for application development and UI delivery.
the final product
The new mystc enables deeper engagement, more powerful sales strategies, and truly elevated digital experiences.
Unlike the previous version, which was designed primarily for core telco customers, the new mystc extends its reach to prospective users and in-store customers, with tailored experiences for each profile.
The experience introduces immersive, personalized content that drives engagement through video and dynamic customization. Key innovations include:
Dynamic Home: an adaptive layout that personalizes content based on user profiles.
Interactive Stories: animated, offer-driven content designed to engage users in playful, intuitive ways.
Brand-coherent UI: a visual system that ensures consistency and a strong sense of identity throughout the entire journey.
A major transformation was applied to the Store, now open to both users and non-users. It delivers highly customized journeys and a redesigned Product Discovery UX, making it easier to browse, compare, and save products. The Cart has been reimagined to handle all product types—physical, digital, stc services, and new lines—with seamless payment options including cash, loyalty points (Qitaf, Tamayouz), or a combination.
To ensure users are always supported, mystc 5 integrates an agentic AI assistant, guiding customers through product discovery, troubleshooting orders, and providing chat-based support.
We also redesigned the Line Hub, a critical feature for telco users. Previously cluttered and number-heavy, it was simplified into a dashboard-like interface with widget-based controls, offering at-a-glance insights and actionable options for managing lines and data.
Finally, we reimagined the loyalty program to be more immersive, rewarding, and fun. The new section invites users to track their progress toward rewards such as discounts or tier upgrades, while partner offers are seamlessly integrated into the app. To enhance personalization, we introduced tier-based UI themes—such as Tamayouz mode—allowing users to visually tailor the app as they progress.
