Saltar al contenido principal
abril 26, 2022

Cómo crear un sistema de diseño | Todas las claves (Parte II)

El proceso paso a paso

  1. Crear un equipo que construya y lidere el sistema de diseño
  2. Identificar patrones
  3. Construir y documentar
  4. Medir la eficacia y mantener
  5. Calcular su valor

Creación de un equipo

Modelos de gobernanza

Modelo Centralizado

Un solo equipo mantiene el sistema de diseño trabajando a tiempo completo.

Modelo Federado

Personas de varios equipos se reúnen para gestionar y gobernar el sistema.

Modelo Cíclico

Un equipo central y miembros de otros equipos se unen para administrar y gobernar el sistema.

  • El modelo solitario es rápido, pero con una persona a cargo de todo, puede darse un cuello de botella para la realización de muchas tareas.
  • El modelo centralizado mantiene el sistema en buen estado, pero es posible que el grupo no esté tan conectado a las necesidades de los clientes.
  • El modelo federado tiene una gran visión de las necesidades del producto y del usuario, pero puede estar bastante ocupado trabajando en esas áreas fuera de la construcción del sistema.
  • Por ello, el modelo cíclico recoge lo mejor de estos dos últimos para solventar sus inconvenientes. De hecho, este modelo de gobierno es el que se está usando en grandes compañías como Netflix o Salesforce capaces de gestionar sistemas de diseño de gran envergadura.

Identificar patrones de diseño

Vision de www.elpais.com en CSS Stats

Construir y documentar

  1. Múltiples diseñadores pueden atacarla para generar pantallas de manera independiente.
  2. Cuando los componentes o estilos de la librería se actualizan, todas las pantallas diseñadas se actualizan automáticamente.
  3. Se evitan diseñar componentes duplicados con diferentes aspectos. Se favorece la consistencia en el diseño.
           Component Gallery website
  1. Generando un documento interno ad hoc creado a medida para nuestra compañía: En nuestra librería de Figma describiremos todo el catálogo de estilos y componentes que hemos creado y cómo funcionan o se comportan. De esta manera, tanto los diseñadores como los desarrolladores tienen acceso al catálogo de estilos y componentes y el modo en que se usan.

    Ejemplo de documentación ad hoc en un Sistema de Diseño

     

  2. A través de herramientas creadas específicamente para la documentación y, en algunos casos, repositorio de estilos y componentes de código. Os dejo por aquí un pequeño listado, ordenado en función de las que creo son más útiles y prácticas para cubrir esta necesidad:

Ejemplo de un sistema de diseño documentado en zeroheight

Design Token

Medir la eficacia y mantener

  1. Medir el uso del mismo a través de un sistema que nos facilite los datos de cómo se está usando: En nuestro caso, podemos conocer esta información gracias a que Figma posee una funcionalidad para inspeccionar el uso que se está haciendo de sus librerías (Design System Analytics) y nos muestra de manera pormenorizada los equipos que la están usando, los componentes y estilos que posee y la cantidad de veces que se ha utilizado cierto componente, entre otras cosas.De este modo, podemos tomar decisiones sobre si un determinado elemento o componente debe ser modificado, sustituido por otro o directamente eliminado de manera transversal.

    Design System Analytics de Figma

     

  2. Hablar directamente con los usuarios para tener en cuenta su experiencia y el uso real del sistema de diseño.

El CRO y los sistemos de diseño

Otro aspecto muy interesante a tener en cuenta a la hora de medir la eficacia de nuestro sistema de diseño y tomar decisiones al respecto es cuando nuestro producto digital tiene un objetivo claro de conversión de KPI’s de negocio. Es decir, cuando lo que se busca es generar ventas u obtener leads.

En este punto los expertos en CRO (Conversion Rate Optimization) trabajan estrechamente con el equipo de diseño para producir los cambios o adaptaciones que sean necesarios para conseguir ciertos objetivos.

Un posible ejemplo hipotético que nos podríamos encontrar sería que desde el departamento de marketing quieren probar cómo funcionaría una nueva disposición de una imagen en un template de producto cambiándola de izquierda a derecha.

En este punto habría que crear un test A/B con dos diseños lanzados al 50% de los usuarios para comparar la reacción de los mismos y medir cuál de las dos versiones es más efectiva y, por tanto, ejecutar en base a los resultados obtenidos un cambio en nuestro sistema de diseño de manera permanente.

Test A/B

Calcular su valor

Autor
Daniel Ortiz
UX Designer

¿Ya te vas?

Suscríbete a nuestra newsletter mensual para estar al día de las últimas noticias, casos de éxito, novedades del sector y mucho más.

No mandamos spam y puedes darte de baja en cualquier momento.

Formulario de descarga

¡Gracias!