Sistema de diseño de plasma

Crear y documentar un sistema de diseño de producto.

Este estudio de caso pretende hacer una crónica de cómo creamos un sistema de diseño en WeWork. Compartiré información sobre nuestro proceso, diseño de producto, las herramientas que utilizamos para crear e implementar el sistema, y ​​también cómo documentamos y compartimos el sistema con nuestro equipo.

Una interfaz de usuario de ejemplo de uno de nuestros productos que utiliza el sistema de diseño Plasma

Introducción

WeWork crea espacios de trabajo compartidos inspiradores, con énfasis en la comunidad. Diseñamos y construimos nuestras propias herramientas digitales internas para satisfacer nuestras necesidades comerciales y para administrar nuestra red global de edificios y miembros. "Plasma" es un sistema de diseño creado para estas herramientas comerciales internas.

Plasma as a concept fue fundado por uno de nuestros líderes creativos digitales, Nick Stamas. Nick presentó a nuestros ingenieros el concepto de construir un sistema en React JS y Sass, y desde entonces ha liderado la construcción del sistema. Dirijo su diseño, dirección creativa y documentación. También trabajo con la diseñadora de productos Deena Edwards, quien aplica Plasma a nuestros productos.

Paso 1: exploración de diseño

Comenzamos a experimentar con tres productos internos diferentes a los que se aplicaría el sistema: descubrir, establecer y probar el estrés de un estilo (s) y una biblioteca de componentes y patrones. La dirección, la interfaz de usuario (UI) y el estilo cambiaron con el tiempo, lo que he intentado capturar a continuación para mostrar la progresión y la gama de productos probados.

Dibujar mesas de trabajo que muestren exploraciones iniciales

Es importante tener en cuenta: la dirección de diseño de este sistema fue influenciada en gran medida por las pautas de marca digital de WeWork, conocidas como WeWork Digital Foundations. Puedes leer más sobre esto aquí.

Simple, claro y limpio.

Nuestras herramientas internas son todos productos basados ​​en datos y basados ​​en la web. La simplicidad, la legibilidad y el tiempo de carga son primordiales. Desde el principio supimos que estábamos luchando por una estética clara y limpia.

Teoría del color

El sistema es predominantemente blanco, negro y gris. Es importante que el diseño no distraiga del contenido, por lo que la sutileza es clave. Se usan colores más brillantes para transmitir significado. El amarillo se usa para acciones principales, ya que el amarillo es uno de los colores centrales de la marca WeWork. El azul es para enlaces de navegación. El rojo es para advertencias y alertas. También utilizamos el púrpura como color terciario, ya que es un color heredado en nuestras herramientas internas y queríamos mantener un aire de familiaridad en nuestros productos.

Una tipografía a juego

Plasma utiliza exclusivamente Helvetica, una fuente simple y audaz. Las computadoras Mac tienen Helvetica preinstalada y cualquier computadora que no recurra a Arial (una fuente similar, pero segura para la web). Esto es importante, ya que no se necesitan scripts de terceros para cargar la fuente, lo que significa tiempos de carga de página más rápidos.

Diseñando todos los estados. Un vistazo a nuestro archivo maestro de croquis para el sistema de diseño Plasma

Diseño de producto

Estoy seguro de que has visto kit kit de interfaz de usuario, ¡descarga gratuita! ’En Behance y Dribbble muchas veces. ¡Algunas se ven hermosas! Pero muchos de ellos tienen defectos en última instancia, a menos que estén diseñados con productos, contenido y datos reales. Nunca ajuste el contenido al diseño, el sistema debe funcionar con cualquier contenido. No diseñe solo para el mejor de los casos: tenga en cuenta todos los escenarios.

Es vital crear un sistema de diseño utilizando productos a los que se aplicará, con datos y problemas reales.

Nuestro objetivo aquí no es crear el sistema más bonito, es diseñar un sistema que satisfaga mejor nuestras necesidades: las necesidades comerciales en el caso de Plasma, pero las necesidades del cliente para algunos sistemas. Por supuesto, nos propusimos crear productos deliciosos, pero solo para mejorar la experiencia del usuario (UX).

A continuación se muestra una pequeña idea de los tres productos que dieron forma al sistema:

Producto 1: CMS (también conocido como "Maggie")

Nuestro producto CMS permite a nuestros equipos de marketing y crecimiento agregar, editar y administrar nuestros edificios y mercados en nuestro sitio web central de marketing: wework.com. Antes de Plasma, nuestro CMS era simplemente una serie de tablas HTML con personalización básica de CSS. Plasma en forma de UI y UX de estos productos. A continuación se muestra una pequeña muestra de IU de este producto. Puede hacer clic en las imágenes para ver cada tamaño completo.

Muestras del producto CMS con el sistema de diseño Plasma aplicado.

Producto 2: Estación espacial

Nuestro producto Spacestation es una de nuestras herramientas más utilizadas en la sede de WeWork y en cada uno de nuestros edificios a nivel internacional. Es un producto con muchos datos para administrar una gran base de datos de información y facturación relacionada con nuestros miembros y edificios. Son muchas tablas, entradas de formularios, filtros y navegación, ¡el banco de pruebas perfecto para un sistema de diseño de productos! Trabajé con Deena Edwards, la diseñadora líder de productos en Spacestation, para diseñar, aplicar, probar el estrés e iterar sobre el sistema tal como se aplicaba a este producto.

Muestra, concepto de interfaz de usuario del producto Spacestation con el sistema de diseño Plasma aplicado

Producto 3: Consulta de datos

¡La naturaleza del negocio de WeWork significa que tenemos muchos datos! En Digital, esto significa que tenemos una gran cantidad de datos a nuestra disposición que podemos aprovechar para construir mejores productos para satisfacer las necesidades de nuestros clientes. La idea de este producto surgió en un momento muy oportuno: ya habíamos comenzado a concebir el sistema de diseño Plasma y sabíamos que este nuevo producto podía usar el sistema e impulsarlo aún más con la necesidad adicional de datos. Trabajé con nuestro equipo de ingeniería de datos para diseñar paneles y herramientas de consulta de datos. Algunas de esas exploraciones se incluyen a continuación.

Exploraciones de diseño para un producto de datos, utilizando el sistema de diseño Plasma. ¡Todos los datos mostrados están hechos para presentación pública!

Paso 2: patrones y componentes

Después de días de exploración, revisiones e iteraciones, llegamos a un estilo con el que estábamos contentos. La tarea ahora era crear un amplio conjunto de patrones y componentes, que representara todos los estados y escenarios, esencialmente creando un kit de interfaz de usuario completo para que nuestro equipo lo use.

Nuestro sistema está compuesto por elementos fundamentales como estilos de texto definidos para encabezados y contenido, una paleta de colores, lo que llamamos patrones y componentes y plantillas.

Los patrones y componentes de IU consistentes hacen una gran diferencia al guiar a un usuario a través de un producto.

Patrones

Los patrones se refieren a elementos o prácticas recurrentes o siempre presentes en un producto. Los ejemplos incluyen navegación, tarjetas, tablas, estados vacíos o de carga, notificaciones, alertas y modales. Los patrones son versátiles, pueden contener componentes y pueden combinarse para formar una plantilla.

Componentes

Componentes se refiere a elementos distintivos de la interfaz de usuario que se utilizan una y otra vez en un producto, normalmente accionables, a veces para transmitir significado. Algunos ejemplos incluyen botones, entradas, selecciones, conmutadores, avatares e información sobre herramientas.

El sistema de diseño (y los recursos para la documentación) en progreso en Sketch

Siga este enlace para un recorrido rápido por el archivo de boceto maestro (visto anteriormente) que contiene todos los patrones y componentes para el sistema de diseño.

La mejor herramienta para el trabajo.

Nuestra herramienta de elección para el diseño de la interfaz de usuario es Sketch. Las características que hacen que Sketch sea excelente para el diseño del producto lo hacen especialmente poderoso para el diseño del sistema. Cuando crea cientos de símbolos editables y estilos de texto fácilmente aplicables, la simplicidad de Sketch se vuelve crucial.

Sobre la capacidad de respuesta

El plasma está diseñado para ser receptivo. Si bien es sencillo crear componentes receptivos, no es tan fácil crear una maqueta de manera receptiva. O eso pensamos. Es importante diseñar interfaces de usuario web que funcionen en diferentes anchos de navegador. Afortunadamente, Sketch proporciona la capacidad de configurar elementos para responder de diferentes maneras a medida que crecen o se reducen de tamaño. Usando una combinación de configuraciones, grupos y símbolos, puede crear una interfaz de usuario básica receptiva en Sketch. Si bien esto no lo ayudará con los puntos de interrupción, es poderoso para ver rápidamente cómo o si el diseño funciona en diferentes tamaños de navegador. Por lo tanto, creamos nuestra biblioteca de patrones y componentes para responder.

Diseño receptivo en Sketch

Lea este artículo para obtener una introducción al diseño receptivo en Sketch.

Paso 3: el poder de una plantilla

En aras de la coherencia en nuestros productos, es importante que hagamos que nuestro equipo diseñe con Plasma lo más simple posible. Afortunadamente, los símbolos y estilos de texto editables de Sketch facilitan la distribución y el mantenimiento de un sistema de diseño.

Es fácil que el diseño de un producto se extravíe si nuestro equipo no puede simplemente aplicar el sistema en su trabajo.

Tenemos un archivo de boceto maestro (siempre en progreso) para todo Plasma. ¡Lo último que queremos es que las personas trabajen desde este archivo maestro, editando o borrando accidentalmente cosas! Así que creamos una plantilla Sketch para que nuestro equipo la use, alojada en Dropbox. La plantilla tiene una amplia gama de símbolos editables, todos los estilos de texto, colores de marca y una mesa de trabajo básica lista para usar, lo que facilita la configuración y el ensamblaje rápido de una interfaz de usuario usando Plasma.

Trabajar con patrones y componentes establecidos nos libera para centrarnos en la experiencia del usuario, la resolución de problemas y la construcción de características y productos significativos.

Cubriendo todos los escenarios

Contamos con todos los "estados" en el sistema, y ​​hay símbolos para cada uno de estos estados. Por ejemplo, una entrada de formulario tiene un marcador de posición, desplazamiento, foco, relleno, error y estado deshabilitado. En el ejemplo a continuación para nuestro componente de selección múltiple, a la derecha verá el símbolo "selección múltiple / marcador de posición" seleccionado. Desde allí, puede acceder a un menú desplegable de todos los demás símbolos, y cambiar el símbolo a "selección múltiple / llenado" o "selección múltiple / error". ¡Esto es genial para diseñar y mapear flujos de productos!

Todos los estados de las entradas de formulario, botones, etc. se contabilizan en símbolos (en croquis)

Biblioteca de artesanía

Una gran herramienta que también utilizamos es el complemento Craft Library de InVision for Sketch. Esto nos permitió crear una biblioteca compartida de activos (alojada en Dropbox) que nuestro equipo puede usar para arrastrar y soltar elementos en sus diseños.

Actualización (diciembre de 2017): ahora usamos Sketch Libraries, en lugar de Craft Library. Hace más o menos lo mismo, ¡pero mucho más eficientemente! Cualquier cambio que realice en el archivo de boceto maestro para la biblioteca, se sincroniza con cualquier diseño utilizando los componentes de la biblioteca. Muy genial.

Tener una biblioteca preestablecida de botones, entradas, estilos, etc. reduce el riesgo de que los elementos se rediseñen repetidamente.
Craft Library en el trabajo en Sketch. Esta es una visión de nuestro archivo maestro de Sketch para Plasma.

Paso 4: documentar un sistema de diseño

Al crear un sistema de diseño, es importante tener en cuenta que no será el único diseñador (o desarrollador) que trabaje con él.

Documentar literalmente el sistema de diseño fue el mayor desafío para mí en este proyecto. Normalmente, creo especificaciones anotadas, normalmente son una serie de archivos .psd o .sketch, para acompañar los diseños. Un buen ejemplo de este enfoque se puede ver en mi estudio de caso para Adobe Portfolio. Si bien las especificaciones pueden contener todos los detalles imaginables, aún se pueden pasar por alto o malinterpretar cosas cuando un diseñador nuevo o de reemplazo se pone en sus zapatos. ¡Queríamos hacerlo mejor con Plasma!

¿Cómo documentar un sistema de diseño?

Comencé leyendo e investigando cómo otros equipos habían hecho esto. Afortunadamente, Internet está lleno de respuestas para esto, y muchas compañías han hecho pública su documentación.

Aquí hay una lista útil de enlaces a toda la documentación del sistema de diseño en línea de la nota que encontré. Espero que ayude :)

Mi objetivo inicial, después de haber visto tantos ejemplos estelares en línea, era crear un sitio web para documentar el sistema, las especificaciones, mostrar usos de ejemplo y especificar pautas para todos los patrones y componentes. Actuaría como una referencia rápida, o una biblia para estudiar en detalle.

Sin embargo, no quería detenerme por las limitaciones de diseño, construcción y tiempo de crear un sitio web para esto. Entonces, para comenzar, simplemente creé un nuevo Google Doc y comencé a escribir. A medida que crecía el documento, me di cuenta de que hacía exactamente lo que necesitábamos: la única razón para crear un sitio web público y de marca para esto sería como un 'proyecto de orgullo' para WeWork Digital, o como un recurso si abrimos el sistema de código abierto .

¡Pero por ahora, Google Docs demostró ser el medio perfecto! Todo nuestro equipo puede acceder fácilmente, además de que pueden comentar en línea, lo cual es excelente para comentarios. La función "Esquema del documento" de Google Docs, más la capacidad de vincular / anclar a marcadores y encabezados dentro del documento, proporciona una amplia navegación. Jobs es bueno! ... como decimos en el norte de Inglaterra :)

Vista previa de nuestra documentación

Como la documentación está en un Google Doc privado, he capturado algunas capturas de pantalla a continuación para dar una buena idea de cómo se construyó, distribuyó y qué contiene. Puede hacer clic en las imágenes para ver cada tamaño completo.

Documentación del sistema de diseño de plasma en un documento de Google

Actualización: diciembre de 2017

Desde la publicación de este artículo, unos 11 meses después, la documentación se ha convertido en un sitio web que puedes ver. Utilizamos GitHub para permitir el control de versiones y el fácil acceso de nuestro equipo para escribir y contribuir a la documentación. ¡Escribe en rebajas y con una pequeña personalización de CSS puede adaptar la documentación a su marca! GitBook no es perfecto, no responde, pero hace el trabajo .

Ver la documentación del sistema de diseño de plasma

Detrás de escena (descarga)

Creé un pequeño recurso con una idea de cómo se configuró este sistema de diseño en Sketch, incluida la descarga de un archivo de Sketch y un extracto de la documentación. Vea el recurso en el siguiente enlace:

Paso 5: Ingeniería de un sistema de diseño

A medida que la documentación estaba tomando forma, el diseño necesitaba una forma de comunicar y rastrear eficientemente la construcción e integración del sistema a los desarrolladores. Elegimos (y recomendamos) usar GitHub para esto. Creamos "problemas" para componentes específicos, compartiendo vistas previas del diseño, especificaciones y CSS / Sass para facilitar el proceso de desarrollo. De esta manera, nuestros ingenieros pueden abordar estos trozos de tamaño mordisco uno por uno, ya que están listos, son responsables y ¡no se pierde nada!

Usamos GitHub para comunicar los componentes que se construirán.

Diseño y codigo

Nuestro desarrollador principal en Plasma también es diseñador. Nuestro diseñador principal (yo) también es desarrollador. Esto se refleja en nuestro proceso y en la calidad del sistema. A través de nuestra documentación, nos gusta exponer a nuestros diseñadores a CSS / Sass, alentándolos a comprender cómo funcionan las cosas. Desde un punto de vista de "aprender a diseñar con el sistema", ayuda a ver y aprender explícitamente los valores, espacios y convenciones de nombres en la compilación. También ayuda a cerrar la brecha entre diseño e ingeniería.

Convenciones de nombres

Por último, pero no menos importante: uno de los objetivos del sistema de diseño es lograr que los diseñadores, desarrolladores y gerentes de producto hablen el mismo idioma. Podemos ayudar a lograr esto con convenciones de denominación semánticas consistentes con las que todos estamos familiarizados (en el diseño y el código), ya sean variables Sass, estilos de fuente, colores, patrones y componentes de la interfaz de usuario, plantillas o nombres de página.

Todo está tomando buena forma.

Este no es el fin

Tenemos grandes planes para Plasma. Estamos trabajando arduamente para desarrollar el sistema e implementarlo en los productos de Spacestation y CMS que viste anteriormente. Estamos aprendiendo mucho en el proceso y nuestro objetivo es obtener comentarios valiosos de nuestro personal global utilizando nuestras herramientas e iterar en el sistema. Hemos hablado sobre Plasma de código abierto, pero aún no hemos llegado.

¡Espero que hayan disfrutado este estudio de caso, una visión de nuestro proceso de diseño, las herramientas que usamos y una vista previa de Plasma! :)

Deje [un producto] en una nota positiva y amigable :)

Un agradecimiento especial a Nick Stamas y Deena Edwards en WeWork por su arduo trabajo y apoyo en este proyecto. ¡Y ‘mi editor’ Meagan Fisher!

PD No crea un sistema de diseño de producto como este al saltar directamente a Sketch. Mucho trabajo acumulado para llegar a esta etapa. Mi co-líder en este proyecto, Nick Stamas, escribió sobre este proceso en: "Vender un sistema de diseño en su empresa", que le recomiendo que lea a continuación.

Actualización: 2019. ¡Escribí un libro sobre diseño de sistemas y pautas de marca digital! https://designsystemfoundations.com