En la primera parte del proyecto veíamos cómo seguíamos diferentes técnicas y métodos para el UX Research.
Ya habíamos realizado la propuesta de valor de nuestro proyecto y el Story Board con algunas de las funcionalidades que queríamos añadir más adelante a nuestro trabajo.
¿Te has perdido la primera parte? ¡No te preocupes! Pincha AQUÍ e iras directo al inicio del proyecto.
En esta segunda parte vamos a ver cómo creamos el diseño de interacción de nuestra red social gamificada, cómo fue el proceso de la creación visual de nuestra idea y, cómo no, los test de usuario.
¡Seguimos con la aventura!
Diagrama de flujos
Para poder crear un buen trabajo, es muy importante pensar en el usuario en todas las fases del proyecto.
Cuando un usuario entra en una aplicación o página web, realiza una serie de acciones con la finalizad de alcanzar un objetivo. En este camino, debe tomar una serie de decisiones y todo ello se tiene que tener en cuenta para que la experiencia sea óptima. Ya habíamos pensado el contenido que queríamos que tuviera nuestro juego, ahora teníamos que ordenar la información.
Por todo ello, creamos dos Task Flow para definir y visualizar dos objetivos.
- En el primero definíamos el camino del usuario desde que decide que quiere formar parte de una comunidad de coleccionistas online hasta que ingresa en nuestra red social gamificada.
- Durante este proceso, debe entrar en nuestra Landing Page, crear una cuenta, un perfil, un avatar y añadir su primera colección.
- El segundo es el proceso que sigue el usuario para la compra de un vinilo dentro del juego.
- Podemos distinguir dos vías de compra principales, el Market y el Edificio Música. Añadimos en azul el Happy Path para indicar el camino más sencillo del usuario.
- A raíz de ahí, observamos las distintas opciones que se le presentan y las posibilidades que surgen si escoge un camino u otro.
Arquitectura de la información
Los diagramas de flujo nos ayudaron a definir el camino del usuario en acciones concretas, pero ahora, teníamos que jerarquizar todo el contenido que teníamos para asegurar que el acceso y la escalabilidad de la estructura de contenidos de nuestro proyecto era consistente.
Para ello creamos el Site Map de la red social y, además, añadimos en blanco las distintas acciones que el usuario puede realizar para ayudarnos en la creación del prototipo y visualizar, de una forma más detallada, el contenido.
¡Ya comienza la parte visual de nuestro trabajo!
Desde un inicio teníamos claro que queríamos que en el juego se respirase un ambiente retro. Que todo el que jugara se transportara a aquellos momentos en los que, para jugar al ordenador, teníamos que introducir un disquete que hacía el ruido de una locomotora. Aquellos gráficos pixelados que tardaban en cargar pero que nos transportaban a esos pequeños mundos de fantasía y diversión.
Para favorecer la creatividad y dejar a la inspiración fluir, creamos un Mood Board con contenido que fuimos encontrando por la red. Ordenadores, cintas VHS, juegos de la época… ¡Todo valía para afrontar con ganas e ilusión los siguientes pasos!
En la guía de estilo vamos a encontrar la Identidad Visual de nuestro proyecto. En ella hemos añadido:
Paleta de color
Antes de definir la paleta de color definitiva que íbamos a usar en nuestro trabajo, decidimos crear diversas combinaciones para votar, mediante dotmocrazy, la que más se adaptaba a nuestra idea visual del proyecto.
Finalmente, cómo nos gustaban varias, decidimos crear otra combinación que incluía algunos de los colores que habíamos elegido y, a continuación, adjunto el resultado final.
Logotipo
El Naming de la red social gamificada está basado en la esencia del proyecto: el coleccionismo de los años 80’s y 90’s. Por ello, para crear nuestro logotipo nos basamos en palabras cómo “nineties”, “eighties”, “pixel” o “net”, pensamos en mil combinaciones diferentes y, finalmente, surgió el nombre de Neightix.
Botones
El estilo de los botones se definió en la paleta de color principal, sin embargo, para realizar el CTA de la Landing Page nos basamos en los colores del logotipo, de esta forma, todo quedó mucho más integrado.
Fotografía
En este proyecto, la fotografía no era tan importante a la hora de crear el juego, pero si lo fue para crear la web de lanzamiento. Utilizamos imágenes que nos inspirasen un ambiente retro y nostálgico pero con un toque actual para dar calidad al resultado final.
Iconografía, tipografía y comunicación
Los iconos y la tipografía son tipo pixelados porque aporta consistencia y peso al estilo que se ha seguido hasta ahora.
En esta fase creamos la estructura visual de nuestro proyecto. Decidimos crear el diseño para desktop, en vez de mobile, porque la experiencia se adaptaría mucho más a lo ideado, ya que en los años 80 apenas existían los teléfonos móviles en España y, ni mucho menos, juegos para ese dispositivo.
Antes de pasar a crear los wireframes de forma digital realizamos una primera fase de sketch. Cada una de nosotras escogió diferentes funcionalidades del proyecto y las plasmamos en forma de pantallas a lápiz y papel.
Cuando cogemos un lápiz y un lienzo en blanco se nos abre un abanico de posibilidades casi infinito, podemos intervenir en el proceso todas las veces que queramos y, por consiguiente, ahorramos tiempo al encontrar el fallo en una fase prematura del desarrollo.
Después, escogimos en grupo cuales nos resultaban más interesantes para poder pasar al diseño digital.
¡Pasemos a digital los Sketches!
Nuestro proyecto es una red social gamificada y, por este motivo, necesitábamos que los wireframes tuvieran más información de la que se suele poner en esta fase. Teníamos ya algunos escenarios definidos y, aunque después se añadieron más detalles, encontraréis algunas pantallas con el diseño bastante avanzado.
En esta fase, creamos las vistas finales de nuestro proyecto. Añadimos color, textos y dejamos todo a punto para finalizar el prototipo final que iba a ser testado más adelante.
Mediante el prototipo podremos darnos cuenta de cómo interactúa el usuario con nuestro producto y nos proporcionará la información suficiente para saber si hemos de mejorarlo.
Para comenzar con el flujo de interacción, el usuario tendría que entrar a nuestro juego a raíz de la Landing Page. A continuación adjunto un vídeo mostrando, de una forma mucho más dinámica, el recorrido por la misma.
Una vez que el usuario entra mediante el CTA, se encuentra con la página de creación de un perfil y, a partir de aquí, ¡comienza la aventura! ¡Te invito a que lo veas por ti mismo!
Para testar nuestro prototipo, escogimos a 5 coleccionistas. A 3 de ellos les hicimos las entrevistas en la fase de Research y pudimos observar si lo que habíamos creado se adaptaba a sus necesidades.
Para realizar el test creamos un pequeño guión para poner en contexto al usuario.
“Eres coleccionista de productos de los años 80’s y 90’s y, cómo no, ¡un gran fan de Queen! Te gustaría formar parte de una comunidad online de personas con los que compartir tus mismos gustos y colecciones y encuentras en internet nuestra página web.”
El test se realizó mediante 5 caminos que ideamos previamente:
- Creación del avatar
- Consulta de los detalles de un vinilo de Queen
- Buscar la colección privada y revisarla
- Consultar ofertas de productos de música sin pasar por el Market
- Clickar en otro usuario y solicitar amistad, ver perfil y abrir un chat privado
Cuando los test finalizaron, nos reunimos para analizar los resultados obtenidos, pudiendo identificar los bloqueos del usuario, los patrones de repetición y algunas sugerencias que se plantearon.
Con los resultados del test identificados pudimos crear los futuribles del proyecto para trabajarlos más adelante y mejorar así nuestra red social gamificada.
A través de la metodología Design Thinking hemos podido comprobar que el coleccionismo es algo más que guardar objetos.
En la fase de UX Research, nos dimos cuenta de que para algunas personas coleccionar es un viaje a su propia infancia. A otras les transporta a un momento concreto de su adolescencia y hay quienes, siendo ya adultos, comparten esa afición con sus hijos.
Coleccionar es crear un legado que perdurará en el tiempo y en la memoria porque, aunque algunos coleccionistas vendan objetos para ganar algo de dinero, adquirirán otros nuevos que guardarán para siempre.
Con Neightix hemos querido aportar nuestro pequeño “granito” de arena a un mundo que necesita ser alimentado por su peculiar comunidad. Una comunidad de personas con muchas ganas de enseñar al resto del mundo sus estanterías llenas de recuerdos o, dicho de otra forma, sus colecciones.
