El proceso por el cual se llega a un prototipo no es muy transparente para las personas que están fuera del área de diseño. Como desarrolladores podemos criticarlo o maravillarnos, pero nuestras críticas no suelen llegar a les involucrades en la creación del mismo.

Como diseñadora y desarrolladora, en este post me gustaría revelar ese pequeño misterio y reflexionar sobre el mismo.

¿Quiénes son les responsables y qué pasos siguieron al crear las pantallas?

Lo primero que me gustaría aclarar es que en este proceso no solo participan diseñadores gráficos, sino que también pueden involucrarse sociólogues, antropólogues y comunicadores.

Etapas

Al crear prototipos es difícil cascadear las etapas porque muchas pasan al mismo tiempo y en varias oportunidades, pero tienen un momento más temprano o más tardío en general.

• Investigación
• Jerarquización del contenido (Arquitectura de información)
• Primeros wireframes
• Prototipado
• Primeras pruebas de usuario
• Diseño UI, wireframes en mediana calidad
• Generación de contenido (textos, ilustraciones, fotografía, etc)
• Diseño gráfico
• Diseño final de la pantallas

Investigación y relevamiento (UX Research)

En esta etapa se asegura  tener las preguntas correctas: se realizan entrevistas, se estudian analytics, se estudia a la competencia, etc.

El foco es concentrarse en que el producto que estamos arrancando contribuya a solucionar el problema del cliente. Entender el producto holísticamente. Nos interesa en particular conocerlo desde la perspectiva que tendrán los futuros usuarios: nos pondremos en sus zapatos.

Arquitectura de información

Teniendo mucha más información acerca de qué es lo que necesitamos, hay que empezar a ordenar los datos, siempre pensando en el usuario que va a utilizar nuestra app. En esta etapa se agrupan, separan, jerarquizan y priorizan interacciones e información. Podemos hacer cardsorting, storyboard, mapas conceptuales, flujos, etc.

Primeros wireframes

Este paso puede ser “el entregable” de la etapa anterior o una etapa en sí misma. Son los primeros bocetos, nada muy elaborado,que pueden estar hechos con lápiz y papel, en un pizarrón físico o virtual, etc. Lo importante es que sea bien simple, que se pueda “tirar al tacho” y volver a bocetar hasta que el resultado funcione. El punto en esta etapa es validar rápidamente decisiones tomadas en el punto anterior.

Prototipos

Acá le vamos a dar vida a los bocetos anteriores. Vamos a hacer prototipos navegables muy simples. Pueden ser pedacitos de pantallas que una persona mueve cuando un usuario hace de cuenta que se aprieta un click o puede ser digital, hecho con algún programa como sketch, xd, Figma, etc. La gracia de tener un prototipo navegable es poder hacer pruebas de usuario que sirven para validar las primeras hipótesis.

¿Y el diseño de mis pantallas para cuando?

A partir de este momento podemos empezar a pensar en colores, tipografías, imágenes,  ilustraciones, formas, etc.

Diseño UI y wireframes de mediana/alta fidelidad

Se puede decir que ahora es cuando pintamos los prototipos para darle personalidad a nuestro producto. Se diseñan los componentes de la ui y se aplica una pincelada de branding.

No solo se diseña la UI, también se genera el contenido. Primero pueden ser esbozos del estilo “una foto como esta acá”, “una ilustración con este estilo”, etc.

La última etapa del diseño implica mezclar todos los componentes de diseño en la pantalla, agregar interactividad, animaciones y ¡voilá! tenemos diseños para empezar a desarrollar.

Paso 1, paso 2, paso 3… mmmmm…. CASCADA! y el agile?

Ahora es cuando empezamos a pensar en grande, ¿cómo podemos hacer este proceso más ágil?

Voy a poner algunas ideas sobre la mesa… o algunas preguntas:

¿Es necesario terminar cada etapa para empezar la siguiente?

La etapa de investigación es muy importante para entender si el producto que el cliente tiene en la cabeza es el que realmente se ajusta a su problema. En el mundo del agile hay técnicas que se usan para detectar este mismo problema, ¿No podemos compartir dichas actividades para unificar visiones?

¿Hay que terminar de jerarquizar toda la información antes de comenzar a bocetar? ¿No se podría empezar por el boceto de los flujos principales y ordenar la info que allí se presenta de manera iterativa?

¿Hay que terminar de prototipar toda la interfaz para empezar a pensar la paleta cromática?

¿Necesitamos el diseño final de todas las pantallas para empezar el desarrollo?

¿No podemos involucrar el proceso de prototipado y diseño con el de desarrollo dentro del mismo loop? Si la respuesta es sí, ¿cómo?.

Tengo mis hipótesis pero me gustaría escuchar las tuyas...