Las lecciones clave que aprendí creando un sistema de diseño popular

Ilustración de la super talentosa Maya Ealey

En 2012, comencé un pequeño proyecto paralelo para estandarizar los patrones de diseño y la experiencia del usuario de 12 productos de software en Atlassian. Durante los próximos 3 años, este pequeño proyecto paralelo se convirtió en un proyecto muy grande que se convirtió en mi trabajo a tiempo completo que implicó la creación y el envío de varias versiones del Sistema de Diseño Atlassian, y estableció el equipo de la Plataforma de Diseño (que todavía existe hoy pero con muchos más). personas) para mantener y aprovechar los sistemas de trabajo en toda la gama de productos Atlassian.

Con el aumento en las discusiones sobre sistemas de diseño en los últimos años, ocasionalmente me piden consejos o ideas de mi experiencia en la construcción del sistema de diseño en Atlassian. Si ha considerado crear uno para su producto o empresa, está en proceso de hacerlo, o ha intentado y dado por vencido, con suerte, estos conocimientos lo ayudarán a crear un mejor sistema de diseño para su empresa.

En Asana, estamos al comienzo de nuestro viaje para construir un sistema de diseño holístico. Descubrí que reflexionar sobre estas lecciones nos ha ayudado a preparar al equipo y a la empresa para el éxito, de modo que podamos ofrecer el verdadero valor de un sistema de diseño.

1. Comience haciendo cosas que no escalen

La primera versión del Atlassian Design System consistía en unos 20 archivos HTML estáticos que alojaba en una Mac Pro debajo de mi escritorio. No había plantillas en estos archivos, ni control de versiones, había importado el CSS de nuestros productos y escribí el marcado yo mismo para cada componente. Esta versión fue desagradable de actualizar y no era escalable, pero suficientes personas encontraron valor en ella y me inspiró para invertir más tiempo y esfuerzo que nos pusieron en el camino para crear el Sistema de Diseño Atlassian.

Sin hacer algo que no se escalara, podríamos haber tardado mucho más en comenzar. Cuando trabaje en su sistema, trate de no obsesionarse demasiado con la ingeniería excesiva de un flujo de trabajo perfecto y perfecto, sino que busque formas rápidas de comenzar, y siga progresando si está funcionando.

2. No arme sus pautas

Si está creando un sistema de diseño para que otros no cometan errores que usted (¡y solo usted!) Necesitará corregir más adelante, es posible que no esté abordando esto con la mentalidad correcta.

El objetivo de un sistema de diseño es escalar usted mismo (y a su equipo de diseño) para construir un producto más rápido y capacitar a todos para tomar mejores decisiones de diseño.

Un sistema de diseño es una herramienta para el empoderamiento, no un arma para controlar el diseño.

Es realmente importante no tirar el libro de reglas a las personas y matarlo a la policía. En su lugar, trate de abordar el sistema con la filosofía de que un sistema de diseño es una herramienta para democratizar el diseño en toda su empresa. Este enfoque realmente abre las puertas para que las personas quieran contribuir y ser parte de él. Recuerde, un sistema de diseño es una herramienta para el empoderamiento, no un arma para controlar el diseño.

3. "Vamos a rediseñarlo todo"

Resista el impulso de aprovechar esto como una oportunidad para rediseñar su producto. Crear un sistema y rediseñar su aplicación al mismo tiempo lo retrasará significativamente. Es mucho más fácil documentar lo que tiene hoy, tanto los patrones buenos como los malos, y luego corregir los patrones malos con un rediseño del lenguaje visual después.

Hubo muchos intentos de Atlassian para rediseñar el conjunto de productos antes de que el trabajo preliminar para documentar los componentes de nuestro sistema fuera satisfactorio. Le llevó mucho tiempo construir la arquitectura del sistema, pero a Atlassian le resultó más fácil (y más rápido) actualizar el lenguaje visual más adelante porque los cimientos eran sólidos.

4. Obtenga soporte funcional cruzado para su sistema de diseño

Creo que crear un sistema de diseño no es un ejercicio académico. Si nadie usa el sistema, o no ayudó a su equipo a moverse más rápido y tomar mejores decisiones, puede estar perdiendo el tiempo.

Al hacer que otros sigan lo que está haciendo y contribuyan a mejorar los patrones y las pautas, obtendrá la aceptación y el apoyo que necesita para realmente marcar la diferencia y crear excelentes productos. No puedo enfatizar demasiado lo importante que es esto para el éxito de sus sistemas.

En 2013, la relación diseñador / ingeniero era algo en el rango de 1 diseñador por cada 15-20 ingenieros. Mientras me estremezco al pensar en ese número hoy, en ese entonces intenté usar ese desequilibrio para mi ventaja. Algo que me ayudó a obtener la organización de ingeniería de mi lado en Atlassian fue crear una charla para nuevos principiantes durante su primera semana de incorporación a la empresa. Alrededor de 15 personas estarían allí cada semana y podría lograr que entiendan lo que estábamos tratando de hacer desde el día 1. Por ejemplo, repasaría algunos antecedentes de cómo solíamos tener 44 menús desplegables diferentes menús (no una exageración), pero tenemos uno ahora y así es cómo debe usarlo.

A lo largo de 2013, y con Atlassian duplicando su tamaño casi todos los años, básicamente había abordado a unas 500 personas sobre la importancia de nuestro sistema de diseño y cómo pueden usarlo. Encontré que esta es una forma realmente efectiva de cambiar la cultura de la empresa con respecto al diseño.

5. Ir más allá de una guía de estilo

Un sistema de diseño (o pauta) es diferente de una guía de estilo. Tener todos los componentes en un archivo de Sketch es relativamente fácil de hacer: todos los botones primarios son del mismo color o está utilizando una cuadrícula de 8px. Pero, ¿cuándo uso un botón primario en lugar de un botón secundario? ¿Qué tipo de etiquetas deben tener los botones? Cuando un botón primario y uno secundario están juntos, ¿cuál está a la izquierda?

Estas preguntas son los tipos de cosas que un sistema de diseño debería resolver, no solo documentar los valores de píxeles de sus componentes. Muchos equipos de diseño se están perdiendo este aspecto cuando crean su sistema y finalmente se pierden un poderoso efecto secundario del trabajo del sistema.

Como mencioné anteriormente, el equipo de diseño de Atlassian a principios de 2013 era relativamente pequeño (~ 13 personas) en comparación con el equipo de ingeniería (~ 300 personas). Uno de los beneficios de incluir pautas escritas fue que los ingenieros podían hacer una gran cantidad de progreso sin un diseñador allí. Significaba que podíamos dejar de diseñar pantallas en Sketch y, en cambio, saltar en una pizarra y generar una lluvia de ideas, o comenzar a trabajar en problemas de productos mucho más grandes que existían aguas arriba.

6. Haga que alguien supervise el sistema, pero asegúrese de que todos contribuyan

Utilizamos un modelo centralizado que permitía que cada diseñador de la empresa contribuyera. También tuvimos un programa de rotación de ~ 3 meses en el que los diseñadores e ingenieros fueron tomados de sus respectivos productos y trabajarían en el equipo de Design Platform para impulsar el sistema. Contribuirían en gran medida mientras formaban parte de nuestro equipo y luego regresarían a sus equipos de productos originales como defensores firmes del sistema.

Tener a alguien que supervise el sistema es muy, muy importante. Esta persona (yo en Atlassian) es probablemente un diseñador que trabaja como gerente de producto. Deben salvaguardar el sistema, pero tengan mucho cuidado de no crear un entorno donde la gente lo rechace y se vuelva pícaro. No olvide que el propósito del sistema es hacer que todos en la empresa sean mejores diseñadores.

¿Interesado en saber más sobre Asana? Tenemos un sitio ordenado en https://asana.design con un poco sobre quiénes somos y qué hacemos. ¡También estamos contratando gerentes de diseño y diseñadores de productos en nuestra oficina de San Francisco, uno de los mejores lugares para trabajar en 2018 en los Estados Unidos! (Podemos trasladarlo si actualmente no se encuentra en el Área de la Bahía).

Si te gustó esta publicación, puedes seguir nuestra publicación para obtener más historias de Asana Design