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.

etisalat_design_system_001

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.

etisalat_design_system_085
etisalat_design_system_083
etisalat_design_system_084

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.

etisalat_design_system_002
etisalat_design_system_004
etisalat_design_system_003

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. 

etisalat_design_system_006
etisalat_design_system_007
etisalat_design_system_008
etisalat_design_system_009
etisalat_design_system_010
etisalat_design_system_011
etisalat_design_system_012
etisalat_design_system_013
etisalat_design_system_014
etisalat_design_system_015
etisalat_design_system_016
etisalat_design_system_017
etisalat_design_system_018
etisalat_design_system_019
etisalat_design_system_022
etisalat_design_system_020
etisalat_design_system_021
etisalat_design_system_023
etisalat_design_system_024
etisalat_design_system_025
etisalat_design_system_026
Etisalat-Compass-028
etisalat_design_system_028
etisalat_design_system_029
etisalat_design_system_030
etisalat_design_system_031

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.

etisalat_design_system_033
etisalat_design_system_050
etisalat_design_system_049
etisalat_design_system_032
etisalat_design_system_041
etisalat_design_system_035
etisalat_design_system_046
etisalat_design_system_047
etisalat_design_system_044
etisalat_design_system_039
etisalat_design_system_043
etisalat_design_system_048
etisalat_design_system_034
etisalat_design_system_040
etisalat_design_system_051
etisalat_design_system_042
etisalat_design_system_036
etisalat_design_system_037
etisalat_design_system_038
etisalat_design_system_045

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.

etisalat_design_system_053
etisalat_design_system_054
etisalat_design_system_055
etisalat_design_system_065
etisalat_design_system_064
etisalat_design_system_063
etisalat_design_system_060_2
etisalat_design_system_059
etisalat_design_system_058
etisalat_design_system_057
etisalat_design_system_061
etisalat_design_system_052
etisalat_design_system_056
etisalat_design_system_062

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.

etisalat_design_system_066
etisalat_design_system_067
etisalat_design_system_068
etisalat_design_system_073
etisalat_design_system_069
etisalat_design_system_072
etisalat_design_system_070
etisalat_design_system_081
etisalat_design_system_082
etisalat_design_system_079
etisalat_design_system_074
etisalat_design_system_080
etisalat_design_system_078
etisalat_design_system_075
Etisalat-Compass-091
Etisalat-Compass-092
etisalat_design_system_077

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.

Etisalat-Compass-059

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.

etisalat_design_system_086

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

Clube FIIDesign Direction, UX, Design System, Product Design, Branding

Good Move Dubai AppDesign Direction, Product Design, UX, Advertising

C-Me AppDesign Direction, Product Design, UX

Starbucks Sales ToolkitDesign Direction, Mobile App

© Leo Ehrlich 2020