<aside> 🇪🇸 Puedes encontrar una versión de este caso de estudio en español en este link.

</aside>

Background

There's a constant need of creating new icons, updates and support while developing of the apps of Telefónica. These assets are fundamentals in multiple flows and screens across different apps. In addition, it's essential that these icons reflect the brand image and harmonize to the rest of components and actions.

Some icons of Mística icons.

Some icons of Mística icons.

Details of icons in different contexts.

Details of icons in different contexts.

On the other hand, internally in the design team, each designer works autonomously but coordinated and together with their product team; and a development team works in a agile way, with established standars and definitions, so it was neccesary to homogenize a process and define patterns for the icons at a global level.

This project was born with the need to create a design system (Mística) that supported the entire ecosystem of digital products and services of Telefónica company. The idea was to have an icon library to support this design system.

Before this, each brand worked independently, with multitude of designs, patterns and work processes in each team.

Understand the problem

To move steadily from the current situation it was important to establish a series of priorities to achieve the objectives, from the most generic one to the most specific. The idea was to create a stable base on to build the entire system. This meant that we would have to work simultaneously with two different systems of icons during a period of time and two different workstreams until we got to a point of no return, where we shifted to the new one. Thus this process took a while, it coexisted with the rest of projects and was adapted according to the situation.

First steps in the project.

First steps in the project.

In general, we can say that the first thing was to establish some style guides, which would help us to give consistency to the creation from that moment on. A common library, where to centralize all the assets that exist to begin to refine them and organize them by tasks. And on the other hand, in parallel a workflow would be documented from the design perspective (creation and use) and another process for the development team (production). With these three parts we would begin to give consistency and logic to all the assets we used.