Cómo construir un sistema de diseño le permite a su equipo enfocarse en las personas, no en los píxeles.

Esta publicación es la primera de una serie sobre HubSpot Canvas, nuestro nuevo lenguaje de diseño.

hola amigo Hablaré en la conferencia Rethink Design Systems el 26 de septiembre. Si desea asistir, use mi enlace con un 40% de descuento.

Hay una vieja comedia sobre un cartero que decide que ya no le apasiona entregar el correo, sino que prefiere entregar tacos.

En la parodia, un hombre espera junto a su buzón para confrontar al cartero por la falta de correo real en su buzón. A pesar de amar los tacos, el residente dice: "Si tuviera que elegir entre los tacos y el correo, tendría que elegir el correo".

Los tacos son mucho más emocionantes que los billetes, pero el hombre no necesita tacos. El necesita su correo.

Los clientes de HubSpot necesitan un producto que sea consistente, altamente funcional y agradable. Por lo tanto, el equipo de diseño de HubSpot necesitaba crear un sistema de diseño que nos ayudara a satisfacer esas necesidades de manera continua.

En los últimos años, hemos:

  • Creó un nuevo lenguaje de diseño (llamado HubSpot Canvas; más sobre eso más adelante)
  • Rediseñé la plataforma HubSpot y actualicé la identidad visual de nuestra marca.
  • Construimos un sistema de diseño vivo y respirable que puede adaptarse a nuestro negocio en crecimiento

Para lograr todo esto, necesitábamos invertir en nuestro talento. Hemos escalado nuestro equipo UX de 14 diseñadores de productos, 2 investigadores y 1 escritor a más de 34 diseñadores de productos, 8 investigadores, 3 escritores y 1 ilustrador de productos (y todavía estamos contratando).

Esta es la historia de cómo nos comprometimos a entregar el correo (al mismo tiempo que también conseguimos introducir algunos tacos).

¿Por qué rediseñamos?

Necesitábamos rediseñar la plataforma HubSpot por dos razones. Primero, hacer un mejor trabajo para cumplir la promesa de nuestra marca. Nuestros clientes adoran la marca HubSpot. Es divertido, vibrante y lleno de personalidad. Pero el producto, bueno, no lo era. Simplemente no reflejaba la energía que nuestros clientes estaban poniendo en el crecimiento de sus negocios.

En segundo lugar, para eliminar las inconsistencias que se habían infiltrado en nuestra interfaz de usuario. Nuestra interfaz tenía inconsistencias en la plataforma, lo que dificultaba el uso y la navegación de la herramienta. Tome estos dos modales en Marketing Hub como ejemplo:

¿Observa las inconsistencias en la colocación de botones, el diseño de pestañas y los patrones de interacción? Estas inconsistencias aumentaron la carga cognitiva en nuestros clientes, lo que les dificulta realizar acciones simples como guardar su trabajo o cerrar un diálogo, lo que finalmente los desaceleró todos los días.

Así que decidimos comenzar recopilando comentarios de los usuarios sobre nuestro diseño actual. Los comentarios no fueron bonitos, pero fueron valiosos:

"Parece más complejo de lo que debe ser".
“Demasiadas opciones. Mi ojo no está dibujado en ningún lado específicamente ".
“Denso y ocupado. No hay espacios en blanco.
"Las combinaciones de colores están desactualizadas y no son agradables".
"Demasiado gris y todo parece estar escondido en su cajita".
"Poco interesante."

Sabíamos que necesitábamos un reenfoque completo y una nueva dedicación a los clientes que atendemos, a sus personalidades, peculiaridades, motivaciones, aspiraciones e incluso (o especialmente) sus ansiedades. En última instancia, queríamos crear un nuevo diseño para nuestro producto que fuera tan agradable y fácil de usar como cualquiera de las aplicaciones de consumo que nuestros clientes usaban todos los días.

Pero con eso vino la realización de una verdad universal:

Rediseñar nuestra plataforma significaba que tendríamos que interrumpir más de 40 equipos de productos en dos continentes. Significaba que tendríamos que desviar algunos recursos de diseño e ingeniería de la creación de nuevas experiencias para poder solucionar las existentes. Y durante el lanzamiento, significó que nuestros equipos de soporte y servicios y nuestros clientes tendrían que adaptarse continuamente a los cambios continuos del producto.

Comenzamos este proceso sabiendo que no nos íbamos a rediseñar solo nuestro producto; necesitábamos repensar por completo la forma en que diseñamos y construimos los productos.

Necesitábamos comprender qué ineficiencias en nuestra estructura organizativa y flujos de trabajo nos habían llevado a crear una experiencia de usuario fragmentada en primer lugar, y reemplazarlos por prácticas y sistemas que funcionaran.

Entonces, la primera parte de esta historia se centra en cómo identificamos esos desafíos, cómo abordamos el rediseño de nuestro producto y las herramientas que hemos creado para que nuestro equipo de diseño sea lo más consistente, eficiente y autónomo posible.

La raíz del problema

El año pasado, mis padres decidieron vender la casa de mi infancia. Fui obligado a ayudarlos a limpiar el ático, un ático que ha acumulado veinte años de cosas. Como puede imaginar, hubo muchos momentos de WTF durante esa sesión de limpieza. Algunos momentos estuvieron en la línea de: WTF: ¿Salvamos esto? ¡Guay! Pero la mayoría eran más como: WTF: ¿Por qué todavía tenemos 87 Beanie Babies?

Bueno, de la misma manera, nuestro equipo de diseño primero necesitó auditar cada componente que alguna vez se imaginó, codificó y envió a producción durante los últimos diez años en HubSpot. Necesitábamos llegar a este nivel granular para comprender mejor cuál era la experiencia actual del producto. Se pidió a cada diseñador que revisara sus aplicaciones respectivas y encontrara cada componente, tomara una captura de pantalla, lo nombrara y lo archivara para su revisión.

Prueba sorpresa: ¿Cuántos recolectores de fechas son demasiados?

¿Tres? Tal vez cuatro?

Bueno, tuvimos ocho.

Estas son algunas de las otras cosas que encontramos en nuestro ático:

  • Más de 100 sombras del color gris
  • Más de 40 estilos de texto en 3 fuentes diferentes
  • 16 estilos diferentes de modales
  • 6 botones primarios diferentes (lo que significa que realmente no teníamos botón primario)
  • 5 formas diferentes de filtrar una tabla
  • Modalidades con acciones de confirmación a la izquierda.
  • Modalidades con acciones de confirmación a la derecha.
  • Miles y miles de líneas de CSS personalizado

Aquí hay una imagen de todos los botones que existían en la plataforma HubSpot al mismo tiempo:

¿Esto presiona tus botones?

Entonces, ¿cómo pasó esto? ¿Cómo terminamos con tantos botones? ¿Cómo terminamos con tantos recolectores de citas?

Aquí hay una conversación Slack real de esos viejos y oscuros días:

Poniendo el sass de nuevo en SaaS

La verdad es que ningún diseñador o desarrollador en HubSpot realmente quiere pasar su tiempo reinventando el selector de fechas.

Identificamos que la razón por la que los equipos habían creado tantas variaciones de esencialmente los mismos estilos y componentes era porque nuestra estructura organizacional creaba problemas de visibilidad. En resumen, fue muy difícil descubrir lo que ya estaba en juego, y fue más fácil construir algo nuevo.

El equipo del producto HubSpot está formado por pequeños equipos autónomos que están estructurados en torno a la resolución de las necesidades específicas del cliente. Esto nos permite avanzar rápidamente como organización de desarrollo de productos y ser altamente receptivos a las necesidades cambiantes de nuestros clientes. Pero también presenta desafíos cuando se trata de mantener diferentes equipos de productos alineados.

Cuando tienes más de 40 equipos de productos que construyen, envían e iteran rápidamente, en realidad es bastante fácil perder de vista la experiencia general del cliente. Estar muy centrado en un problema específico a menudo significa que te estás poniendo anteojeras para todo lo demás. Debido a estas anteojeras, nuestros diseñadores y desarrolladores estaban recreando sin saberlo elementos, componentes y patrones existentes en nuestra interfaz de usuario. Esto condujo a una experiencia de usuario fragmentada y una deuda de diseño y tecnología compuesta.

La estructura de nuestro equipo pequeño y autónomo no va a cambiar, es parte de nuestro ADN. Así que estaba claro que necesitábamos poner más esfuerzo en crear herramientas y sistemas para alinear mejor a nuestros equipos de productos. Al conectar a todos a un sistema de diseño centralizado, podríamos asegurarnos de tener una experiencia de usuario unificada incluso a medida que continuamos creciendo.

Esto liberaría a nuestros diseñadores y desarrolladores de obsesionarse con los píxeles para que puedan pasar más tiempo obsesionándose con las personas.

Obteniendo principios

La auditoría nos ayudó a identificar problemas en nuestro proceso de diseño y comprender qué aspectos de nuestra cultura de desarrollo habían creado ineficiencias. Pero antes de que se pudieran crear los paneles de ánimo, antes de que se pudiera explorar la tipografía, antes de que pudiéramos haber calentado las discusiones sobre el tono perfecto de naranja, necesitábamos tener principios.

Necesitábamos estar de acuerdo con nuestras creencias fundamentales, en las que podíamos apoyarnos cuando las decisiones eran difíciles. Y necesitábamos descubrir qué ideales nuestros equipos sentían la responsabilidad de defender.

Entonces, el equipo de diseño realizó algunos ejercicios de ideación para establecer la base de nuestro nuevo lenguaje de diseño. Debatimos, apilamos y aterrizamos en cinco principios básicos de diseño, que nos han guiado a través de un millón de decisiones de micro y macro diseño desde entonces.

Estos principios son:

Claro
Diseñamos para claridad y enfoque. Nuestro trabajo ayuda a los usuarios a hacer lo correcto a través de la priorización de funciones, la jerarquía visual y la conciencia contextual.

Humano
Fomentamos un sentido de alegría al humanizar la experiencia de manera que resuene en todas las culturas. Nuestro trabajo proporciona a los usuarios una interacción lúdica y agradable en todo momento.

Entrante
Reforzamos el mensaje y el significado de la metodología Inbound. Nuestro trabajo hace que la ruta de entrada sea clara para nuestros usuarios y les ayuda a comprender por qué es lo correcto.

Integrado
Simplificamos la experiencia del usuario creando un sistema unificado que resuelve sus necesidades. Nuestro trabajo ayuda a los usuarios a lograr grandes cosas al ofrecer un enfoque racionalizado y eficiente.

Colaborativo
Diseñamos sistemas potentes que alientan a las personas a trabajar juntas sin problemas. Nuestro trabajo ayuda a las personas a crear y colaborar entre sí de manera natural e intuitiva.

Estos principios nos ayudaron a mantenernos alineados y enfocados mientras trabajábamos en los muchos detalles del rediseño de nuestro producto. Puede cambiar el color de un botón, el grosor de una línea y el tamaño de un encabezado. Pero no debe cambiar las cosas en las que cree fundamentalmente. En esos aspectos del diseño, debe ser firme.

Una nueva dirección visual.

Nuestro equipo de diseño realizó algunas sesiones para rediseñar algunas de las pantallas principales de nuestro producto, luego eligió un grupo de cuatro diseñadores de productos para pasar una semana completa e ininterrumpida ideando, diseñando y, en última instancia, probando algunas direcciones visuales diferentes con nuestros clientes. Estas sesiones produjeron algunas direcciones de diseño muy diferentes que se sintieron realmente nuevas y emocionantes.

Aquí hay una muestra de algunos conceptos de diseño muy tempranos de dos miembros del equipo del lenguaje de diseño, Drew Condon y Jackie Barcamonte:

Diseño anterior de HubSpot

Salvaje, ¿verdad? Diferente. Emocionante. Definitivamente no es aburrido, rígido "software de negocios".

El equipo del lenguaje de diseño finalmente probó tres direcciones de diseño diferentes con nuestros clientes a través de múltiples rondas de encuestas y entrevistas. Una vez que escuchamos las siguientes declaraciones, supimos que habíamos encontrado una dirección ganadora:

"Me hace sentir productivo".
“Me siento capaz. Siento que sé exactamente qué hacer ".
"Esto es divertido. Esto es lo que esperaría de HubSpot ".
"Próxima generación de web" (alguien realmente dijo eso)
"No parece un software empresarial".
"Me hace sentir en control".

Aquí hay un vistazo a la evolución de la dirección de diseño que más prefirieron los clientes que entrevistamos:

Diseño anterior de HubSpotDiseño preferido durante la primera ronda de entrevistasDiseño evolucionado para la segunda ronda de entrevistas.

Una vez que validamos nuestra dirección de diseño con usuarios reales, llegó el momento de aplicar ese estilo visual a todos nuestros componentes principales de la interfaz de usuario. Y estoy hablando de cientos de componentes: botones, enlaces, selecciones, tablas, migas de pan, modales, entradas, popovers (la lista continúa). Aquí es donde el rediseño se volvió mucho menos divertido y mucho más meticuloso y agotador.

Pero ese trabajo minucioso y agotador fue una inversión a largo plazo en nuestra empresa y nuestros clientes. Recuerdo un viernes por la tarde que el equipo del lenguaje de diseño y yo pasamos en una reunión de dos horas. Estábamos en el valle de la tristeza.

Nuestro trabajo ese día fue decidir el margen y el relleno de algunos de nuestros componentes más atómicos (botones, controles, entradas, etc.), los componentes básicos de nuestra interfaz de usuario.

Éramos cinco en esa reunión y pasamos probablemente quince minutos considerando cuidadosamente el margen de todos nuestros botones nuevos. Esto significa que HubSpot estaba pagando los salarios de cinco diseñadores para sentarse en una habitación y debatir algo tan mundano como el espacio que rodea el texto en una caja.

Pero.

Ninguno de nuestros ingenieros front-end, diseñadores de productos, investigadores, escritores o ilustradores de productos ha tenido que pensar en el margen de un botón desde que se tomó esa decisión hace dos años.

Esa es la belleza de construir un sistema de diseño. Al decidir un detalle una vez, libera a todo su equipo de desarrollo de productos para centrarse en resolver los problemas reales de los clientes.

Ponemos todos nuestros componentes nuevos y brillantes, así como algunas orientaciones sobre cómo usarlos, en Sketch (nuestra herramienta de diseño preferida). Esto creó una explosión inmediata en la productividad de nuestro equipo, al tiempo que (de repente) mantuvo nuestro trabajo de diseño estrechamente alineado.

Manteniendo los equipos alineados

Antes de que comenzara este proceso, no teníamos un lugar centralizado al que los diseñadores pudieran ir para comprender qué elementos o componentes ya existían, y ningún lugar donde pudieran ir si querían usar esos elementos o componentes en su propio trabajo. Los diseñadores y desarrolladores estaban haciendo todo lo posible para tomar buenas decisiones sobre qué componentes o patrones usar, pero su principal punto de referencia era el producto existente, que era decididamente inconsistente.

Para combatir las inconsistencias (mientras aceleramos nuestro flujo de trabajo), creamos un estilo robusto y una biblioteca de componentes para nuestro nuevo lenguaje de diseño. Este archivo de Sketch de treinta páginas está organizado por "familias de componentes" y contiene cada elemento o componente que comprende la interfaz de usuario de nuestros productos. Se actualiza semanalmente y está dirigido por un pequeño grupo de trabajo rotativo de diseñadores de productos y un equipo de desarrollo front-end dedicado.

¿Necesitas un ícono? Ven de esta manera.

Iconos de Joshua Mulvey, Sue Yee y Chelsea Bathurst

¿Necesita visualización de datos? Lo tienes.

Visualización de datos por Drew Condon

¿Necesitas un botón? Como desées.

Tenemos un botón principal ahora. Es naranja. Nos gusta el color naranja.

¿Necesita literalmente algo más? HubSpot Canvas lo tiene cubierto.

Cada componente que existe en el kit de Sketch también existe como un componente React, lo que facilita la traducción de cualquier maqueta en un código de la misma manera que ensamblas legos.

Eso significa que nuestros diseñadores no pasan sus días presionando píxeles, dibujando hojas de especificaciones o preocupándose por la capacidad de respuesta de sus diseños. Significa que nuestros desarrolladores no pasan horas ajustando CSS personalizados (de hecho, casi no escriben nada).

Significa que nuestros desarrolladores pasan más tiempo construyendo. Y significa que nuestros diseñadores pasan más tiempo investigando, ideando e iterando, rápidamente y con alta fidelidad.

Aquí hay un vistazo al flujo de trabajo promedio del diseñador de HubSpot, utilizando las bibliotecas Sketch y los complementos Runner y Craft (por Invision).

Y para mantener el ritmo del producto HubSpot, nuestra biblioteca de componentes continúa creciendo y evolucionando. Lo mantiene un grupo central de diseñadores y desarrolladores, pero todos en el equipo del producto contribuyen y sopesan. Cada vez que se construye o mejora un nuevo componente, vuelve a la biblioteca de Sketch y es accesible para todos. Esto reduce enormemente la cantidad de componentes no autorizados o componentes duplicados.

Construyendo el sistema

Nuestro kit de bocetos es solo una pieza de un sistema de diseño más grande. Para que sea realmente eficaz a largo plazo, necesitábamos crear herramientas que funcionaran con la misma eficacia para los desarrolladores. Aprendimos que la mejor manera de crear experiencias de productos consistentes, funcionales y agradables es hacer que la vida de quienes crean esas experiencias sea mucho más fácil.

Lea la próxima publicación para conocer cómo la documentación ayudó a cultivar la copropiedad entre el diseño y el desarrollo, cómo obtuvimos una adopción generalizada de nuestro sistema de diseño y qué herramientas hemos creado para los desarrolladores.

Para concluir:

Personas de más de píxeles.
Correo sobre tacos.
Los tacos son deliciosos.
Pero la gente necesita su correo.

Créditos
Ilustraciones de Sue Yee.

Recursos que encontramos útiles:
Diseño atómico de Brad Frost
Diseñando el selector perfecto de fecha y hora por Vitaly Friedman
Encontrar las paletas de colores adecuadas para las visualizaciones de datos por Samantha Zhang

Publicado originalmente en el Blog del producto HubSpot