Diseñado para el crecimiento

Ilustración de Naomi Wilkinson.
Se espera que las compañías de tecnología se muevan a un ritmo increíble, y la creación de software es compleja.

Alex Schleifer, vicepresidente de diseño de Airbnb, escribió esas palabras en su artículo, The Way We Build. Es una lectura maravillosa de cómo Airbnb repensó su enfoque del diseño.

En Etsy, tuvimos una revelación similar. Comprender cómo diseñar de una manera que anticipa el futuro inevitable del cambio requiere un cambio de paradigma en la forma en que diseñamos.

Lidiando con la Deuda

A medida que las empresas tecnológicas crecen y envejecen, comienza a sentir la deuda que está adquiriendo, no la deuda financiera, sino la deuda técnica y de diseño. La deuda se adquiere construyendo a corto plazo. El interés acumulado es la cantidad de tiempo para administrar, reparar, reescribir y construir sobre el código mal escrito y diseñado.

La deuda de diseño es adquirida por equipos de diseño que crean soluciones no reutilizables para problemas aislados. La deuda de diseño se compone de una gran abundancia de estilos, tratamientos e interacciones no reutilizables e inconsistentes, y el interés es la tarea imposible de su gestión y modificación.

Hemos visto que nuestra deuda de diseño tiene un impacto en la usabilidad y el rendimiento de nuestro sitio. Las convenciones de interfaz inconsistentes dificultan la usabilidad, el CSS para esos elementos de interfaz únicos aumenta el peso de la página, y el CSS en conflicto crea una pesadilla de control de calidad.

También nos frena mucho.

A continuación se muestra una diferencia del trabajo de Jessica Harllee al actualizar el estilo de los botones en etsy.com. El rojo es el código eliminado y el verde es el código escrito. Se tocó demasiado código para realizar un cambio visual simple.

El acto de creación no es lo que genera deuda. Es la creación de códigos y diseños no reutilizables lo que aumenta la deuda. Pero cuando construyes cosas para que sean reutilizables, estás creando efectivamente un sistema. Y hemos descubierto que los sistemas son la mejor forma de administrar nuestra deuda de diseño.

Sistemas de diseño

Como muchas otras compañías, creamos un equipo de Design Systems. La misión de este equipo es crear sistemas y experiencias que expresen la marca de Etsy de una manera creativa y útil. Pero antes de la creación de este equipo, que aún no tiene un año, nuestro sistema fue construido y mantenido por un grupo de voluntarios encantadores liderados por algunos diseñadores de nuestro equipo de Experiencia del vendedor. Este trabajo fue adicional a los otros proyectos de los voluntarios y las cosas progresaron, pero lentamente. Después de un período de tiempo, decidimos formar un equipo dedicado a nuestros sistemas a tiempo completo. Así nació el equipo de Design Systems. Ahora tenemos kits de herramientas para web, iOS, Android y correo electrónico.

Lo que llamamos un juego de herramientas, otros lo llaman guía de estilo o biblioteca de patrones, pero es un recurso de diseñadores de componentes de interfaz de usuario reutilizables y los ingenieros de front-end que utilizan para crear cualquier cantidad de soluciones de diseño. Muchos equipos han construido sistemas y los han hecho públicos para inspirar y educar. Los kits de herramientas de Etsy aún no son públicos, pero esperamos hacerlos públicos en un futuro no muy lejano.

En publicaciones futuras nos sumergiremos más profundamente en nuestros kits de herramientas, pero aquí hay algunos trucos que hemos empleado para mantener nuestro kit de herramientas web flexible sin perder consistencia en las convenciones o la estética.

Atomic Design es un libro escrito por Brad Frost. El concepto te desafía a pensar en tu interfaz de usuario en sus formas más elementales o "átomos". Los átomos se pueden ensamblar de muchas maneras para crear cualquier cosa. Esto mantiene la consistencia y permite flexibilidad para cualquier caso de uso.

CSS orientado a objetos u OOCSS cambia la forma en que escribe su CSS. En teoría, es similar al diseño atómico. Es una solución flexible para escribir CSS mínimo pero reutilizable. Tiene dos principios principales: estructura separada del tema y contenedores del contenido.

Las variables Sass son una forma fantástica de mantener su CSS manejable. En lugar de repetir el hex para un color en 1,000 clases diferentes, agrega una variable en esas 1,000 clases y la variable hace referencia a un hex escrito en un lugar. Esto hace que la modificación sea realmente fácil.

Los tokens de diseño agregan otra capa de abstracción para que las variables sean fáciles de modificar. En lugar de usar una variable como $ orange para agregar color a un botón, usa un token de diseño como $ primary-button-background. Luego, en un archivo de tokens separado, $ primary-button-background hace referencia a $ orange y $ orange hace referencia al color hexadecimal.

Todo diseño es diseño de sistemas

Convención sobre configuración es un término de ingeniería que también es aplicable al diseño. Al ceder a las convenciones del sistema, la toma de decisiones se centra en cosas como la arquitectura de la información y los flujos de usuarios. No queremos que nuestro equipo de diseño resuelva los mismos problemas de diseño una y otra vez. Este es tiempo perdido. Queremos que se centren en los desafíos únicos de sus proyectos. El sistema debe proporcionar las convenciones necesarias para resolver los problemas recurrentes de diseño.

Pero, ¿qué sucede cuando el sistema se encuentra faltante y se necesita configuración? Este es el cambio de paradigma.

En lugar de crear soluciones más personalizadas, lo que aumenta nuestra deuda, cree soluciones para retroalimentar al sistema. Si todo lo que creamos utiliza el sistema o lo retroalimenta, todo el diseño se convierte en diseño de sistemas.

El equipo de Design Systems es el encargado de nuestros juegos de herramientas, pero no es un jardín amurallado. Se espera que todos nuestros diseñadores estén capacitados para contribuir a nuestros kits de herramientas, haciéndolos más adecuados y robustos. El mejor trabajo de nuestro equipo de Sistemas de diseño es abogar por el uso de nuestros juegos de herramientas, educar a los equipos sobre sus beneficios y, en última instancia, cultivar un modelo mental de sistemas de diseño en toda nuestra empresa.

Los beneficios de estar libre de deudas

Aunque estamos muy lejos de estar libres de deudas de diseño, ya hemos sentido los beneficios del trabajo realizado. Durante el verano rediseñamos nuestra herramienta de convos que permite a compradores y vendedores comunicarse entre sí. Era una herramienta antigua que tenía múltiples plantillas web de escritorio y móviles que usaban diferentes códigos con diferentes tratamientos de diseño. El rediseño se construyó completamente con nuestro kit de herramientas web. Es receptivo, accesible y coherente: todos los beneficios se heredan de forma gratuita de nuestro kit de herramientas. También fue increíblemente rápido de construir. Desde el inicio hasta el lanzamiento, tardó 8 semanas en rediseñar y reconstruir el producto.

La deuda es un peso alrededor de tu cuello. Su existencia cuesta tiempo, recursos y riesgos, lo que impide que se construyan productos de calidad a un ritmo oportuno. Al tener un sistema y ceder a él, podemos movernos más rápidamente y crear mejores productos.