Facilitando el proceso de co-creación: Aproximación a un sistema de diseño con ilustraciones como elemento base
Definir y sentar los tokens de un sistema de diseño, generalmente se realiza para establecer las bases, los límites y los elementos fundacionales para crear productos digitales que mantengan la herencia y coherencia de la marca a través de cualquier plataforma. Los tokens son pequeñas piezas o átomos que componen un sistema de diseño. En un DS se crean los componentes y sus variantes, se definen los estilos gráficos, set de iconos y paleta de colores para mantener una consistencia gráfica transversal, en la diversidad de productos y en los distintos dispositivos.
En LATAM Airlines se trabajó en la creación de un nuevo sistema de diseño, que facilitara la co-creación y desarrollo de productos digitales, para alcanzar una consistencia visual que abarque todos los momentos del journey del pasajero.
Al contar con esta primera versión de sistema de diseño, avanzamos junto al equipo de VDs, UX Coaches y UX Writers en la creación de una propuesta que considerara las bases y tipos de uso de las ilustraciones. En la mayoría de los productos digitales, el uso de un set de iconos es un estándar para elevar el affordance de los botones, o para resaltar mensajes por sobre párrafos extensos, o también, para señalar secuencia de acciones a realizar en una pantalla.
Los iconos son un recurso gráfico que aporta un ancla visual en la construcción total de una interfaz, pero en ocasiones este uso es limitado, o se sobre utiliza, por lo que cuando observamos varios iconos en un espacio reducido, finalmente se satura el uso y su objetivo. Así en vez de ser un elemento con un rol destacador o de reconocimiento, pasa a un segundo plano.
El valor de las ilustraciones
Cuando los iconos, colores, fondos y fotografías no son suficientes para entregar el mensaje que deseamos comunicar, o no logramos obtener una identidad gráfica única y reconocible, las ilustraciones aparecen como un elemento gráfico que puede aportar y reforzar la entrega del mensaje. Las ilustraciones dan forma a una nueva conexión con la marca, a través de consolidar un nuevo estilo gráfico, y se vinculan con el relato creando una imagen robusta y memorable.
Las ilustraciones son un recurso gráfico que proporciona personalidad e identidad a una marca, y pueden utilizarse en interfaces clave para hacer énfasis o complementar el mensaje. Esto puede ocurrir en el lanzamiento de un nuevo producto, en la incorporación de nuevas reglas de negocio, apertura de nuevas rutas o mercados, o en el onboarding de una nueva aplicación.
Primeras definiciones
Para comenzar la creación de este set de ilustraciones, desde la unidad mínima (átomo) hasta la construcción de escenarios completos (moléculas y organismos), hicimos un levantamiento y mapeo de las actuales ilustraciones en el sitio y el objetivo primario de cada una de ellas. De esta forma establecimos categorías de ilustraciones para crear clusters en base a conceptos fuerza.
Como equipo debíamos responder a las siguientes interrogantes:
- ¿Qué objetivo tiene el uso de estas ilustraciones?
- ¿Qué queremos comunicar al emplearlas?
- ¿Cuáles son las principales diferencias entre ellas?
- ¿Cómo se reconocen y se agrupan entre sí?
- ¿Cuándo se deben utilizar? Los dos y don’ts
Con el resultado completo de este mapeo, identificamos cuatro agrupaciones principales que tienen directa relación con el contexto del pasajero, desde una etapa temprana, como la búsqueda de vuelos hasta la etapa del día del viaje y su culminación.
Categorías de ilustraciones
Cada una de estas categorías, tiene un objetivo comunicacional y según ese objetivo es cómo construimos la totalidad de las ilustraciones. Para el caso de las inspiracionales, por ejemplo, queríamos crear escenarios que evocaran los viajes, con una paleta de colores viva con foco en las personas y contextos de descubrimiento.
Para esto hicimos bosquejos de diversos escenarios, que se asocian a los viajes turísticos y en estas ilustraciones utilizamos full color en tamaños apaisados, con resoluciones de 1920x1080px, para utilizar como el foco visual de esas pantallas. El rol de estas ilustraciones es ser el elemento principal, queremos que se vean y se aprecien los detalles en su totalidad. En estos casos, no se aplican máscaras o recortes porque nos parece que el valor de estas imágenes radica en su conjunto.
En el caso de las ilustraciones de la categoría “decorativas”, su uso es más limitado en cuanto al espacio, y establecimos una paleta duotono para que la interfaz lograra un balance entre contenido, acción o task e ilustración. La paleta duotono se construye con una escala de 10 tonos de índigos más otras tonalidades de coral con menos saturación, lo que aporta imágenes menos llamativas, pero que apoyan visualmente el relato. Además, tomamos la decisión de que este tipo de ilustraciones no empleara fondos de color y se integraran al blanco del canvas.
En la categoría de ilustraciones que apoyan instrucciones, agrupamos todas las imágenes que explicaban un proceso o tarea determinada. En este grupo se encuentran las ilustraciones isométricas que facilitan la comprensión de información crítica como por ejemplo: volúmenes de equipaje, grupos de embarque, self bagtag, uso del kiosko en aeropuerto, filas de asientos y equipaje sobre dimensionado.
En el último grupo se encuentran las ilustraciones informativas, y comprende a todas aquellas que hacen más digerible la data de cara a nuestros usuarios. Aquí hacemos uso de gráficos, tablas, comparativas, zoom a datos u objetos clave dentro del flujo de nuestros pasajeros. Este tipo de ilustración no es decorativo, ya que la imagen cobra un rol protagónico para la comprensión del mensaje.
Construcción de unidades o átomos
Para crear las unidades independientes, realizamos sesiones de visita a aeropuertos en Chile, viajes en avión y observación en salas de embarque para identificar las posturas, gestos, objetos y equipaje que interactúan en estos contextos.
Escalamiento
Para la creación de escenarios con sumatoria de unidades, ilustramos unidades mínimas (átomos) que se podían vincular entre sí para crear contextos más complejos. Las ilustraciones con uso completo de la paleta de colores, las reservamos para la categoría “inspiracional”. En cambio, para las otras categorías decidimos que tuvieran un tamaño más reducido y su uso de color fuese más restringido para mantener imágenes más sobrias, que no compitieran con las principales acciones que se deben alcanzar en estas interfaces. Necesitamos acompañar, pero no distraer.
Ejemplos de uso
Luego de que diseñamos todo el set de ilustraciones (el cual sigue creciendo y evolucionando al igual que un Design System), establecimos los tamaños mínimos y máximos de uso, y en qué casos se deben incorporar.
Si bien nos parecen muy atractivas las ilustraciones full color que tienen una historia que contar y en las cuales interactúan múltiples personas, objetos y escenarios, debemos limitar su uso para que el rol para el que fueron creadas se mantenga consistente.
5 aprendizajes clave en la creación de ilustraciones
Esta aproximación a un sistema de diseño con foco en las ilustraciones, nos ha dejado varios aprendizajes desde que comenzamos con los primeros bosquejos e ideas hace ya algunos meses. Aquí listo, las más relevantes:
1. No es tarea o responsabilidad de un solo diseñador
Mi primer consejo para todos los equipos que están pensando en desarrollar ilustraciones, es que no dejen las ilustraciones en la mano o responsabilidad de un solo diseñador o ilustrador. Configuren un equipo que pueda construir y consolidar una identidad única que le entregue personalidad a la marca, y en dónde todos tengan espacio y confianza para aportar.
2. Integrar herramientas colaborativas y organizar sesiones de feedback
Al diseñar las primeras piezas como objetos, caracteres, rostros, gestos, plantas etc., integren herramientas colaborativas para recibir feedback de todos los involucrados en el proyecto. Pueden utilizar Mural, Miro o el recién estrenado Figjam de Figma. Abran la conversación a recibir comentarios, e iterar las versiones para que logren aunar visiones. También pueden crear grupos en Slack para sumar otro espacio de conversación ya que no a todos les acomoda dar opiniones o sugerencias en vivo.
3. Incluir diversidad de roles y perspectivas
Para la recolección de comentarios y mejoras, no solo inviten a participar a diseñadores o VDs, la conversación debe incluir y considerar otros roles como UX Writers, personas vinculadas a marketing, branding, storytelling y Leads. Si alguien fuera del rol de UX/UI señala que las ilustraciones no se comprenden, o que el mensaje genera confusión, seguro hay algo que no encaja o cierra totalmente en ellas, por lo que es necesario hacer una revisión.
4. Limiten, limiten y limiten.
¿Qué significa esto? Creen definiciones claras con respecto al uso de las ilustraciones, para que cuando el equipo deba utilizarlas tenga absoluta claridad y certeza de los objetivos y posibles usos de cada una de ellas. Si todos te preguntan, ¿qué ilustración debería ir aquí? ¿De cuál estilo? Probablemente tus decisiones y definiciones no han sido del todo claras o aún no se han determinado, lo que abre espacios de incertidumbre a otros integrantes del equipo.
5. Definan su peculiaridad en las ilustraciones.
¿Qué significa esto? Establezcan un atributo o rasgo que sea único en sus ilustraciones. Así como Los Simpsons son amarillos en todos sus personajes, los Osos Escandalosos representan a osos con un trazo lineal en color negro como borde, o El Increíble mundo de Gumball que despliega escenarios con fotografías reales, y sobre ellas se sitúan los personajes dibujados. Todos estos ejemplos tienen una particularidad que los destaca. Si quieren crear ilustraciones memorables, identifiquen su singularidad y que ese rasgo, sea el patrón a seguir para diseñar.
Por último y no menos importante, un sistema de ilustraciones al igual que un sistema de diseño, es un organismo vivo y en constante evolución. Un escenario ideal es iterar y volver a iterar las ilustraciones, para que no solo se realicen ajustes y mejoras en cada versión, sino también para incorporar nuevos caracteres, escenarios y objetos.
Espero que este post entregue inspiración y algunas guías para la creación de ilustraciones, y se sumen cada vez más productos digitales a exponer una línea gráfica original y propia. Cómo dice Blush en su sitio web, cuenta historias con ilustraciones.
