Introducción del sistema de diseño a aplicaciones web multinacionales

Soy una desarrolladora front-end de Octopus Energy en Londres. Hoy quiero hablar sobre el viaje de Octopus Energy en la introducción de sistemas de diseño a aplicaciones web multinacionales. Octopus Energy fue fundada hace casi siete años, y en este tiempo hemos pasado de cero clientes a más de 3 millones. A medida que crecíamos, y con esto me refiero a escala global, naturalmente enfrentamos algunos desafíos. Así que comenzamos a trabajar en la solución. Quiero compartir nuestro viaje en la implementación de la solución y los puntos de aprendizaje de ella. Y si tienen alguna pregunta en el camino, por favor tomen nota o algo así, tendremos tiempo al final para las preguntas y respuestas.

En Octopus, tenemos una reunión semanal para actualizaciones de la empresa y bebidas los viernes por la tarde, a la que llamamos Cena Familiar. Cada mes escuchábamos noticias emocionantes. Octopus Energy se está expandiendo a nuevas regiones del mundo, lo que trajo consigo algunos desafíos interesantes.

Nos hacemos estas preguntas. ¿Cómo podemos mantener nuestra identidad de marca consistente en diferentes países? ¿Cómo podemos mantener la accesibilidad al más alto nivel? ¿Cómo podemos apoyar a nuestros equipos de ingenieros brindando una mejor experiencia de desarrollo? Bueno, nada mejor que algunos ejemplos visuales.

Así es como se ve el área de aterrizaje de la página principal de Octopus Energy en diferentes países. Este es el Reino Unido, Francia, Italia, España, Japón, Estados Unidos, Alemania y Nueva Zelanda. Puedo mostrarles cómo se ve nuestro logotipo de navegación principal detrás de escena en diferentes países. Algunos países usaban el logotipo con nuestra mascota Constantine, el lindo pulpo rosa que ven allí, y otros usaban el logotipo sin él. Este tiene una etiqueta A simple envolviendo una imagen. Otro tiene una etiqueta A envolvente que tiene un span, una imagen y pueden ver aquí algunas prácticas de accesibilidad con área de etiqueta y texto oculto visualmente para lectores de pantalla. Este tiene una etiqueta A envolvente que tiene un div que contiene otro div con una imagen adentro y una etiqueta de imagen. Y pueden ver que esto no usa ningún nombre de clase, mientras que los anteriores usaban algunos nombres de clase según la elección de cada equipo de ingenieros. Estos son solo algunos ejemplos del código detrás de la interfaz de usuario, pero pueden tener una idea de lo que está sucediendo aquí. Si el logotipo principal viene con tantos estilos de código detrás, pueden imaginar fácilmente cómo se verá para diferentes componentes y páginas.

Establecimos algunos objetivos para abordar los desafíos. Queremos una identidad de marca consistente en todos los países. Queremos proporcionar una gran práctica de accesibilidad. Queremos brindar a nuestro equipo de ingeniería global una buena experiencia de desarrollo. ¿Qué hemos decidido para lograr esto? Decidimos construir bloques de LEGO para los desarrolladores. Para que puedan construir fácilmente lo que quieran con estos LEGOs, sin tener que preocuparse por la identidad de marca ni nada. En otras palabras, decidimos construir una biblioteca de componentes para nuestros desarrolladores. Este bloque de logotipo se creará siguiendo nuestras pautas de diseño. Cada bloque de LEGO vendrá con las mejores prácticas de accesibilidad. Además, todo estará tipado, ya que TypeScript es nuestro lenguaje de elección sobre React. En estos bloques de LEGO, la biblioteca de componentes será compartida con nuestros equipos de desarrollo en todo el mundo, como parte de nuestro sistema de diseño. Comenzamos a crear nuestro sistema de diseño junto con la construcción de la biblioteca de componentes. Contiene los principios de diseño de nuestra marca. Proporciona pautas para los patrones. Es la fuente de verdad sobre cómo definir lo que es nuestra

Las aplicaciones React deben tener un aspecto determinado. Comenzamos desde principios básicos de diseño. Paletas de colores, para que puedas asegurarte de seguir las pautas de uso de colores. Además, si alguno de estos colores cambia en el futuro, solo necesitas hacer un cambio en un solo lugar. Tipografía, para que no tengas que preocuparte por el tamaño y el peso de la fuente para cada encabezado y el texto del cuerpo. Espaciado, para que puedas pasar el menor tiempo posible decidiendo cuál debería ser el relleno y el margen. Con estos tokens de diseño listos, ahora puedes agregar patrones a la biblioteca. Agrega componentes de interfaz de usuario como botones aquí, y cómo se ven y se comportan los botones. Por ejemplo, como puedes ver, tenemos botones estándar, contorneados, de texto o un botón con un ícono en él. También definimos el estado de hover, el estado de clic, el estado deshabilitado, y así sucesivamente. La caja de alerta, el deslizador y el campo de texto. Todos estos componentes se pueden usar para formar un patrón en la biblioteca, como este formulario, o un botón de llamada a la acción con un campo de entrada. Un componente de tarjeta con campos de texto y un botón adentro, y puedes ver cuántas decisiones de diseño hay en este pequeño componente. Relleno, márgenes, tamaño y peso de la fuente. Sin el patrón definido, esto es algo que debe decidirse cada vez tanto para diseñadores como para desarrolladores. Siempre podremos consultar este sistema de diseño cuando tengamos que construir cualquier página o producto que necesitemos construir. Así como miramos las instrucciones cuando construimos un modelo de LEGO.

Con nuestra biblioteca de componentes, decidimos seguir la metodología de diseño atómico de Bradfrost. Los componentes más pequeños, o bloques de LEGO, se llaman átomos. Los componentes más grandes, creados combinando átomos, se llaman moléculas. La interfaz de usuario, creada con átomos y moléculas, como una barra de navegación, tarjetas con texto o campos de entrada dentro, se llama organismo. Algo como una página de error 404 se puede agregar como una plantilla porque es un diseño completo y se puede compartir en diferentes países. Proyecto Corel. Comenzamos a construir una biblioteca de componentes para resolver los nuevos desafíos que mencioné al principio. Pero espera, ¿sistema de diseño? ¿Biblioteca de componentes? ¿Son lo mismo? La biblioteca de componentes te permite usar bloques de LEGO listos para usar. Dado que todos los LEGOs en su interior se crean siguiendo las pautas de los sistemas de diseño, puedes estar seguro de que proporcionará una experiencia de usuario consistente. El sistema de diseño es la instrucción para construir modelos de LEGO. Y la biblioteca de componentes es la caja de bloques de LEGO. Ten en cuenta que el sistema de diseño es un concepto más amplio que incluye la biblioteca de componentes. El sistema de diseño seguirá siendo un sistema de diseño incluso si no tienes una biblioteca de componentes. Pero la biblioteca de componentes puede existir sin un sistema de diseño.

Esto es lo que utilizamos para construir nuestros bloques de LEGO. Utilizamos TypeScript, por lo que nuestro tema está completamente tipado. Escribimos pruebas para nuestros componentes utilizando Jest. Utilizamos Versal para implementar rápidamente los cambios en Storybook. Es muy fácil para nosotros construir algo e implementarlo rápidamente para obtener comentarios. Versal es una excelente herramienta para implementación rápida y colaboración entre desarrolladores. Es muy sencillo integrarlo con GitHub, por lo que cuando realizas un cambio y lo envías, se implementará al instante. Con la URL de vista previa y todo. Hay una más de la que hablaré más adelante.

Utilizamos Storybook para documentar las propiedades disponibles en la tabla de propiedades. Storybook también puede mostrar si tu componente cumple con el estándar de accessibility. Además, esto se puede utilizar como la documentación así como la fuente de verdad para los desarrolladores para verificar la interfaz de usuario en los ejemplos de uso con la funcionalidad de ver el código. Y esto es a lo que se refería el signo de interrogación.

Decidimos utilizar una biblioteca de componentes externa existente que tiene un estilo de diseño similar al nuestro. Esta es Material UI. ¿Y por qué hicimos esto? Porque al principio de este proyecto, había recursos limitados. Básicamente, el número de diseñadores y desarrolladores que podían trabajar a tiempo completo en esto era pequeño. Y queríamos crear algo rápidamente aprovechando el soporte de react y TypeScript en las mejores prácticas de accessibility. Y como se alinea con el estilo básico de diseño de Octopus, no necesitaríamos hacer muchas personalizaciones. Lo importante es que nuestro sistema de diseño es independiente de esta biblioteca de componentes externa. Por lo tanto, en caso de que decidamos no utilizar esta biblioteca más o cambiar a diferentes bibliotecas, aún podemos mantener nuestro propio sistema de diseño sin muchos problemas. Por lo tanto, hubo muchas buenas razones por las que esta fue una buena elección para nosotros al principio, pero a medida que crecíamos, nos alejamos de ella ya que limitaba nuestra capacidad de seguir las decisiones de diseño. Decidimos utilizar styled components, que nos permiten utilizar componentes de React con una fácil integración de nuestro propio sistema de diseño. Está bien utilizar una biblioteca de componentes existente para comenzar a construir la tuya propia. Solo asegúrate de que tu sistema de diseño no dependa completamente de ella. Recuerda que la biblioteca de componentes externa de tu elección es una herramienta para tu sistema de diseño. Es posible que desees construir la tuya propia desde cero o tal vez quieras usar otra biblioteca. Pero en cualquier caso, aún tienes tu sistema de diseño como fuente de verdad para guiarte. Además, puedo recordarte una vez más que la biblioteca de componentes de tu elección es parte de tu sistema de diseño. Así es como quedó.

¿Ves la mejora de esto a esto? También puede ser utilizado por cualquiera de nuestros desarrolladores en todo el mundo. Ahora, cada territorio puede usar el logotipo tan simple como esto. Puedes pasar una constante de ancho como prop si deseas incluir la mascota en el logotipo. También puedes establecer el ancho específico en la prop de ancho para el tamaño. Y, por supuesto, tienes la opción de agregar un hipervínculo y usarlo sin la mascota.

¿Recuerdas dónde comenzamos? El sistema de diseño no tiene que ser esta documentación masiva que contiene todas las reglas y pautas. Al principio, puedes comenzar creando algunos tokens de diseño como una lista de colores que se utilizan en tu aplicación. Tienes una lista de reglas de tipografía como el tipo de letra y el tamaño de fuente para el encabezado uno y el encabezado dos, y cosas así. O la lista de espaciado como el tamaño del espaciado que deseas utilizar para el relleno o el margen o el espacio entre las secciones. No hay nada intimidante en definir estas cosas desde el principio. Porque cuando escuchas sistema de diseño, suena como un gran trabajo. Pero no dejes que eso te desanime.

Coral es un proyecto en curso en Octopus Energy. Tenemos un canal de retroalimentación en nuestro Slack donde todos los que utilizan la biblioteca de componentes están invitados a compartir sus comentarios incluyendo solicitudes, errores o preguntas. Con el canal de retroalimentación, la puerta a la discusión siempre está abierta y así es como sabemos qué debemos hacer para nuestro próximo paso. Además, aunque tenemos el equipo que está en el centro de la toma de decisiones en el Proyecto Coral, es un proyecto de código abierto dentro de la organización donde damos la bienvenida a la contribución de todos. De esta manera, podemos mejorar las cosas más rápido al tener una dirección clara de hacia dónde nos dirigimos. Considera el sistema de diseño como algo vivo, que cambiará y evolucionará al igual que tu producto y negocio, y no necesitas tener todo perfecto desde el primer día. Es algo que crecerá con el tiempo siempre y cuando lo mantengas. Muchas gracias. Puedes encontrarme en Twitter, ellieandcreative.