Sistemas de diseño Sprint 0: la bala de plata del desarrollo de productos.

Una breve introducción: Soy Marcin: un ex gerente de UX y ahora cofundador y CEO de UXPin, la plataforma de diseño UX full stack. En esta serie de publicaciones, estoy informando sobre el viaje de UXPin de crear nuestro propio sistema de diseño. Comenzamos discutiendo los fundamentos de los sistemas de diseño (¿por qué? ¿Qué?) Y luego avanzamos sprint, por sprint, a través de todo el proceso de construcción y mantenimiento de un sistema completo.

Si se pregunta por qué o cómo construir un sistema de diseño, esta serie es para usted.

Al igual que con todos los proyectos en UXPin, nuestro recorrido por el sistema de diseño comenzó con una serie de entrevistas a usuarios.

Entre julio y agosto de 2016, entrevisté a más de 40 diseñadores, desarrolladores y líderes de productos empresariales sobre sus desafíos más apremiantes. Quería una imagen más clara de hacia dónde se dirigía el diseño y el desarrollo. Nada pinta una visión más clara del mañana que los dolores de hoy.

Si bien estas entrevistas generativas están destinadas a informar nuestra hoja de ruta de productos, también mejoran nuestro propio proceso de desarrollo de productos. Es un beneficio adicional cuando trabaja en una plataforma para equipos de diseño y desarrollo. Podemos aprender mucho de nuestros propios clientes.

Esta vez, el resultado final nos llevó a una revelación inesperada.

Cada entrevista reveló un problema que nos habíamos enfrentado a medida que crecíamos con los años. Un problema tan grande y poderoso que puede paralizar el desarrollo de productos en nuevas empresas, sopesar la experiencia del usuario en empresas medianas y evitar por completo la ampliación del diseño y el desarrollo en las empresas.

Ese problema es la falta de consistencia de diseño. La amenaza de todo gran producto.

Falta de consistencia de diseño: ¿el mayor problema en el diseño de productos?

La consistencia del diseño era claramente un problema frecuente. Y nuestros entrevistados fueron muy vocales sobre lo que eso significaba para sus equipos y usuarios:

  • Confusión del usuario Diferentes patrones responsables de la misma acción confunden a los usuarios,
  • Proceso de diseño lento. La falta de recursos de diseño reutilizables ralentiza a los diseñadores ("todo se crea desde cero")
  • Desarrollo lento El bajo número de componentes totalmente reutilizables dificulta el desarrollo.
  • Difícil incorporación. Introducir a nuevos diseñadores y desarrolladores a un "sistema" indocumentado es increíblemente difícil.

Queríamos aprender más. También quisimos validar los hallazgos.

Entonces, un par de semanas después de nuestras entrevistas, realizamos una encuesta a gran escala sobre el estado del diseño empresarial. De los 3,175 encuestados, el 59% señaló "mejorar la consistencia de UX" como el desafío que enfrentan actualmente en el proceso de UX:

Resultados de la encuesta UXPin State of the Enterprise UX

El veredicto fue inconfundible: la falta de coherencia está constantemente en la mente de los diseñadores, y con razón.

El buen diseño, por su naturaleza, es sistemático, pero el crecimiento del equipo y de los procesos, a menos que sea manejado meticulosamente, inevitablemente parece conducir a inconsistencias. Karri Saarinen, diseñadora principal del sistema de diseño de Airbnb, probablemente lo expresó mejor:

“El software a menudo es creado por equipos increíblemente grandes de personas. El desafío de crear experiencias coherentes se multiplica exponencialmente a medida que se agrega más gente a la mezcla. Con el tiempo, no importa cuán consistente o pequeño sea un equipo, diferentes personas contribuirán con nuevas soluciones y estilos, haciendo que las experiencias diverjan ”.

Cuanto más inconsistente sea la experiencia del usuario, más lento será el desarrollo del producto y viceversa. En mi experiencia pasada como gerente de UX en la empresa, los equipos que no pueden identificar los estándares de diseño eventualmente predeterminan la construcción de todo desde cero. Y entonces la situación empeora.

Es un círculo vicioso.

Por supuesto, los usuarios son los que más sufren. Un estudio de Google Research de 2012 mostró que los usuarios prefieren interfaces simples, que parecen familiares. Buscan experiencias consistentes con otras experiencias en la plataforma. Anhelamos familiaridad. Cada nuevo patrón responsable de la misma acción, o inconsistencia visual, crea una pausa innecesaria y una carga eventual.

La consistencia introduce sentimientos de seguridad y familiaridad. La inconsistencia crea caos y confusión.

Gobernando el caos

Entonces, ¿cómo están trabajando estos equipos para minimizar las inconsistencias?

Los participantes de nuestro estudio fueron muy consistentes en sus respuestas: crear y mantener un sistema de diseño. El segmento empresarial (productos B2B) del mercado del diseño ya parece estar allí:

Resultados de la encuesta UXPin State of the Enterprise UX

El 69% de las empresas tienen un sistema de diseño o están trabajando actualmente en uno. Empresas como Saleforce, IBM, Airbnb y Atlassian lideran la multitud con implementaciones muy maduras de sistemas de diseño vivos.

Ciertamente tiene sentido. En ese tamaño y escala, el problema de la inconsistencia es demasiado doloroso y costoso como para ignorarlo.

Deconstruyendo sistemas de diseño

Hasta ahora, en esta breve publicación, he mencionado el término "sistema de diseño" más de 20 veces. Entonces, ¿qué es exactamente un sistema de diseño? Después de todo, no es un término autoexplicativo. Y se confunde fácilmente con las guías de estilo o las bibliotecas de patrones de IU.

Creemos nuestra definición a partir de por qué las empresas deciden crear un sistema de diseño en primer lugar.

Los sistemas de diseño aumentan la consistencia del diseño y la consistencia del código (cada patrón de diseño reutilizable debe tener una pieza de código reutilizable correspondiente). Con un sistema de diseño, las piezas del sistema son reutilizables en múltiples partes de un producto e incluso en múltiples productos.

Al abordar el desarrollo de productos con un proceso similar a LEGO, recuperamos más tiempo en nuestros días para enfocarnos en problemas de productos más grandes. Minimizamos las conversaciones redundantes y las soluciones únicas.

Entonces, si esta es la razón por la cual las compañías construyen sistemas, entonces lo siguiente puede servir como nuestra definición de trabajo:

Un sistema de diseño es el núcleo arquitectónico de un producto (s) para garantizar el diseño y la consistencia del código y la eficiencia del desarrollo del producto.

Es un poco más fácil de entender si echa un vistazo a la estructura típica de un sistema de diseño.

¿Qué es una estructura típica? Para averiguarlo, analizamos 39 sistemas de diseño disponibles al público.

Resultado de la investigación de UXPin

Los sistemas de diseño son bastante consistentes en estructura. Definitivamente vemos muchas similitudes entre los diferentes sistemas. Por lo general, tenemos una biblioteca de patrones de interfaz con referencias de código correspondientes, una definición de estilo de alto nivel o elementos estructurales (cuadrícula, colores, tipografía) y un conjunto de principios de diseño.

Si desea estructurarlo aún más, aquí hay algo que encontré realmente útil para explicar los sistemas de diseño a otros:

El sistema de diseño es verdaderamente un estándar de oro: desde los bloques de construcción generales de cada pieza de diseño, hasta los patrones de la interfaz de usuario y la creación de reglas de alto nivel que definen el futuro del producto.

Sin embargo, un sistema de diseño no está escrito en piedra. Debe evolucionar con el producto y siempre reflejar la verdad.

Construir y mantener un sistema de diseño es definitivamente un gran desafío, pero vale la pena enfrentarlo. Después de todo, puede sacarnos del círculo vicioso del diseño sin escala. Para mí, sonaba como un sueño, uno que realmente necesitábamos realizar en UXPin.

Consistencia de diseño en UXPin: por qué realmente necesitábamos un sistema de diseño

Nuestra propia investigación nos golpeó en la cara. Hemos tratado de combatir la inconsistencia en nuestra interfaz con un conjunto de principios de diseño y bibliotecas rudimentarias, pero nunca nos hemos movido a un sistema de diseño completo.

Si bien no llamaría a nuestra experiencia fracturada o completamente inconsistente, definitivamente tuvimos peculiaridades que debían estandarizarse. Toma estos botones principales:

Son visualmente diferentes, pero jerárquicamente idénticos. Ambos botones son responsables de la acción más importante en un contexto dado. Puede parecer una cosa pequeña, pero las grandes experiencias se construyen a partir de cosas pequeñas.

Después de hacer algunas verificaciones de nuestro propio producto y marcar las inconsistencias, decidimos hacer una auditoría completa como parte de la construcción de nuestro sistema de diseño. Necesitábamos construir un andamiaje para el crecimiento futuro del producto y del equipo.

Curiosamente, ya existía un cierto entorno modular en UXPin. Nuestro equipo de desarrollo se mudó a React.js hace más de un año y el equipo de desarrollo web comenzó a construir y mantener sus archivos Less de una manera altamente estructurada y modular.

El repositorio de hojas de estilo UXPin muestra un buen nivel de modularidad

Mientras tanto, el diseño necesitaba ponerse al día. Junto con el desarrollo, necesitaríamos expandir este enfoque para que ambas disciplinas escalen en armonía.

El viaje por delante

En el momento en que lea estas palabras, nuestro equipo de Operaciones de diseño (liderado por el suyo) ya tiene varios sprints por delante. Me da tiempo para reflexionar sobre lo que hemos logrado, para poder compartir todas las lecciones difíciles con ustedes.

Algunas partes del sistema ya existen, las partes se están trabajando gradualmente. Aquí está nuestra hoja de ruta actual:

En la próxima publicación, compartiré cómo creamos un inventario del diseño de UXPin y cómo eso ayudó a crear nuestro sistema de diseño.

¡Manténganse al tanto!

¿Estás buscando todos los artículos de esta serie? Aquí están:

  • Sistemas de diseño Sprint 0: la bala de plata del desarrollo de productos.
  • Design Systems Sprint 1: El inventario de la interfaz
  • Sistema de diseño Sprint 2: paleta de un color para gobernarlos a todos
  • Sistema de diseño Sprint 3: gestión de los conceptos básicos
  • Sistema de diseño Sprint 4: principios de diseño
  • Sistema de diseño Sprint 5: Gestión de la tipografía
  • Sistema de diseño Sprint 6: los iconos más rápidos de la Tierra

Y te interesan más en profundidad los sistemas de diseño:

  • El sistema de diseño mínimo viable
  • Los sistemas de diseño son un lenguaje. Y eso está cambiando el desarrollo de software para siempre
Únete: https://www.uxpin.com/design-systems-early-access