Background

Durante el desarrollo de las aplicaciones de Telefónica hay una necesidad costante de nuevos iconos, actualizaciones y soporte. Estos assets son parte fundamental en multitud de flujos y pantallas de las diferentes aplicaciones. Además, es fundamental que estos iconos reflejen la imagen de marca y sean percibidos de forma complementaria y armónica con el resto de componentes y acciones.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0db3b5ea-0a61-423b-9508-0de1d608f3e9/icons-one.png

Algunos assets de Mística icons.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04651551-41c5-4b5e-be2b-bc69c4f8eed7/icons-details.png

Detalle de los iconos en diferentes contextos.

Por otro lado, de forma interna en el equipo de diseño, cada diseñador trabaja de forma autónoma pero coordinada y junto con su equipo de producto; y un equipo de desarrollo que trabaja de manera ágil, con estándares y definiciones establecidas, por tanto era necesario homogeneizar un proceso y definir unos patrones para los iconos a nivel general.

Este proyecto nace junto con la necesidad a la vez de crear un sistema de diseño (Mística) que de soporte a todo el ecosistema de productos y servicios digitales de Teléfonica. La idea era contar con una librería de iconos que de servicio a este sistema.

Antes de esto, cada marca funcionaba de manera independiente, con multitud de diseños, patrones y procesos de trabajo en cada equipo.

Comprender el problema

Para avanzar de manera firme desde la situación en la que estábamos era importante establecer una serie de prioridades para ir cumpliendo objetivos, desde lo más general a lo más específico. La idea era crear una base estable sobre la que construir todo el sistema. Ello implicaba que tendríamos que convivir un tiempo con dos sistemas de iconos y dos procesos distintos de trabajo hasta llegar a un punto de no retorno, en el que hariamos el cambio definitivo. Por tanto, este proceso duro un tiempo, convivió con el resto de proyectos y se fue adaptando según la situación.

priorities.png

Primeros pasos en el proyecto.

De forma general, podemos decir que lo primero fue establecer unas style guides, que nos ayudarían a dar consistencia a la creación desde ese momento. Una librería común, donde centralizar todos los assets que hay para empezar a refinarlos y organizarlos por tareas. Y por otro lado, paralelamente se documentaría un workflow desde la perpectiva de diseño (creación y uso) y otro proceso para el equipo de desarrollo (producción). Con estás tres partes empezaríamos a dar consistencia y lógica a todos los assets que usábamos.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/86909010-b5b6-45a8-a7cb-b07547cecad4/icon-process-2.png

Capturas de diferentes partes del proceso. Style guides, workflow y repositorio.

Objetivos principales