Alex Velasco Mesas
5 min readFeb 24, 2020

Esta es la continuación del proyecto realizado, en el Bootcamp de UX/UI Desing en Neoland, donde utilizamos la metodología Desing Thinking.

En el post anterior expliqué las fases del proceso de empatizar, definir e idear, y en este caso, continuaré la fase de ideación para acabar explicando como llegamos al prototipado y testeo del producto.

Comencemos…

Acabé la fase anterior detallando la propuesta de valor a la que llegamos después de haber generado, seleccionado y sintetizado ideas para encontrar la mejor solución para nuestro reto. La idea que surgió fue una aplicación móvil, así que, para pasar a la siguiente fase primero debíamos encontrar un poco de inspiración visual, para ello creamos un Moodboard, donde recopilamos todo aquello que nos sirviera de inspiración.

Diagrama de flujos

Y así es como llegamos al momento de crear la información y el contenido que tendría nuestra aplicación, para ayudarnos en esa tarea, creamos un Diagrama de flujo (User Flow) donde representamos, gráficamente, el proceso que realizaría un usuario, con una duda concreta.

Pensamos en unos de los Persona que diseñamos. Adrián quería hablar con sus padres acerca de su orientación sexual, pero no sabía como hacerlo y tenía muchas dudad al respecto. Así que, creamos un Task Flow que representa la manera en la que Adrián usaría los contenidos y recursos de la aplicación, a la vez que, nos muestra la ruta que debería seguir y las acciones específicas.

Diagrama de flujo — Task Flow (consulta específica de un usuario)

En este caso concreto nos llevó a definir la manera en la que actuaría el “chabot” (un buscador con respuestas automatizadas) que crea más confianza que un buscador común, ya que, se utiliza igual que un chat.

El usuario hace una consulta específica a través del “chatbot”, éste le aconseja un vídeo, si su consulta ya está solucionada después de ver el vídeo, le ofrece la opción de compartir su experiencia en un de los foros, o bien, ir al chat de profesionales para poder hablar con una persona especializada que le pueda ayudar de forma más personal, y así resolver sus dudas, entonces, también puede utilizar los foros al acabar las consultas.

Arquitectura de la información

Una vez que teníamos un flujo específico para empezar a trabajar, nos pusimos a ello, creamos la jerarquía del contenido de nuestro producto digital, con el objetivo de clasificar y etiquetar la información para poder entender el acceso de los contenidos y asegurar una consistencia en la estructura de contenidos.

Site Map del producto

Guía de estilo

Una vez que tuvimos definida nuestro nuevo producto digital, comenzamos con la realización de una guía de estilo. Para ello nos ayudamos del “moodboard” que ya habíamos hecho anteriormente, pero esta vez definimos el diseño escogiendo colores, tipografías, iconos…

En mi opinión personal, el estilo que el equipó acabó definiendo no acaba de identificarse con nuestros usuarios, tampoco es un diseño cercano, donde se perciba que es un espacio seguro, de confianza y fiable, ya que, es lo que queremos conseguir y comunicar a nuestros usuarios.

Guia de estilo

Prototipado

¡Ya teníamos todo preparado para empezar a gestar a nuestro pequeño producto digital!

Así que, empezamos a diseñar los wireframes pero, primero dibujamos los bocetos de las diferentes pantallas.

En esta fase pudimos validar la estructura de la aplicación sin distracciones de color, iconos, vistas finales…

Wireframes baja

¡Y aquí es cuando dimos a luz a nuestro pequeño!

Ahora sí, aquí pudimos elegir la idea que debíamos realizar para modelar y construir una replica del producto para poder detectar los errores, validar las decisiones que hemos ido tomando y evitar fallos en un futuro.

Wireframes alta

Testeo

¡La hora de la verdad!

Una vez que dimos a luz a nuestro producto digital, llegó la hora de ponerlo en manos de los usuarios para poner a prueba la aplicación y conocer las opiniones de los usuarios acerca de la solución que hemos ideado.

Test de guerrilla (User Tests)

Para ello creamos una serie de tareas concretas y pensadas que les propusimos a nuestros user test, nos preparamos un guión para ser más estar bien preparados y nos fuimos en busca de usuarios para hacerles un test de guerrilla.

Resultados de las tareas propuestas a los user test

Conclusiones

¡La aplicación tuvo una buena acogida!

A nuestros “user tests” les gustó la idea, piensan que puede ser una buena herramienta para ayudarles con muchas de sus dudas respecto a la sexualidad y muy útil y necesario para muchos chicos y chicas que no saben a donde acudir actualmente.

Como todo es mejorable… y nuestra aplicación no va a ser menos también debe mejorar, uno de los fallos destacados que detectamos en todos los test fue la percepción del “chatbot”, les costó mucho encontrarlo y se confundió con la sección del chat profesional.

Alex Velasco Mesas

Web UX/UI Designer & Full Stack Developer based in Barcelona