Un resumen sobre cómo comenzamos a diseñar una interfaz en Flat 101,  guiándonos ya sea por datos cualitativos y/o por los cuantitativos. Cómo entendemos el negocio y los objetivos para empezar a prototipar en papel lo que al final será el diseño que más se ajuste a lo que los usuarios necesitan.

Empezar a pensar en cómo escribir este post se me hacía un poco cuesta arriba, no os voy a engañar, igual que me pasó cuando en Flat 101 se decidió hacer las primeras Digital Sessions y me animé a participar, tenía claro el tema, pero tampoco sabía muy bien cómo contarlo… Y de la misma manera que ocurrió el día que comencé a preparar mi charla, se me encendió una bombilla al darme cuenta de que tenía que empezar por ordenar las ideas en un papel, ese gran amigo de cualquier proceso creativo.

Antes de meternos en harina, me gustaría hacer una retrospectiva para poner en valor esta herramienta, en muchas ocasiones la gran olvidada en los procesos de cualquier proyecto, ya sea de CRO, Analítica, UX o UI. Siempre tendríamos que empezar con este molde que iremos puliendo hasta sacar la pieza final.

¿Por qué papel?

Hoy en día tenemos smartphones donde poder dibujar, tablets que nos permiten abocetar un flujo para ser validado por un tercero enviándolo por e-mail y un montón de dispositivos que nos facilitan la vida. Sí, la tecnología es buena, nos ayuda, eso está claro, no soy tan hater, pero… ¿Por qué le tengo tanto cariño a este soporte? porque a lo largo de los 20 años que llevo en el mundo del diseño, es el que más me ha ayudado a explicar cualquier punto de un proyecto. Por ejemplo, poder sentarte con el desarrollador del proyecto tras 25 emails y 15 llamadas y poder explicarle en 5 minutos con cuatro garabatos donde añadir un módulo en en el site y que él lo tache y dibuje cuál sería la posición técnicamente viable, no tiene precio… A día de hoy esto sigue funcionando. No hay que olvidar que un papel y un lápiz no necesitan de ningún tipo de aprendizaje tecnológico, todo el mundo tenemos uno a mano y sabemos utilizarlo.

Esto puede parecer muy obvio, pero es mucho más cómodo trabajar en un entorno en el que todos los que van a aportar algo, sepan y conozcan el manejo de una misma herramienta, en resumen:  

¿Por qué aporta valor prototipar en papel?

• Ayuda a descubrir problemas de usabilidad o funcionalidad en una etapa muy temprana del proyecto
• Favorece la comunicación y participación
• Consume pocos recursos
• Todos los roles implicados pueden utilizarlo sin problema
• Son muy rápidos y fáciles de construir y modificar
• No son tecnológicos pero ayudan a definir problemas tecnológicos
• Nos hace la vida más fácil

¿Cuándo realmente es potente prototipar en papel dentro de la metodología de Flat 101?

Lo primero a tener en cuenta es que cualquier proyecto que llevamos a cabo en Flat 101 está diseñado con datos y está diseñado para los usuarios, esto quiere decir que cualquier decisión de diseño ya sea para hacer un test con usuario o para validar una hipótesis en un test AB tiene detrás un trabajo de investigación por parte del equipo de analítica o del equipo de research que a nosotros, diseñadores UX/UI deberemos de consultar como libro de cabecera en lo que dure el proyecto. 

Dentro de la metodología de Flat 101 trabajamos a partir de un framework tipo doble diamante donde tendremos 4 fases clave desde que comienza hasta que termina el proyecto, siendo iterativo consiguiendo una mejora continua. Aunque nos centraremos sobretodo en la fase de Definición y sobretodo conceptualización, no está demás que repasemos lo dos diamantes:

Fase 1: Descubrimiento

En la fase de descubrimiento lo que se pretende es entender y comprender el verdadero problema del site, dejando de lado suposiciones. En este punto hay que empaparse bien de los objetivos principales de negocio contando siempre con las principales personas afectadas por los problemas del site.

Fase 2: Definición

Segunda parte del primer diamante, todo lo que hemos podido descubrir en la primera fase tendremos que bajarlo a tierra, definiendo hipótesis y definiendo cómo vamos a medir los resultados.

Fase 3: Conceptualización

Empezamos el segundo diamante, en esta tercera fase es donde más potente es prototipar en papel, listaremos todos los problemas detectados para empezar a diseñar soluciones. Qué mejor que poder juntarse con todos los equipos implicados y rápidamente abocetar, recortar, pintar, tachar… para tener una vista general de todos los flujos que queremos optimizar.

Fase 4: Validación

En esta última fase llega el momento de testar todas las hipótesis para poder validar si realmente solucionan un problema, podemos hacerlo mediante técnicas de Test A/B por ejemplo o a través de test con usuario.

Y ahora sí, nos metemos en harina: Veamos un ejemplo práctico.

El caso que vamos a ver es un e-commerce del sector Retail-Bridal donde uno de los objetivos es reservar una cita en tienda para que las usuarias se prueben vestidos de novia en la tienda física.

En este caso lo que se pretendía conseguir era optimizar el flujo de esta reserva, para ello gracias a las 4 fases que hemos visto antes tendríamos el siguiente escenario:

Fase 1 Descubrimiento:

Gracias a poder realizar entrevistas con usuarias se pudo descubrir que este proceso de pedir una cita en tienda, se quedaba muy superficial, no percibían prácticamente nada que les incentivase más haya que rellenar un formulario con sus datos personales. En general las usuarias exigían un poco más de mimo ya que el día de la boda iba a ser posiblemente uno de los días más importantes de su vida.

Fase 2 Definición:

En esta fase se definieron varias hipótesis, entre ellas vimos la posibilidad de añadir a los formularios de cita en tienda más detalles de personalización y niveles de exclusividad para las usuarias.

Fase 3 Conceptualización:

Manos a la obra, prototipamos en papel, el flujo de la cita en tienda, de esta manera podríamos de una manera ágil poder testar con usuarias 2 hipótesis rápidamente.

Fase 4 Validación:

Se hicieron test con usuarias para poder validar las hipótesis prototipadas en papel.

A dibujar!

Antes que nada, nos gustaría lanzar unos tips que van bien a la hora de hacer cualquier prototipo en papel, ¿qué tenemos que tener en cuenta para empezar a prototipar en papel?

Espacio:

Gracias a datos de Analytics, podemos saber que dispositivo es el más utilizado por nuestras usuarias y así poder diseñar en un entorno donde tendremos unas medidas más acotadas, siempre teniendo en cuenta que no solamente se va a visualizar en este dispositivo.

Contenido:

Tenemos que tener en cuenta cuando nos encontramos en un proyecto de CRO que tendremos que contar con el contenido que existe actualmente, de esta forma afinamos mucho más los contenidos que deberemos aportar en el flujo que vamos a optimizar.

Posición:

Gracias a poder contar con un espacio acotado y con un contenido existente más un contenido que vamos a aportar, lo primero que tenemos que pensar es donde vamos a colocar todos los elementos de prototipo a testar, gracias a este punto, podemos probar rápidamente varias hipótesis como veremos a continuación en este caso real.

Lo mejor para que podamos entender bien estos tips, es mostrar en vídeo los espacios de los que dispondremos después de restar navegaciones nativas y bloques de búsqueda del dispositivo con el que vamos a prototipar en papel, un iPhone 6.

En este segundo vídeo os enseñamos el contenido real que disponíamos a la hora de prototipar en papel la optimización del formulario de reserva de cita, como hemos visto en la segunda fase del doble diamante, descubrimos que existía una oportunidad de mejora en el flujo del formulario añadiendo más personalización en este punto, queríamos testar que ocurría si a las usuarias les preguntábamos temas más concretos acerca del día de su boda, como por ejemplo en que entorno se iba a celebrar.

Gracias al prototipado en papel pudimos ver de una manera rápida varias posiciones del contenido que queríamos testar con usuarias, una primera hipótesis era que añadiendo el contenido de personalización después del formulario de cita, cuando la usuaria aterriza en la página de confirmación podría personalizar libremente la cita.

En esta segunda hipótesis queríamos testar con usuarias la posición de estos elementos de personalización de la cita en la página donde teníamos también el contenido obligatorio a rellenar en el formulario, siempre dejando la posibilidad de poder saltar este paso y terminar el proceso de cita, siendo este el objetivo principal del e-commerce.

Después de poder realizar estos test con usuarias, pudimos comprobar que las usuarias en ambas hipótesis conseguían con éxito finalizar la reserva en tienda, objetivo principal del site. 

Resultado del Test:

Gracias al prototipado en papel, pudimos testar varias hipótesis rápidamente con las usuarias, en este caso era una cuestión de posición de contenido, las usuarias dieron por ganadora la Hipótesis 2, les pareció mucha más personalizada esta opción ya que posicionando este contenido en la página del formulario era más visible y el flujo de información se percibía mejor.

¿Qué nos aportó prototipar en papel en estas fases?

• Rapidez para dar forma a las hipótesis
• Agilidad VS Definición
• Pasamos un buen rato pintando y recortando 🙂