Proceso de diseño para nuevos componentes en Design System
En mi primer experiencia como diseñadora UX tuve la oportunidad de desarrollar e implementar el Design System de la empresa junto con el equipo de desarrollo.
Al ser mi primer trabajo formal como UX/UI Designer tenía una vaga idea de lo que me esperaba y asumí que habría un guion a seguir, alguna dirección proporcionada, una guía de estilo que podría usar, herramientas y procesos establecidos, suena lógico, verdad?
Pues no.
Fui la primera diseñadora UX dentro de la empresa. Un rol nuevo y desconocido por gran parte del equipo. Los diseños con los que contaban fueron creados por ellos mismos, utilizaban Adobe Photoshop o Illustrator para el diseño de todo tipo de elemento grafico. No había un proceso ni una descripción clara de lo que yo debería hacer.
Como primer paso mi intención fue crear un kit de interfaz de usuario lo que me facilitaría el trabajo y ordenaríamos todos los recursos que teníamos desparramados por ahí.
Pero a la vez debía cumplir con los nuevos requerimientos y diseñar las nuevas funcionalidades. Los primeros meses fueron caóticos.
Durante un tiempo hice malabares para poder cumplir con todo el trabajo, mientras tanto fuimos evangelizando a toda la empresa sobre los beneficios de la creación de un Sistema de Diseño.
Finalmente llegamos a un acuerdo y nos dieron el visto bueno ✓ para empezar a desarrollarlo.
¿Y ahora?
Si bien había estudiado, leído mil artículos y realizado una investigación exhaustiva de cada uno de los Sistemas de Diseño más reconocidos en la actualidad, el inicio fue muy doloroso.
Si estás buscando recursos, al final de la publicación encontrarás una lista con 10 de los Design System más relevantes.
Por más que tengamos clara toda la teoría sobre un tema en particular, en la practica nunca sale a la perfección. Una metodología puede ser acertada para una empresa, pero completamente errónea para otra. La clave es saber adaptar los recursos y tiempos para crear un proceso que se adapte a las necesidades y posibilidades de cada empresa. Todo esto involucra muchas pruebas y error.
Un sistema de diseño no comienza con la elección de un primer color. Debíamos organizarnos, obtener el compromiso del equipo, planear una estrategia, establecer objetivos, adaptar un proceso, documentar y finalmente converger en un nuevo lenguaje visual.
Inventario
La realización de un inventario de interfaz es el primer paso fundamental para establecer un sistema de diseño eficaz. Generalmente se realiza en la primera etapa del proceso para evaluar todo el contenido de un sitio.
Un inventario de interfaz es similar a un inventario de contenido , solo que en lugar de examinar y categorizar el contenido, estamos haciendo un inventario y categorizando los componentes que forman parte de nuestro sitio web o aplicación.
Brad Frost
Para la categorización de los componentes y desarrollo del sistema me he basado en la metodología de Brad Frost: Atomic Design.
La documentación de patrones y componentes resalta las inconsistencias y prepara el escenario para una conversación más amplia sobre el establecimiento de un nuevo flujo de trabajo. Es un proceso un poco tedioso, pero gracias a ello tendremos una nueva perspectiva sobre cuál es el contenido de nuestro sitio y cómo abordarlo.
Comencé tomando capturas de pantalla de cada página, cada modal, cada menú, cada botón, cada ícono… absolutamente todo.
Iconos
Color
Botones
Luego de haber capturado cada uno de los componentes y patrones de nuestra app, los agrupé en categorías.
Mis ojos sangraron. Verlos uno al lado del otro reveló exactamente por qué necesitábamos un sistema de diseño. Había diferentes estilos de botones sin sentido aparente, variaciones de un mismo color, estilos de fuente aplicados incorrectamente e íconos diferentes para un mismo uso.
Matriz de Cocción
Para llevar un seguimiento del proceso he aplicado lo que Nathan Curtis llama Doneness Matrices.
Una Matriz es una cuadrícula (por lo general, una hoja de cálculo) que nos permite realizar un seguimiento de las diferentes partes del proceso de diseño hasta su finalización. Las filas representan los elementos a diseñar (diseños de estilo, componentes, iconos, patrones) y las columnas representan las etapas (propuesta, prototipado, código, documentación, revisión, etc). Una matriz proporciona una visualización rápida de la “finalización” del proyecto y un estado detallado de cada elemento.
El documento fue compartida con el equipo para que todos podamos conocer el estado y la evolución del proceso. Gracias a la matriz tuvimos una visión clara de que teníamos que hacer, cuando y quien lo estaba haciendo.
Etapas del Proceso
Los pasos para desarrollar una nueva funcionalidad o crear un nuevo componente para el Design System fueron los siguientes:
Existen varias actividades a realizar dentro de cada paso, cada una con un periodo de tiempo diferente.
Al organizar el trabajo en fases, el equipo podía identificar las subtareas necesarias para ofrecer una característica sólida y de alta calidad de manera predecible.
Step by Step
#1: Propose
El paso Propose (Proponer) aclara el potencial y la relevancia de una nueva característica o componente. Se evalúan las necesidades, se determinan los requisitos y se planifica el trabajo. Es el momento en donde se decide si llevar a cabo la idea o no.
Etapa: Sprint 0. Product Strategy.
Actividades: Evaluación de requisitos, investigación, análisis del producto y sistema, discusiones con el equipo y propuesta formal del requerimiento.
Definition of Done (DoD):
- Como equipo de producto, entendemos el alcance y el costo de hacer esta nueva funcionalidad/componente y quién es la persona responsable en cada fase.
- Como equipo de producto (o PM), hemos aceptado o rechazado la propuesta y la hemos priorizado en nuestra lista de pedidos (Backlog).
Entregables:
- Asignación de tickets para las siguientes etapas en herramientas como Jira, ProofHub, Assembla, Asana o similar.
- Documento con especificaciones y propuesta: Debe tener, Podría tener, Dependencias. (Google Docs, Microsoft Word, Dropbox, o herramientas similares)
- Documento de Investigación (Google Docs, Microsoft Word, Dropbox, Hojas de cálculo, o herramientas similares)
#2: Design
En la etapa de Diseño se resuelve la interfaz y el diseño visual. Se detallan una serie de variaciones del estilo y estado de los componentes. Se crean mockups de alta fidelidad con sus respectivas interacciones para completar la etapa de Código de manera eficiente.
Etapa: Sprint 0 (Design) + Sprint 1 (Sesión de Grooming y Planning para discusión y definición de detalles)
Actividades: Trabajo de diseño iterativo y feedback constante con el equipo.
Herramientas: Emplearemos herramientas como Adobe XD, Sketch, InVision, Figma o similares.
Definition of Done (DoD):
- Como PM (o función similar), he aprobado el diseño final.
- Como equipo de producto, hemos acordado que el diseño resuelve el problema y es adecuado para su uso en todos los productos.
- Como equipo, entendemos el alcance del problema y tenemos claros los aspectos técnicos para solucionarlo.
- Como desarrollador, tengo un nivel suficiente de variaciones de estilos, estados y otros detalles para codificar el componente.
Entregables:
- Tarjeta con especificaciones técnicas, requisitos y notas generales (Jira, ProofHub, Assembla, Asana o herramienta similar)
- Plantilla de Diseño: Notas de estilo. Especificaciones generales- Comportamiento de componentes. Copys.
- Mockups (Alta fidelidad): Diseño visual y de interacción
#3: Code
La etapa de Code incluye configurar un entorno, componer y probar a fondo, e involucrar a todo el equipo antes de fusionar una solución aprobada. En esta etapa, las pruebas y revisiones son bastante completas.
Etapa: Sprint 2
Actividades: Desarrollo de código HTML, CSS, JS y testing. A menudo en un entorno demo para demostrar las capacidades de la función antes de enviar a producción.
Herramientas: Código y activos. GitHub y Pull Requests para comentarios y correcciones.
Definition of Done (DoD):
- Como diseñador, he revisado el Look & Feel del código y he confirmado que los requerimientos se han implementado correctamente.
- Como desarrollador (o especialista QA), he revisado que el código funciona correctamente, cumple con todos los criterios de calidad (accesibilidad, navegador soporte, etc.), y respeta las convenciones y los estilos del sistema de diseño.
#4: Documentation
La Documentación se centra en comunicar qué se construyó y cómo se lo debe usar. La documentación es una tarea separada para que los autores se centren en la calidad y profundidad que anhelan los usuarios del sistema.
Etapa: Sprint 3
Actividades:
- Documentación para temas como “Cuándo Usar”, “Comportamientos” y otras pautas relevantes sobre el componente o funcionalidad entregada.
- Creación del código final con demostraciones de ejemplo.
- Si es necesario, ilustraciones, demostraciones interactivas y capturas de pantalla.
Herramientas: Documento compartido con el equipo en plataformas como Adobe XD, Figma, Sketch o similar. Esta colaboración incluye a los diseñadores, desarrolladores, QA, y todos los involucrados en el proceso.
Definition of Done (DoD):
- Como miembro del equipo, tendré suficiente orientación sobre el diseño (Cuándo Usar, Comportamientos, Estilo Visual, Contenido y más)
- Como miembro del equipo, tendré suficientes especificaciones de código (Tablas de Referencia, Variables, Demostraciones/ejemplo de Código) para implementar la función correctamente.
Entregables:
Documentación final con todos los cambios producidos durante el desarrollo.
#5: Release
Finalmente llegamos a la última etapa del proceso. Contamos con todos los recursos y elementos necesarios para el lanzamiento del nuevo componente en la plataforma de publicación elegida.
Etapa: Sprint 4
Actividades:
- Migración del archivo Adobe XD o similar a la plataforma de publicación.
- Carga de activos como imágenes, plantillas de diseño y demostraciones interactivas.
- Finalización de demostraciones/ejemplos de código.
- Prueba de visualización de páginas, enlaces y otros controles de calidad de publicación.
Herramientas: Storybook, React Cosmos, Docz, o similar. Esta colaboración incluye al diseñador, desarrollador, QA y todos los involucrados en el proceso.
Definition of Done (DoD):
- Como QA, revisé los cambios de página y probé las visualizaciones y los vínculos de las páginas.
- Como miembro del equipo, tengo acceso a documentación detallada de un patrón/componente completo que puedo empezar a utilizar.
Entregables:
Lanzamiento en la plataforma elegida para la publicación del Design System, ej. Storybook
El propósito principal de los sistemas de diseño es aumentar la eficiencia en el desarrollo de productos.
Es difícil para un equipo adaptarse a todos estos pasos al mismo tiempo. La adaptación fue lenta. El proceso planteado es propio de una empresa que trae consigo una organización particular y maneja tiempos específicos.
Cada proceso debe plantearse según las necesidades especificas de cada empresa. Debes alentar a tu equipo a promover la colaboración, dedicarle el tiempo necesario y crear tus propios entregables para que se adapten a todo el equipo.
Recursos
Los 10 Sistemas de Diseño más relevantes:
Me encantaría conocer sobre tu proceso para la creación de un Sistema de Diseño. ¿Cómo fueron tus primeros pasos? ¿Qué metodología usas? ¿Cómo está conformado tu equipo?
¡Házmelo saber en los comentarios!
