🇪🇦 Puedes encontrar una versión de este caso de estudio en español en este link
Background
There was a moment when the Telefónica design team realized that the needs of our project and product demanded to have a design system. The goal was to share a common language of visuals codes, interaction and, at the same time, a standardized and agile way of construction.
At that moment, Telefónica was changing from being a "classic" Telco to offering new digital products and services in different lines of business. This change required us to comprehensively analyze our workflow and the processes to get optimized our environment for the new vision of the company.
Understand the problem
In addition to analyzing our way of working it was necessary to check all visual elements that we were using. During this review we discovered that there were many differences between elements that should be part of a common and coherent design language within the ecosystem of Telefónica products and services.
Screens of the previous analysis prior to the design system. Image
Some of these elements that did not maintain adequate consistency were isolated components, fonts, shapes, spaces, colors or iconography, among others. These elements were treated differently and weren't shared by the design and technology teams that were in charge of it.
On the other hand, we realized that the biggest job was to maintain these elements independently by each of the teams. In terms of user experience and brand image, the perception was really different and inconsistent. Furthermore, this slow way of working caused us to repeatedly address the same problems and similar needs with different stakeholders.
Therefore, the goals was to create a common digital design system for Telefónica. This would force us to rethink our workflows and optimize it, in order to reduce the time to market, to improve the user experience and to give consistency to our products.
Main goals of design system
Eficiency and agility in the creation of services and digital products
Optimized and defined processes
Consistency between products
Components adapted to web and native
Coordinated work between design and development
Clear and update documentation
A system of global improves and upgrades system
Defined patterns of interaction and comunication with the user
Global and consistent experience with the entire product ecosystem
Mística is an open and collaborative design system. It is a common design language that provides tools and resources to offer a consistent digital experience across the entire ecosystem of products and services that Telefónica offers.
Main advantages of our design system
With Mística we ensure that all products and services have a clear consistency and as a result, it provides us an adequate user experience.
A design system is a living project that receives continuous updates and improvements according to the needs of the product and the teams.
Our system reduces design and development times in order to dedicate more time to product improvement and evolution.
Mística is built with native components for Android, iOS and Web.
The design system consists of three types of libraries:
Platform libraries They are base libraries of components and elements without brand or white brand. This means we can build screens that will later be branded according to product needs.
Brand libraries These are the libraries that contain all the brand elements, such as colors, that make the product adapt to the needs of each brand or country.
Icon libraries This library provides a wide collection of icons that can be used in different parts of the product as needed.
The design system is made up of three types of libraries. Image
Also Mística provide of the next resources for design:
Native fonts (Roboto and San Francisco) and Telefónica's own font.
UI kits with all components by category and screen templates.
Camilo Plugin, which allows to change the components and elements of system between brands. This plugin for Sketch was developed internally by Pablo Sánchez, Head of the design team.
And in addition, our design system has some resources to directly test the components live and thus understand how they work and their interactions depending on the device:
Storybook with the entire catalogue of components in React.
Playroom, that allow us to quickly make interactive prototypes with a multitude of templates and screen sizes.
Elements of the system
Fundamentals Within Mística, the basics elements are defined as those commons to the entire system that allow us create components. In this category we include elements such as color constants, fonts, spaces or type of shadows, among others.
Furthemore, within these basics elements we include the design principles that guide us to build the product correctly and aligned with the design objectives.
Examples of application of the text-presets. Image
Components We defined the components as those elements that have own entity and may o may not be composed of the other more basic elements. These components are used to create the different parts of a screen.
Components are normally defined and documented according to their use, structure and behavior.
From the Core design team it is encouraged the help and participation of the all the colleagues (designers or not) in the design system. For this, different ways for the contribution to Mística were defined.
Components request If it is necessary to add a new component, the need to add it should be considered, if it is reusable in other places and if it will finally be integrated into Mística or will remain as a bastard component (built with the system but not within it).
Icon request The process is similar to adding a new component, but it has its own characteristics. It's explained in detail in this case study.
Modify a existing component A component can solve a need today but can be modified or improved in the future depending on its purpose.
Report a bug Generally, errors can be found in a continous improvement process. If someone finds an error in any element o component of the system, it is convenient that this is reported as soon as possible to be solved for the benefit of the team.
All the processes start creating a ticket in GitHub or Jira with the specific needs and tracking the steps to follow through it.
The design system Mística is a solution to the complex challenge of building and designing for a multitude of digital products and services that can vary by brand, platform and country. Providing tools and resources to different players so that they have a common and consistent language.
During my experience helping to create Mística, I have verified that not only has it helped us as a team, but has also contributed to making Telefónica's digital experience more attractive, coherent and accessible. It has improved communication between teams and has united us in a common interest, in addition to optimizing processes and being able to dedicate more time to the improvement and evolution of the product.
On a personal level, Mística has allowed me to learn what it is to create a design system out from scratch that allows different professionals to communicate, document it so that everyone has a clear and accessible reference in case of any doubt; and understand the needs that different teams may have even if I have not lived them.
Teamwork
The main responsability that this project has been a success and continues to be so is responsibility of Álvaro Millán as team leader and Ignacio Ceballos as main designer. Their valuable technical work and organization have been one of the main pillars on which this work is based. They knew how to guide and organize a design team in which there were also great professionals such as Héctor Sancho, Pablo Prada, Miguel Diéguez and Pablo Sánchez.
.png)
.png)