Mística Design System
ūüá™ūüᶠ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
Cover of the design system in BrandFactory.
Mística, the digital design system of Telefónica
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
The design system consists of three types of libraries:
The design system is made up of three types of libraries. Image
Also Mística provide of the next resources for design:
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:
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.
Example of the color constants of Movistar. Image
Typography and breakpoints of screens. Image
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.
Buttons design specs. Image
Lists design specs. Image
Contribution
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.
All the processes start creating a ticket in GitHub or Jira with the specific needs and tracking the steps to follow through it.
Mística in Github. Image
Conclusion
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.
Tool used
Quique Ciria ‚ÄĘ 2021 ‚ÄĘ info @ quiqueciria.es