Etisalat Design System

Redesigning the biggest telecom in the middle east

About the Project

1 year and a half working in this project, “Compass” is the Design System that I created for the biggest telecom and company in the United Arab Emirates, Etisalat.

My Role on the Project

I was invited to join the Etisalat Design Studio through the company Fjord ( part of Accenture ) and my role was to lead the design system efforts and all the visual design delivery that was being done in the studio, leading a team of about 8 people at times, and working with all the design teams that were redesigning each product making sure everything was aligned with the company's vision.

The Problem

In 2016, Etisalat didn't have a design system. If you went to all their digital products, they all looked different from each other, not only in terms of visuals but also in the experience. The company needed a team to bring all the digital products together into a seamless experience. That's why they created a new department inside the company called: "Etisalat Design Studio". The goal was to take the basic existing brand elements ( logo, typography and color ) and redesign all the digital products from scratch, with the ambition that each product would link seamlessly to the same design system using the same components and UX patterns.

The Design System

We created a library of assets, components and modules, where each element was carefully named, documented and translated from design to code with all it’s interaction states and animations. We also produced custom photography, illustrations, icons and patterns. We even created a website to promote the design system with all the stakeholders. The website explained all the principles and rules behind the design system. On top of that we designed a comprehensive number of infographics to be utilized across the projects. This design system helped saving thousands of hours from the design and development team.

The Mobile Products

We designed different kinds of apps, such as the "My Etisalat App", the primary app where users could check their bills, usage and settings, "Etisalat Smiles" a loyalty app where users could exchange points into services, a digital wallet where users could send money to family or friends and a full streaming entertainment service where they could watch TV or rent movies.

The Web Products

We designed 55 modules for the web. Those modules were plugged into a content management system ( CMS ) where a content team could quickly create new pages by choosing which modules would go on each page, choose their order, and even change variations for each module, in order to accommodate the right content. The CMS was also dynamically connected with a photo and icon library, making it easy for the content managers to choose the right visuals dinamically while our team would grow the media library. Apart from the modules, we designed different portals, such as the e-commerce, customer support, enterprise and loyalty program.

The Retail Products

At the retail shops, we designed the ATM machine, where customers could pay their bills, send money or even buy a sim card. We also designed different screens across the shops, where customers could buy a device or a plan or just browse and play while they are waiting.

The UX Process

There was a dedicated UX team responsible for conducting user research, service design blueprints, and journey maps. We hired external companies like RBBi and Hall & Partners to organize and conduct usability tests every 2 weeks during a product development sprint and for each test we received a complete report with all user feedback and recommendations on how to make the user experience better.

The design system made the UX team's work much easier to prepare the prototypes to deliver for testing, and also to deliver the assets to the development team. Before the design system, the UX team was using specific tools to create wireframes. After the design system, the UX team was able to create wireframes directly on the sketch app using the final components. We also had a dedicated scrum master, implementing an agile methodology through the design process of each product.

The Outcome

As of today, new and existing customers have the same experience when they browse the websites, the apps or go to a retail store to buy a product or service or pay for a bill. The design system impacts more than 12 million customers, and more than 10 million non-customers yearly, saving millions of dollars of implementation and increasing the client satisfaction and retention.

Many Thanks to

Kenneth Lindfors, Linda Sessa, Guilherme Rodrigues, Oli Shaw, Daniel Bosch, Gamze Gurbuzatik, Luisa Trogu, Vilja Helkiö, John Dichoso, Luca Landin, Adnan Ahmed, Uras Gulbiter, Carl Unnerman, Xavier Lopez Sanchez, Rajeev Hari, Umar Saleh, Onur Oral, Suzanna Awal, Neoseen Studio, Cihan Gelerli, Beto Garza

More Projects