Otra publicación más sobre sistemas de diseño

En el último tiempo puede que te hayas topado con el término “sistemas de diseño” (o en inglés design system) ya sea desde la mirada del diseño como de desarrollo o solo por curiosidad, la verdad es que hay muchísimos artículos en internet que hablan sobre este tema, entonces ¿por qué escribir uno más? simplemente porque disfruto tanto de escribir sobre diseño de productos como de compartir mi experiencia, ahora sin más rodeos ¡vamos allá!

El origen de un problema

Antes de todo me voy a sincerar… Durante mi carrera he experimentado muchos problemas, muchísimos! pero los más dolorosos para mi han sido los que ocurren con el equipo de desarrollo. La cosa es que desde hace ya un tiempo que vengo filosofando sobre dichos problemas y creo ya lo descubrí: la raíz de estos despreciables problemas se encuentra en una mala comunicación. No vienen del diseño, ni de la tecnología, ni del tiempo, es por una mala comunicación, ahora podrías preguntar ¿pero comunicación de qué? Averigüémoslo a continuación.

Los problemas de comunicación que menciono se encuentran en el “hand off” a desarrollo y se manifiestan en una falta de claridad en la experiencia buscada, está experiencia que queremos lograr va más allá del prototipo y en muchos casos se conoce prácticamente solo dentro del equipo de UX. Para lograr transmitir ese feeling, primero se debe comunicar claramente al equipo que la construye técnicamente, un camino para ello (que me ha funcionado) es describir textual y gráficamente todo lo que sucede en la interacción, explicando el propósito de cada elemento, detallando los pasos a seguir en un flujo, listando los usuarios y sus características, perfilando los roles, definiendo en última instancia el cómo se usa el producto, dicho de otra manera: se logra con una buena documentación de UX.

Regresando al problema mencionado, una mala comunicación entre los equipos de UX y desarrollo es el origen en muchos casos de una experiencia de usuario deficiente o que dista del diseño original y tiene como consecuencia mayor trabajo y presupuesto para revisar y ajustar.

Imagínate una carrera de postas, donde vienes corriendo desde hace mucho rato y debes entregar la posta a otro integrante del equipo para que continúe corriendo, ese traspaso debe hacerse sin titubear, debe ser eficiente y claro, en ese momento le debes comunicar al nuevo corredor como es la pista, donde están los principales obstáculos, como son los demás competidores y todo lo necesario para que el equipo gane la carrera.

Más o menos pasa lo mismo en la entrega hacia desarrollo, solo que con menos gente corriendo.

Afortunadamente existe una forma en que este problema disminuya su impacto, estoy hablando, redoble de tambores…… de los sistemas de diseño.

¿Qué onda con los Sistemas de diseño?

Tal vez en una conversación, texto, video, podcast o en la fila del super hayas oído que otras personas (no tú, obvio que no) digan: “El sistema de diseño es el kit UI…”

Gracias amigo ex ayudante voluntario del Sheriff por decirlo tan tajantemente.

Pero eso sería incorrecto ya que los Kit UI son PARTE del sistema de diseño. Nótese que destaque la palabra “parte” ¿Entonces de qué estamos hablando? Al parecer se trata de algo más grande, averigüémoslo.

Los sistemas de diseño involucran, desde mi perspectiva, tener la capacidad de anticiparse a algo que aún no ha sucedido, como un presagio del futuro, tener una especie de clarividencia como Nicolas Cage en la película “Next” puedas vislumbrar en el futuro los caminos más óptimos para conseguir un objetivo, conociendo ese eventual camino te puedes preparar para abordarlo de la mejor manera.

Lo sé tal vez me excedí en esa explicación pero es que este tema me entusiasma, dicho de otra forma, tener un sistema de diseño significa tomar de antemano las decisiones sobre los elementos de interfaz (UI), la experiencia de usuario (UX), la interacción, los principios de diseño, el branding, etc. y entregarlos para facilitar las siguientes etapas de desarrollo.

Supo lo que venía y se preparo para ello.

La magia de contar con el sistema de diseño es que resuelve antes los problemas recurrentes que se presentan en el diseño de productos y responde preguntas del tipo:

  • ¿Cómo es el login?
  • ¿Cómo es el menú principal… y el secundario?
  • ¿Cómo se comportan los botones?
  • ¿Cómo es la paginación?
  • ¿Cuál verde de todos los verdes es nuestro verde?

Incluso si no existiera la respuesta como en el ejemplo de arriba, te permitiría tomar los elementos básicos y unirlos para crear la solución.

Beneficios del design system

Los principales beneficios de está filosofía de vida para el diseño de productos puedo destacar:

  • Mejora la comunicación entre los equipos de UX, Desarrollo, QA y negocio.
  • La entrega de software al usuario se hace más frecuente.
  • El equipo de experiencia puede proporcionar más rápidamente los prototipos.
  • Al utilizar los mismos elementos se genera coherencia entre los distintos productos.
  • Ayuda también a aumentar la velocidad de entrega del equipo de desarrollo.
  • Permite al equipo de experiencia poder resolver problemas más complejos.

¿Suena bonito cierto? profundicemos al respecto, pero antes, (spoiler alert) una analogía.

Una analogía con LEGO

Me gusta mucho usar analogías para explicar cosas, en este caso el sistema de diseño se podría asemejar a las piezas LEGO, si no conoces este juguete lo explico rápidamente: son piezas plásticas que permiten construir cosas.

¿En qué se parecen los LEGO´s a los sistemas de diseño?

  • Todas las piezas son compatibles.​
  • Si una pieza se rompe, se puede reemplazar por otra.​
  • Toma poco tiempo aprender a usar.​
  • El mantenimiento de las piezas no se hace una a una sino que desde la matriz de los moldes.​
  • Permite construir lo que necesites o quieras.​
  • Todos sus productos mantienen la misma lógica.​

La palabra clave acá es sistema modular 😉

Contenido del sistema de diseño

Como mencioné antes, un sistema de diseño es un conjunto de activos que tiene una organización que sirven para construir nuevas cosas, pueden incluir la librería de elementos de diseño, los componentes, la documentación de UX, las definiciones del lenguaje de diseño, en un diagrama se vería algo así:

Se podría componer más o menos así

Estas partes están en constante refinamiento y tenerla a punto es un trabajo largo y costoso pero que como veremos a continuación podría significar ahorros a largo plazo.

El futuro de los sistemas de diseño

El subtítulo puede que suene rimbombante, es la idea, pero hacia donde quiero apuntar es que los sistemas de diseño ofrecen la capacidad de concentrar en un solo lugar el mantenimiento de los componentes que utilizan en la organización para construir sus productos, permitiría conectar desde un mismo origen los componentes los que estarían sujetos a las mejoras y actualizaciones que se les hicieran lo que se traduciría en mayor control del producto satisfaciendo cada vez más la experiencia de nuestros usuarios y logrando de mejor manera las metas del negocio.

Esquema de cómo el sistema de diseño podría sustentar los productos de una empresa y sus divisiones por líneas de negocio

Hasta acá llega el artículo, muchas gracias por leer, espero que el contenido te haya sido útil, aprovecho la oportunidad de preguntarte: ¿Te hace sentido lo que te comento? ¿Tienes una opinión distinta? si es así por favor dímelo y conversemos, esto me servirá para mejorar los futuros artículos que escriba, espero que estés super bien y nos leemos, ¡hasta pronto!