Empezando el sistema

Cosas que debes tener en cuenta al empezar

• Ten claros cuáles van a ser tus KPI's a corto y a largo plazo.

• Cerciórate de que entiendes la cultura de la compañía y de que entiendes cómo los diferentes equipos construyen el producto.

• Asigna un equipo de diseñadores y desarrolladores para que empiecen a trabajar en esto juntos.

• Elige un producto para construir las librerías iniciales. Uno que sea importante para la estrategia de la compañía. Empieza con algo pequeño, crea algo increíble y crece desde ahí.

• Define el ecosistema de productos de tu compañía para entender cuál va a ser el alcance del sistema de diseño.

• Documenta todas las decisiones que se vayan tomando y todo lo que vayas generando para que el sistema se pueda compartir y entender fácilmente.

Elige un producto concreto para construir las librerías iniciales. Uno que sea importante para la estrategia de la compañía. Empieza con algo pequeño, crea algo increíble y crece desde ahí. No crees el sistema y luego el producto. Crea el sistema y las normas a partir de un producto increíble que hayas diseñado.

Los patrones de diseño que vayas generando se compartirán y se usarán a lo largo de todos los productos digitales de la compañía, convirtiéndose en el estándar de calidad de tu UX/UI. Si estás buscando elevar la calidad del diseño de tu compañía, tienes ante ti una oportunidad increíble mientras creas el sistema de diseño. No añadas nada al sistema que no quieras que se reutilice en el resto de productos de la compañía.

Un sistema de sistemas

Como decíamos más atrás, el objetivo es desarrollar una solución que pueda escalar a todos los touchpoints (es decir, web, app, etc) de tu compañía. Por eso, es importante tener clara la cantidad de puntos de contacto que el sistema necesita cubrir. Por ejemplo, si tu producto tiene presencia en web, móvil o TV entonces vas a necesitar pensar en tu sistema como una familia de sistemas de diseño (uno para cada touchpoint o punto de contacto) todas ellas unidas a un core (Foundation).

Tier 1. Principios de Diseño y el Foundation System

El sistema parte de unos cimientos globales que se reflejan en la librería de Foundations y que define los patrones que todos los equipos deben usar. Esta librería incluye patrones globales como los colores de marca, tipografía, uso de la animación, espaciado, copys (tono de voz) o accesibilidad. Aquí es donde definiremos los 'design tokens'. Lo veremos más adelante. Esta base es algo que todo el mundo debería usar y es el mínimo que todo producto debería cumplir para salir a la luz.

Tier 2. Un sistema (materializado en librerías) por cada 'touchpoint'

Cada touchpoint (web, app, etc) puede tener sus propias librerías que comparten componentes y normas. Estas librerías deben estar compartidas con todos los equipos.

Por ejemplo:

Un sistema web define de todas los elementos que te encuentras en una web: botones, cuadros de diálogo, formularios, etc. Este sistema para la parte web se traduce en una librería de componentes y prácticas compartidas que pueda ser usado en cualquier producto que sea una web, desde una web-app a la página corporativa de la compañía, por ejemplo. Y aparte de todo lo específico que tiene el sistema en la parte web, también usaremos todo lo incluído en la librería de Foundations. Los componentes se construyen con tokens (como el color o la tipografía) y estos componentes siguen los patrones definidos en el Foundation System. Así, se crea un sistema conectado.

Y en otro ejemplo, un sistema app es el lugar donde están todos los componentes y prácticas compartidas por todos las apps de la compañía (tanto móvil y tablet como iOS y Android). Y de nuevo, utilizaremos aparte todo lo que ya estaba en la librería de Foundations del sistema.

Tier 3. Librerías locales

Un touchpoint también puede tener librerías locales que tengan elementos creados a medida para un producto concreto o un público específico. Estas librerías sólo se comparten con los equipos que trabajan en esos productos. Si alguno de estos patrones creados ad-hoc para un caso local se considera que puede ser reutilizable de forma global por el resto de productos web/app/TV, etc, entonces se migrará de la librería local Tier 3 a la librería Tier 2 global de ese touchpoint. Ejemplo: un componente de card de noticia diseñado para un proyecto editorial concreto, puede tener sentido moverlo desde la librería del proyecto a la librería Web (Tier 2) para que todo el resto de proyectos web de la compañía puedan usarlo.

Acciones

1. Define qué miembros van a trabajar en el sistema de diseño, de todos los equipos involucrados.

2. Empieza a convocar los primeros workshops para definir la misión/visión, roles, responsabilidades, alcance, workflow, herramientas a utilizar, KPI's y (muy importante) con qué proyecto vais a empezar.

3. Vete documentado todo para irlo compartiendo con todo el equipo.