El poder de la estructura: una guía para diseñar modelos de sistemas

Los sistemas de diseño ayudan a las organizaciones a mantener la consistencia experiencial en múltiples productos, servicios y negocios. Aunque comúnmente asociados con guías visuales y bibliotecas de componentes, los sistemas de diseño son completamente diferentes. A medida que más corporaciones se dan cuenta del valor de la continuidad del diseño, los equipos de sistemas de diseño recién formados están estableciendo las mejores prácticas para garantizar la relevancia a largo plazo de los esfuerzos de diseño de sus organizaciones.

Cuando varias personas se involucran en la misma búsqueda de diseño, surgen preguntas comunes. Si las respuestas a esas preguntas no están disponibles o no son fáciles de entender, la consistencia del diseño se pierde . Introduzca los sistemas de diseño.

Aunque popular en la discusión del diseño contemporáneo, las raíces de los sistemas de diseño se extienden por décadas en el mundo de la publicación de periódicos y revistas. Incluso ahora, la jerarquía sistematizada de las páginas editoriales es evidente, con patrones preconfigurados que permiten una ubicación uniforme del texto y las imágenes.

Después de 2007, la afluencia de lo digital obligó a las empresas a ser más intencionales en la cohesión del diseño entre productos y plataformas. Siguió un énfasis en las pautas visuales y las bibliotecas de componentes, pero dichos documentos se calcificaron rápidamente en las páginas de PDF y archivos compartidos. A través de prueba y error, los creadores de sistemas de diseño modernos han llegado a ver su trabajo como productos vivos, no como documentos estáticos.

Zalando es el mercado de moda en línea líder en Europa. Atlassian es reconocida mundialmente por sus herramientas de desarrollo de software. Cada uno tiene grandes equipos de productos y necesidades de diseño complejas. ¿Qué se puede aprender de sus modelos de sistemas de diseño?

Zalando: la colaboración como modelo de sistema de diseño

Zalando es el minorista en línea más grande de Europa de calzado y ropa de calle de alta gama. Con más de 1900 marcas, su enorme escaparate digital está gestionado por un equipo de cientos de diseñadores y desarrolladores. Para garantizar una experiencia de compra consistente en una colección tan amplia de productos, la empresa se basa en un sistema de diseño altamente estructurado.

Uno podría pensar que mantener un sistema de diseño para una marca de tan alto perfil requeriría una gobernanza estricta y un círculo cerrado de tomadores de decisiones de diseño. En cambio, el enfoque de Zalando es decididamente colaborativo. En lugar de ver su sistema de diseño como una entidad perfecta bajo la amenaza de la entropía, Zalando alienta a sus equipos de características a contribuir con nuevas ideas según sea necesario. ¿Como funciona?

El objetivo principal del equipo del sistema de diseño de Zalando (ZDS) es ayudar a los equipos de características a desarrollar los componentes que necesitan para que los productos brillen. Al mismo tiempo, ZDS garantiza que la integridad del sistema de diseño no se vea comprometida. De esta manera, ZDS es tanto un enlace como una red de seguridad.

Cuando un equipo especializado de Zalando necesita una solución que no concuerda con el sistema de diseño de la empresa, envía una contribución mediante un sencillo formulario de Google. Cuando se recibe un ticket de contribución, ZDS revisa y categoriza la solicitud de cambio como Ligera , Media o Pesada . Cada categoría tiene su propia secuencia de revisión, diseño e iteración en colaboración.

Una vez que una contribución supera este proceso y se convierte en realidad, el equipo de ZDS actualiza el portal del sistema de diseño compartido centralmente, muestra los cambios en su demostración semanal y comunica las actualizaciones a las partes interesadas y los clientes.

La simplicidad del modelo de contribución de Zalando permite que diversas voces de la empresa tengan voz en la evolución del sistema. Filosóficamente, Zalando ve su sistema como un producto, no simplemente como un recurso de documentación destinado a mantener los productos visualmente alineados. Desde esta perspectiva fluyen conclusiones prácticas que son aplicables a diversos modelos de sistemas de diseño:

• La gobernanza es importante, pero los equipos que supervisan los sistemas de diseño deben centrarse en el éxito de otros equipos dentro de sus organizaciones.
• Haga que el proceso de contribución de características sea simple, transparente y colaborativo, y documente toda la comunicación.
• Haga que los diseñadores y desarrolladores trabajen juntos en los cambios al sistema, fomentando así un lenguaje de sistema compartido.
• Cree una lista de verificación que asegure que cada actualización del sistema aborde los problemas de accesibilidad.

Atlassian: Pensamiento del sistema de diseño reinventado

Atlassian crea herramientas para el desarrollo de software y la colaboración, como Jira y Trello.

En 2017, Atlassian renombró y lanzó un sitio para sus pautas de diseño. Al mismo tiempo, la empresa alojaba un sitio independiente dedicado a sus componentes de interfaz de usuario y sus ejemplos de código correspondientes.

Con el tiempo, los dos sitios encajaron , lo que generó frustración y confusión entre los equipos internos de diseño y desarrollo, los proveedores de integración de aplicaciones de terceros y los clientes de Atlassian.

Al reconocer una brecha cada vez mayor entre el diseño y el desarrollo, Atlassian optó por repensar su enfoque de los sistemas de diseño. Ya no podía tratar la documentación de diseño y desarrollo como poco más que un medio para generar código y resultados gráficos para los productos de Atlassian. El sistema de diseño tenía que ser respetado como un producto por derecho propio.

Para comprender completamente su problema, Atlassian se sometió a una auditoría externa y emitió encuestas de satisfacción del cliente. Como era de esperar, se consideró que los dos sitios estaban desalineados y obsoletos. Con su reputación en juego y un gran ecosistema de diseñadores, desarrolladores y partes interesadas que piden un cambio, Atlassian reconoció sus deficiencias y se dispuso a reinventar su sistema de diseño.

A principios de agosto de 2020, el equipo del sistema de diseño (ADS) de Atlassian lanzó un nuevo sitio que consolida las pautas de marca, imagen, contenido, componentes y patrones.

Además, el equipo de ADS:

• Migró la mitad de sus componentes de interfaz de usuario al nuevo sistema (el resto está en progreso)
• Documentación reescrita y simplificada en todo
• Búsqueda mejorada dentro del sistema
• Se agregaron enlaces de código de hacer clic para copiar

La evidencia más reveladora de la mentalidad de madurez de Atlassian proviene de la diseñadora principal de ADS, Jennie Yip: “Un concepto erróneo común sobre los sistemas de diseño es que una vez que se publican, se convierten en una fuente inmutable de verdad. Un sistema de diseño nunca está completo. En Atlassian, estamos comenzando a cambiar la forma en que vemos nuestro sistema de diseño... en una entidad viva y que respira".

5 principios del sistema de diseño que vale la pena recordar

La vanguardia de hoy es la hoja desafilada de mañana, un problema que impregna todas las disciplinas de diseño. Las herramientas y plataformas para crear y alojar sistemas de diseño son abundantes, pero el rápido desarrollo del diseño digital hace que sea más rentable pensar en los sistemas de diseño en términos de principios rectores.

1. Los sistemas de diseño son productos digitales.

Como todos los productos digitales, los sistemas de diseño requieren un mantenimiento regular. Los sistemas que permanecen inactivos durante largos períodos sufrirán desuso y deterioro.

2. Los sistemas de diseño son colaborativos.

Los sistemas de diseño deben satisfacer las necesidades de las partes interesadas que representan múltiples funciones comerciales. Proporcionar vías para la colaboración evita que los sistemas existan dentro de los silos de diseño e ingeniería y garantiza que las ideas de productos no se ignoren.

3. Los sistemas de diseño prosperan en la simplicidad.

Los sistemas de diseño son un lugar para encontrar respuestas, no para obtener elogios por imágenes llamativas, animaciones intrincadas o copias ingeniosas. La información debe estar bien organizada, ser fácil de navegar y buscar, mientras que las descripciones de texto deben equilibrar el contexto con instrucciones concisas.

4. Los sistemas de diseño requieren estrategias de comunicación y participación.

Los equipos que administran los sistemas de diseño deben considerar cómo comunicar periódicamente las actualizaciones y las nuevas funciones a las partes interesadas. Los boletines, las sesiones de preguntas y respuestas y otras estrategias de divulgación deben informar y comprometer: “Estos son los cambios. Es por eso que debería importarte”.

5. Los sistemas de diseño están centralizados.

Los sistemas de diseño deben ser accesibles en una única ubicación basada en la nube. Navegar por el sistema u obtener activos no debería requerir el conocimiento de un programa de diseño específico. Y recuerde, publicar pautas separadas para el diseño y el desarrollo es un camino seguro hacia la disonancia del producto.

El poder de la flexibilidad estructural en el diseño

Los sistemas de diseño no están destinados a ser monolitos, grandes e imponentes, siempre sin cambios. Tampoco son meros repositorios de componentes y estilos de diseño. Son productos vivos que respiran, empresas orgánicas que requieren plantación y poda. Como tales, merecen equipos dedicados compuestos por diseñadores que estén comprometidos con su mantenimiento y renovación continuos. Después de todo, los sistemas de diseño nunca están terminados.

En última instancia, los mejores sistemas de diseño son sencillos, colaborativos y flexibles. Responden preguntas urgentes de diseño con claridad, agradecen los aportes de múltiples partes interesadas y priorizan soluciones potentes sobre fórmulas dogmáticas.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• La consistencia es clave: cómo construir un sistema de diseño de Figma
• Comprender los sistemas y patrones de diseño
• Figma vs. Sketch vs. Axure: una revisión basada en tareas
• ¿Por qué utilizar el diseño de materiales? Sopesar los pros y los contras
• El pasado sigue presente: una descripción general del diseño atemporal