Retro designers Welcome Back! DESIGN THINKING-UI
Si te quedaste con las ganas de conocer el resultado final de nuestro proyecto; El coleccionismo a través de la técnica Design Thinking, aquí te muestro la fase final(UI) de nuestro proyecto. Espero que la disfrutes tanto como la disfruté yo.
Ya hemos llegado a la última fase, y no menos laboriosa, la de prototipar, y aplicar la solución final a nuestro proyecto.
Si recuerdas, en el artículo anterior dónde hablé de la metodología utilizada (doble diamante), ya hemos pasado las fases de investigación, análisis y generación de ideas, ahora en esta cuarta y última fase, es donde implementamos todo lo investigado, analizado y generado.
Anteriormente comenzamos a definir nuestro producto, y os mostramos la propuesta de valor junto al storyboard donde imaginamos a nuestro usuario creando un perfil en nuestra red social-juego.
¿Cómo iba a estar estructurada nuestra red social para coleccionistas?
Diseño de interacción.
Ya llegó la hora de conocer cuál iba a ser el recorrido de nuestros usuarios, necesitábamos saber o conocer cuales iban a ser sus acciones o mejor dicho, los pasos que va a llevar a cabo en nuestra página para lograr su objetivo en nuestro diagrama de flujo.
En nuestro task flow, realizamos la siguiente acción; nuestro usuario acceder a la comunidad y crea su avatar, lo primero que hicimos fue plantear el camino y que se iba a encontrar en esos procesos.
Y en nuestro work flow, realizamos la siguiente acción; un usuario quiere comprar.
Arquitectura de información.
Pues bien, una vez finalizado este recorrido, ya llegó la hora de crear la arquitectura o sitemap de nuestra página para explicar cuál sería el contenido de la misma, y que tuviese una organización lógica, para tener un resultado final coherente, lo que nos llevó unas cuantas horas, ya que vimos diferentes pasos a seguir que nos podrían llevar por el mismo camino, pero lo resolvimos sin problema.
Nuestro arquitectura, se diseña indicando en blanco las acciones de distintas páginas para poder tener más información para la preparación del contenido. Los cuadros en color, son distintas páginas.
Estos dos proceso son complementarios, ya que se ayudan y apoyan entre sí, y nos resultó mucho más fácil el proceso.
¿Qué aspecto iba a tener?
Pues bien, necesitábamos empezar a crear un moodboard en el que inspirarnos e imaginar como iba a ser nuestra web, lo que si sabíamos es que esta iba a ser un diseño para escritorio principalmente, porque para el usuario es mucho más fácil por el tipo de interfaz y acciones que iba a tener la red social-juego.
¿Qué aspecto iba a tener? Pensamos… ¿Qué era lo más importante de esta red social?
Va a ir dirigida a coleccionistas de las décadas de los 80–90…¡Primera idea! Su interfaz iba a ser como las de la época, e íbamos aplicar pixel art, eso estaba clarísimo. Qué más… ¡ya lo teníamos! una ciudad donde los coleccionistas pudiesen moverse a diferentes edificios, el edificio de la música, el de los video juegos… etc. Y además el espacio personal de nuestro personaje, su habitación.
Identidad Visual corporativa
Colores… estuvimos debatiendo y cada una eligió una variedad de paleta de colores, al final nos decantamos por las tendencias actuales en diseño y las tendencias de la época.
Y sobre todo cual iba a ser el naming… Neightix.
Prototipar
Ya ha llegado la última fase, prototipar, y aplicar la solución final a nuestro trabajo, recordando nuestra metodología del doble diamante en design thinking, en la que hemos pasado las fases de investigación, análisis, generación de ideas y ahora nuestra fase final de implementación donde prototipamos hasta llegar a nuestra solución final.
Una vez con todas estas guías continuamos con un ejercicio de sketching, en el que creamos una idea inicial de cómo iban a ser distintas vistas de la página completas, con todos sus menús, submenús, etc.
Más tarde decidimos entre todas las vistas cuales iban a ser las finales para ya aplicarlas a nuestros wireframes, realizamos los cambios pertinentes y pasamos a realizar los mockup.
Y finalmente después de unos pequeños cambios, pasamos a las vistas finales para crear nuestro prototipo para poder testear a nuestros usuarios.
Test de usuario
Para testear nuestro prototipo decidimos elegir a 5 usuarios que se asemejaran a nuestro usuario final, coleccionistas de las décadas comprendidas entre los 80 y 90.
Les dimos 5 acciones a llevar a cabo:
1. Creación del avatar.
2. Consultar detalles de un vinilo de Queen.
3. Buscar en su colección un nuevo vinilo adquirido .
4. Consultar ofertas de los productos de música sin pasar por el market.
5. Interactuar con otro usuario.
- Enviar petición de amistad.
- Descubrir insignias/logros que tiene el usuario.
- Hablar con él en privado.
Los resultados del test fueron los siguientes:
Bloqueos
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 y sus edificios 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 market, salas y habitación en la vista ciudad.
Nuestras conclusiones fueron las siguientes:
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.
Y la parte estética retro del proyecto ha tenido buena acogida entre los usuarios. Pareciéndoles ingeniosa y bien trabajada.
Con los cual nuestros futuribles a corto, medio y largo plazo serían los siguientes:
- 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 ciudad para hacerla más intuitiva
- Mejorar el edificio música por dentro
- Crear un espacio diferenciado de red social
- Añadir movimiento al avatar para viajar por la interfaz
Y como diría el señor Bugs Bunny “esto es todo amigos”.
Gracias por tu tiempo y hasta la vista.
