Cómo contribuí en la creación de Cardano, un nuevo design system para Lloyd's of London

 

Lloyd's of London existe desde hace cientos de años y si bien su negocio siempre ha estado a la vanguardia del mercado mundial de seguros, sus plataformas digitales no siempre habían alcanzado el mismo nivel de éxito.

La velocidad a la que funciona el mercado y la forma en que Lloyd's lleva a cabo sus negocios dieron como resultado una gran cantidad de interfaces y productos diferentes (y muy poco consistentes) dentro del ecosistema digital de la empresa. Gracias al nuevo enfoque propuesto por el programa Future at Lloyd's, estos problemas han quedado ya en el pasado.

 

 

El proyecto en pocas palabras…

 

EL OBJETIVO

Como pieza clave de la estrategia implementada por el programa Future at Lloyd's, Cardano nació para aportar más claridad, gobernanza y eficiencia al ecosistema digital de Lloyd's. Para hacerlo, tuvimos que pensar en un nuevo enfoque sistemático del diseño, que proporcionara una fuente única de componentes, patrones y estilos que ayudaran a unificar todas las experiencias en sus productos digitales, haciéndolos consistentes visualmente para que formaran parte de un mismo ecosistema digital.

EL ENFOQUE

Cardano necesitaba dar soporte a todos los equipos que formaban parte del Programa de Transformación Digital y, literalmente, establecer los estándares para la interfaz de usuario en sus productos. Para ello, tomamos productos existentes, identificamos sus necesidades y las de los diseñadores que trabajaban en ellos, y diseñamos componentes y patrones que los resolvieran. Necesitábamos hacerlo ofreciendo cierto grado de flexibilidad debido a naturaleza diversa de los productos digitales en Lloyd's, asegurándonos de que nuestro trabajo fuera escalable, future-proof y que fuera fácil de adoptar.

MI RESPONSABILIDAD

Como diseñador de producto, trabajé en la conceptualización, desarrollo y mantenimiento del design system y sus componentes, así como en el cuidado de la documentación y guías de estilo. También actué como abogado del design system en toda la empresa, promoviendo los beneficios de su uso entre los equipos y stakeholders, ayudándolos a adoptar el sistema y mostrándoles cómo funcionan y deben usarse los componentes.

 

“Cardano es más que una caja de herramientas o una biblioteca de patrones. Es un producto en constante evolución, respaldado por una comunidad que sirve a las disciplinas de diseño y desarrollo dentro de Lloyd's”. 

– Premisa del equipo del Design System

01. Una muestra de los tokens de Cardano, incluidos los layouts, colores, íconos, tipografía y sistema de espacio.

02. Tabla de variantes del componente 'Campo de texto'

 
 

03. Una vista general de la página con la documentación de los botones.

 



04. Descripción general del proceso de creación de componentes.

 

Un poco más sobre mis responsabilidades en Lloyd's

 

Debido a mi formación dentro del campo del diseño de información, siempre me he considerado una persona muy minuciosa, con mucha atención al detalle, un buen ojo para el pixel-perfect design y alguien a quien le gusta mantener sus archivos de diseño limpios y ordenados. Sin embargo, el trabajo que realicé mientras trabajaba en Cardano me enseñó que es necesario pensar en cada detalle (por pequeño que sea) si quieres evitar que un sistema se desmorone.

Al diseñar un componente, necesitaba asegurarme de que se tuviera en cuenta cada pequeño detalle (color, espaciado, tipografía...), de lo contrario significaría que no sólo el componente no cumpliría con los estándares en mis archivos, sino también en los archivos de más de 40 diseñadores y cientos de desarrolladores.

“La documentación es tan importante como nuestros diseños”

Además de diseñar componentes, otra de mis responsabilidades incluía proporcionar documentación que explicara meticulosamente mi proceso de pensamiento y las decisiones detrás de mi trabajo de diseño. Esto no sólo ayudó a otros diseñadores a comprender cómo utilizar y adoptar los componentes que creé, sino que también contribuyó a desarrollar la forma en que el diseño debería comunicarse y entregarse en Lloyd's of London.

05. Cardano utiliza su propio sitio web, Storybook y Confluence para alojar el diseño, el código y la documentación del sistema de diseño.

¿Y qué pasa con la gobernanza?

 

“¡Ah! ¡No te preocupes, aquí tienes un componente recién salido de la cocina!

Cuando creas componentes y patrones (y su documentación) no puedes esperar que se publiquen por sí solos y que todos los usuarios del design system los adopten de inmediato. No funciona así, ni debería. Es necesario un proceso de gobernanza que nos ayude a todos a entender cómo se deberían anunciar, publicar, adoptar y utilizar.

Para lograrlo, el Design System team organizó sesiones semanales que nos ayudaron a reunir a los equipos y trabajar colectivamente en el desarrollo del Design System. Durante esas sesiones , compartí regularmente mi trabajo aún en progreso con el objetivo de recopilar comentarios que me ayudaran a mejorar la funcionalidad y el aspecto visual de mis diseños.

"¿Cómo podemos ayudar a otros equipos?"

En lo que respecta a la gobernanza, otra de mis responsabilidades era asegurarme de que los equipos de producto adoptaran y utilizaran correctamente los componentes y patrones.

Por lo general, la mayor preocupación de estos equipos es sacar adelante el trabajo de manera rápida, algo que me obligaba a asegurarme de que se protegiera la integridad del sistema de diseño (y, en última instancia, de la expresión de la marca digital de Lloyd's) sin comprometer la velocidad de las entregas. Establecer una buena relación con los diseñadores e ingenieros fue una de las formas más efectivas de lograrlo, aunque también me di cuenta de que había tres factores clave que necesitaba comunicar para asegurarme de que los demás diseñadores de producto y yo estuviéramos en la misma página:

  • Los componentes del design system os pueden ayudar a llegar hasta el 90% del camino, pero nunca al 100%.

  • No siempre habrá (o podrán encontrar) un componente que haga todo lo que necesitan.

  • Siempre tendrán preguntas sobre el sistema de diseño y mi tarea es hacer todo lo posible para responderlas y proporcionar claridad.

 

05. Usamos Miro para llevar a cabo las sesiones con Cardano.

06. Un ejemplo de algunos componentes del Design System (como el botón, avatar y navegación) utilizados en la aplicación Lloyd's Virtual Room.

El resultado



Con el lanzamiento de Cardano pudimos comprobar como los objetivos marcados al principio se iban cumpliendo. Por ejemplo, Cardano maximizó la velocidad y la calidad del diseño y desarrollo digital en Lloyd's of London. También ha contribuyó a liberar a los diseñadores y desarrolladores de la tarea de resolver siempre los mismos problemas y permitirles centrarse más en las experiencias únicas de sus productos. Pero no todo es acerca de la eficiencia del design system: Cardano también ha ayudado a mejorar la comunicación entre equipos y disciplinas al proporcionar marcos de referencia comunes y promocionar debates sobre la dirección de diseño en Lloyd’s.

 
 

 MI MAYOR APRENDIZAJE

Es fundamental definir primero qué debería formar parte del sistema y cómo debería diseñarse para adaptarse a las necesidades de los usuarios y los productos que lo están usando. Es muy tentador utilizar patrones/componentes existentes y pasar directamente a la fase de producción, pero si no se invierte tiempo en investigar y comprender las necesidades de los usuarios, eventualmente se llegará a la conclusión de que lo que funciona para alguien no siempre funciona para todo el mundo…

 

HERRAMIENTAS Y SOFTWARE UTILIZADOS

  • Figma

  • Confluence

  • Jira

  • Prototypr

  • Miro