UX/UI: ¿Cómo diseñar prototipos de alta calidad superfast?

(How to deliver high-quality mockups faster than ever?)

En colaboración con Lola Ye para el proyecto Global Tax Platform (GTP) en Ernst & Young (EY).

En este artículos contamos como hicimos en EY para entregar prototipos Hi-Fi de alta calidad en cuestion de minutos, cuando antes nos llevaba horas.
Al mismo tiempo, los beneficios fueron multiples. Estas son algunas de las preguntas que con el tiempo logramos responder:

Calidad

• ¿Cómo lograr consistencia en equipos de trabajo tan grandes?
• ¿Cómo unificar la experiencia del usuario y lograr mayor consistencia?
• ¿Cómo entregamos mejores prototipos pensados desde la perspectiva de los desarrolladores?

Rápido

• ¿Qué impacto tiene entregar en minutos (días) en vez de horas (semanas)?
• ¿Qué impacto tiene en un equipo de trabajo tan grande con tantos diseñadores que desarrollan muchas pantallas cada dia?
• ¿Qué impacto tiene en los desarrolladores y el resto del equipo?

Costo

• ¿Qué impacto puede tener los costos de un proyecto grande?
• ¿Qué impacto puede tener los costos de un proyecto más pequeño?
• ¿Cuál es el costo y cómo implementar un Modular Layout??

Contexto

Cuando un proyecto es muy grande, es común que se necesite de la colaboración de muchos diseñadores tratando de resolver pantallas o flujos reutilizando los componentes existentes o creando nuevos, cuando sea necesario.

Con el tiempo esas decisiones que se repiten generan patrones que al identificarse pueden incorporarse como componentes al Design System.

Los patrones que no se repiten pueden identificarse como inconsistencias y o elementos que interfieren en una experiencia de usuario consistente.

El problema

Como hacemos en un proyecto tan grande donde muchos diseñadores y profesionales están tomando decisiones continuamente, para incrementar la consistencia de nuestro producto y entregar mejores prototipos mas rápido.

Como evitamos que cada vez que un diseñador debe crear un prototipo de la plataforma en la que esta trabajando deba comenzar de cero.

La solución

Creamos un componente maestro llamado “Modular Layout”. Puede ser insertado, customizado, y editado por los diseñadores en cuestion de segundos, por lo que los diseñadores no tienen que comenzar sus diseños desde cero, sino construir a partir de una base estandarizada.

Los principales beneficios que tiene son:

• Tiempo de delivery, construcción de mockups super rápido
• Mayor consistencia, unificar experiencia del usuario evitando inconsistencias
• Mejor delivery, construcción en bloques (<div>=Auto-layout)
• Facilitar la implementación, copiando propiedades del Auto layout y llevaras al CSS directamente desde el inspector de Figma
• Reduce curva de aprendizaje de los nuevos diseñadores
• Design System atómico más robustos y full responsive
• Reducción de costos y fatiga
• Projecto mas eficiente

El Proceso

Lo primero que se hizo fue auditar toda la plataforma y detectar patrones que se repiten.

Recopilar screenshots de cada una de las pantallas y debatimos en función de una vision holística del producto.

Detectamos 3 cosas:

1. Patrones que se repiten. Componentes que estaban faltando en el Design System.
2. El mismo problema se resolvía de modos distintos. Inconsistencias en interacciones.
3. Soluciones únicas que funcionan para ciertos casos específicos.

Creación

Para poder crear un componente universal, lo primero que debemos hacer es crear un componente maestro con todos los componentes de todas las pantallas incorporadas en él.

Dicho en otras palabras, debíamos comenzar por el final. Debemos crear una version en borrador, para poder comenzar a pulir cada componente hasta iterarlo en una V1.

Para lograrlo creamos una estructura utilizando la misma lógica que los programadores, pero en vez de <div> usamos layers.

Sobre esa estructura incorporamos todos los componentes que podían existir. Creamos átomos, moléculas, y nested-components y después definimos cuales mostrar y cuales ocultar.

Secreto: todos los componentes deben ser Auto-layout con la propiedad Fill Container horizontal.

Creamos variantes de todos los componentes. Por ejemplo, variantes de tipos de headers, sidebars, titles, footers, etc.

Como todos los componentes tiene auto-layout, todos tienen atributos que se pueden copiar al CSS, como el comportamiento (Flex Grid) o el padding de cada componente.

Como funciona

1. Insertar componente maestro “Modular Layout”
2. Activar y desactivar componentes según el layout necesario para crear full screens, wizards, modals, etc
3. Editar el contenido, eligiendo entre las variantes y las opciones de cada componente para crear el layout de la pantalla y el contenido que queremos elegir.
4. Desvincular el componente maestro y diseñar en detalle cada pantalla.

La adopción

La versión 0 (el primer boceto) era muy compleja, ya que integraba toooodas las pantallas y componentes de la plataforma al mismo tiempo.

Así que resolvimos lanzar una V1 con solo algunas features y dejar las más complejas, como los Modals (Side, center and pop-ups) para una V2, luego que los diseñadores tengan una curva de aprendizaje recorrida.

Para comunicarlo preparamos un workshop “sencillo” que explicaba la lógica con la que fue construido para que los otros diseñadores puedan hacer y deshacer a gusto creando y proponiendo nuevas versiones.

Etapas del workshop:

1. Como está construido, lógica de capas
2. Componentes y variantes, átomos y moléculas
3. Demo del “Modular layout component”
4. Ejercicio paso a paso guiado
5. Challenge, ¿Quién construye más páginas en menos minutos?

El feedback

El feedback fue sorprendente. Descubrimos que varios diseñadores tomaron ese componente durante su creación y lo comenzaron a usar antes de que sea lanzado.

Estas personas coinciden en estar muy contentos con el componente y que les ahorro muchísimo tiempo: “Lo que antes me hubiese llevado 2–3 horas lo resolví en minutos”.

Las personas que no conocían el componente se mostraron entusiastas.

Al final del challenge contamos las cantidad de pantallas que se hicieron en ese tiempo y calculamos cuanto tiempo nos hubiese llevado hacerlo con el método anterior. Los resultados eran impactantes. En 10 minutos creamos 16 paginas que nos hubieran llevado al menos un día de trabajo.

Conclusion

Para lograrlo, tuvimos que crear nuestro proceso y conceptos. En otras palabras, creamos nuestra propia teoría de diseño.

Si bien el concepto “modular” es conocido, creamos un concepto nuevo en el diseño de interfaces y experiencia de usuario llamado “Modular Layout”.

Las personas que tuvieron la oportunidad de usarlo son muy entusiastas. Es simple de usar sin dejar de ser complejo. Los beneficios parecen ser claros.