EL COLECCIONISMO DE LOS AÑOS 80 Y 90 — VOLUMEN II.

Hoy, tal como prometí en mi anterior post, os traigo la continuación de nuestro proyecto sobre el coleccionismo de los 80 y 90. Este Volumen II consiste en la parte de UX Design, por lo que hablaré sobre diseño de interacción, investigación gráfica, identidad visual, las fases de sketching, wireframing y prototipado y, finalmente, test de usuario y conclusiones.

Antes de empezar os recuerdo la propuesta de valor de nuestro proyecto para poneros en contexto:

Propuesta de valor

“Red social gamificada para coleccionistas de los 80 y 90, que permite a los usuarios la creación de un avatar interactivo.

Un espacio donde el coleccionista puede interactuar con otros coleccionistas, tener su propia colección expuesta y comprar, vender e intercambiar objetos.

Un viaje virtual al pasado para revivir y compartir recuerdos con usuarios con los mismos gustos y coleccionar sin sentirse juzgado”.

Si no has leído el Volumen I y quieres saber más sobre la fase de UX Research puedes hacerlo aquí.

Diseño de interacción

Una vez tuvimos nuestra propuesta de valor y hubimos representado nuestra idea visualmente con el storyboard, el próximo paso fue definir la estructura y el comportamiento de nuestro producto con el diseño de interacción.

Teniendo como objetivo que nuestro producto fuera lo más útil, fácil de usar y deseable, realizamos los siguientes diagramas de flujos.

Task Flow 1.

En el Task Flow 1 se puede ver el camino a seguir para que un usuario se registre desde la landing page. Se deberá indicar el nickname, sexo e intereses, además de personalizar el avatar al gusto. Por último, una vez creado el perfil, se ofrece la posibilidad de empezar añadiendo objetos a la colección.

Task Flow 2.

En el Task Flow 2 se muestran los dos posibles caminos que puede tomar un usuario para adquirir un producto. En este caso, se indica en azul el Happy Path, que consiste en adquirir el producto a través del market. Por otra parte, se muestra también la opción de hacerlo a través del tablón de anuncios de un edificio (en este caso el Edificio Música).

Además de diagramas de los flujos, también realizamos lo que se conoce como arquitectura de la información. La arquitectura de la información nos sirvió para definir todo el contenido de nuestro producto, así como para darle una estructura lógica. A continuación nuestro Site Map.

Site Map.

Cabe añadir que en la arquitectura de la información no se suelen contemplar las acciones que podrá realizar el usuario, aunque en este caso sí las incluimos (en blanco) para ayudarnos durante la fase de prototipado, a modo de apoyo visual.

Investigación gráfica

Para decidir qué look and feel iba a tener nuestro producto realizamos una investigación gráfica. Como no podía ser de otra forma, nos inspiramos en los años 80 y 90, por lo que elegimos el pixel art como estilo visual. En el siguiente moodboard reunimos fotografías, ilustraciones y otros elementos que nos inspiraron.

Moodboard.

Identidad visual

Para definir la identidad visual de nuestro proyecto realizamos una guía de estilo. Esta incluye la paleta de color, tipografía, iconografía… todo lo necesario. Además, también fue aquí cuando tuvimos que bautizar nuestro producto.

Queríamos que, de alguna forma, el nombre hiciera referencia a los 80 y 90 y sonara o recordara a la palabra “pixel”. Tras un brainstorming eterno y muchas combinaciones, dimos con el nombre perfecto: Neightix.

Guía de estilo.

Sketching

Lo siguiente fue realizar los sketches de las pantallas que iban a formar parte de nuestro producto, basándonos en el Site Map.

Sketches a mano.

Cada una de las integrantes del grupo (éramos cuatro) dibujamos, a mano, todas las pantallas. Así pues teníamos cuatro versiones de cada una, por lo que entre todas decidimos qué vista nos gustaba más para pantalla, pensando siempre en lo mejor para el usuario y en mantener una coherencia y estructura entre todas.

Wireframing

Teniendo claro cómo iba a ser cada vista, nos pusimos manos a la obra con los wireframes.

Wireframes.

Prototipado

Con los wireframes listos, ya solo quedaba prototipar. Siguiendo nuestra guía de estilo añadimos la tipografía, los textos finales, el color, la iconografía…

También fue durante esta fase que, a medida que íbamos avanzando con el prototipo, fuimos detectando pequeños errores y mejoras (la ubicación de algunos botones, por ejemplo) que solventamos sin problema.

De wireframes a vistas finales.

El resultado final al completo, junto con la landing page, os lo muestro a continuación:

Landing Page.

Prototipo.

Test de usuario

Prototipo listo, siguiente paso: testearlo. Hicimos los test con la ayuda de 5 usuarios con un perfil muy parecido al que se especificó en el briefing, coleccionistas de objetos de los años 80 y 90.

Les hicimos una breve introducción sobre nuestro prototipo y les pusimos en contexto: “Eres coleccionista de los 80 y 90 y un gran fan de Queen. A continuación deberás llevar a cabo las siguientes tareas”.

1. Creación del avatar.
2. Consultar de los detalles de un vinilo de Queen.
3. Buscar la colección privada y revisarla.
4. Consultar ofertas de productos de música sin pasar por el Market.
5. Clicar en otro usuario y solicitar su amistad, ver su perfil y abrir un chat privado.

Test de usuario en remoto.

Resultados de los Test de usuario

A grandes rasgos, podemos hacer una valoración positiva de los test. Los usuarios fueron capaces de completar sin problema muchas de las tareas asignadas. Por otra parte (y lo que realmente nos ayudó) pudimos observar ciertos bloqueos y patrones. También nos hicieron varias sugerencias.

En definitiva, los test de usuario nos sirvieron para reunir mucha información sobre nuestro producto: tanto lo que funciona correctamente como lo que podría mejorarse.

Bloqueos:

• Scroll landing.
• Paso de ir a habitación a ciudad.
• Problemas donde interactuar en ciudad y habitación.

Patrones

• La barra inferior no llama su atención.
• Los iconos de los accesos directos no son claros.
• La ciudad no les resulta intuitiva.

Sugerencias

• Label al pasar el cursor sobre los botones.
• Ofrecer más información en los productos del market.
• Mostrar el rating del vendedor del producto.
• Acción en tu propia colección: privada o pública.
• Añadir el market, las salas y la habitación en la vista de la ciudad.

Conclusiones

La conclusión general tras realizar todo el proyecto fue la siguiente:

Creemos que la idea de una red social gamificada puede funcionar pero, para ello, tenemos que reforzar la parte social de la web. Generando un espacio donde poder crear publicaciones, dar likes y comentar.

Por lo que los futuribles que nos gustaría aplicar a corto, medio y largo plazo son:

• Hacer más entendible el scroll down de la landing.
• Elegir iconos más entendibles para la barra inferior.
• Incluir más información tanto de los productos como de los usuarios.
• Modificar la ciudad para hacerla más intuitiva.
• Mejorar el aspecto del edificio música por dentro.
• Crear un espacio diferenciado de red social.
• Añadir movimiento al avatar para permitir al usuario viajar libremente por la interfaz.

Neightix: nuestra solución para el coleccionismo de los años 80 y 90

Y hasta aquí el Volumen II de nuestro proyecto. Espero que hayáis disfrutado con nuestra propuesta para el mundo del coleccionismo. La técnica Design Thinking nunca defrauda, lo veremos en próximos proyectos, muy pronto.