Museo del coleccionista. Fase de prototipado y validación (Parte 2)
Resumiendo todo lo contado en el anterior post, a través de la metodología Design Thinking Double Diamond hemos estudiado y analizado lo que las personas sienten y hacen cuando coleccionan o coleccionaban y lo que la competencia les ofrece.
Obtuvimos testimonios de voluntarios que se ofrecieron a ser entrevistados y un gran número de estadísticas y opiniones por medio de una encuesta que lanzamos por medio de Google Forms. Utilizando todo esto, conseguimos crear cuatro user personas junto con sus correspondientes mapas de empatía y user journey map.
Realizamos diferentes técnicas de ideación que hicieron estallar toda una cúpula de cristal. Valoramos cada una de ellas y priorizamos mediante matrices cuál sería nuestra propuesta de valor: crear una tienda de coleccionismo integrada en un museo interactivo. Dentro de nuestro objetivo, buscamos centrarnos en mejorar la experiencia musical a través de unas gafas de realidad virtual.
Por tanto, nos situamos en el segundo diamante, en concreto en la fase de prototipar las ideas propuestas hasta ahora.
Después de obtener nuestra propuesta de valor, tenemos que estructurar la información que queremos mostrar y los flujos que queremos que el usuario realice. Para ello, jerarquizamos la información y diseñamos un user flow.
Aún teniendo la idea inicial de crear una interfaz de gafas virtuales, enfocamos la arquitectura acorde a una página web, de la cual nos ayudamos para tener en cuenta las diferentes salas temáticas, la tecnología de que disponía nuestro museo y diversas opciones más como noticias, blog o contacto.
En el user flow, que es el recorrido que sigue un usuario, detallamos cómo sería la experiencia real y no solo digital: en primer lugar, la persona accedería al recinto del museo y compraría la entrada. Más adelante, se encontraría el punto de información, donde consultar qué tipo de sala temática puede descubrir, tras lo cual entraría en la sala musical. De repente, se daría cuenta de que todo ha cambiado: las paredes muestran distintos famosos y conciertos de la época; se escucharían las voces de los fans, de los artistas cantando… A medida que avanza por la habitación, podrá ojear vinilos, discos, posters y demás merchandising que se haya expuesto por parte de coleccionistas. Incluso se da cuenta de que puede participar en un karaoke.
Decide entrar en la sala de conciertos en directo, donde se le ofrecerían unas gafas de realidad virtual que le trasladarán a la época que la persona desee revivir. Con las gafas ya puestas, podrá cambiar su atuendo, vestirse como Courtney Love o River Phoenix; escogerá qué género y grupo musical quiere escuchar, si desea estar en un vis a vis y, por otro lado, podrá comprar artículos relacionados con la gira o concierto de ese grupo o artista que haya escuchado.
Una vez que tuvimos claro que el objetivo de nuestro proyecto son unas gafas virtuales, nos preguntamos cómo mostraríamos esta interfaz tan novedosa. Por ello, recopilamos toda la información existente sobre programas, páginas web, plugins, complementos y demás que puedan servirnos de ayuda y así poder pasar a la fase de prototipado.
Si os sirve de ayuda, comparto varias páginas que tuvimos en cuenta, como Kuula, Sketch to VR y Marvel VR. Aunque, muy a nuestro favor, cabe decir que conseguimos encontrar un complemento para Adobe, DraftXR, que fue nuestra decisión inicial.
De este modo, empezamos una ronda de preguntas para concretar qué es lo que íbamos a diseñar:
→ ¿Qué es lo que buscamos que haga el usuario dentro de nuestro prototipo?
Queremos que acceda a una época, que escoja el género y el grupo o artista que desee escuchar. Antes de entrar al concierto, le ofrecemos la posibilidad de vestirse como los famosos de aquel entonces. Dentro del concierto, podrá ver información de esa gira en concreto, acceder a un vis a vis con el grupo que está escuchando y visitar la tienda online.
→ ¿Qué control tendrá y cuál no?
Los On boardings, en un principio, son obligatorios, porque entendemos que el usuario no sabe cómo se utiliza la interfaz, qué opciones puede hacer, qué va a experimentar, etc.
Podrá escoger libremente la época, el género musical, el grupo o artista y el avatar. Tendrá la opción de volver hacia atrás en todo momento, excepto una vez que ha entrado en el concierto, porque será una experiencia de unos 40 minutos y no podemos alargar la espera al resto de personas, por lo que no podrá cambiar de artista, ni de atuendo, ni de época… Una vez en el concierto, puede entrar y retroceder en las opciones de información de la gira, vis a vis y tienda.
→ ¿La compra será mediante las gafas?
Rotundamente no. Queremos que el usuario viva la experiencia y no esté pendiente de realizar compras por este medio, pero sí podrá encargar y comprar una vez que esté en la sala de coleccionismo y merchandising.
Con el proceso mucho más detallado, diseñamos los wireframes a muy baja fidelidad, aclarando pantalla por pantalla que nuestro prototipo sería a vista 360º totalmente panorámica.
En este punto, retomamos el complemento de Adobe y, a medida que íbamos mejorando el wireframe a mockup, verificamos que quedara bien en la panorámica.
Nuestro artboard, por exigencia del plugin, tiene que ser de 1920x1080, es decir, lo que conocemos como versión desktop. Para ver cómo se acoplaría las pantallas en 2D a la panorámica, probamos con los wireframes y nuestro primer punto a mejorar fueron las imágenes.
En este proyecto, la calidad, el color y la intensidad de las imágenes son esenciales para impactar al usuario. Por esta razón, recurrimos a buscar diferentes bancos de imágenes e ir probando cuál sería la idónea. Simultáneamente, dos de nosotras continuamos con el wireframe pasándolo a mockup, con una grid de 12 píxeles y cuatro columnas en vertical.
Una vez solventado el problema de las imágenes, pasamos a la paleta de colores. Para resaltar el texto y los botones, tuvimos en cuenta la saturación e intensidad que utilizamos para retocar las fotografías, por lo que optamos por unos tonos azulados, morados y blancos.
Por último, la tipografía. Escogimos la fuente Oxanium para que tuviera un rollo ochentero y noventero. Escalamos el tamaño de la letra a 32, 55 y 100px, enumerados por: párrafo, h2 y h1. Utilizamos una comunicación cercana, muy de la época, porque sentíamos la necesidad de poder ponernos en la piel del usuario.
Puedes probar el prototipo tanto en móvil y tablet como en desktop mediante este enlace: https://app.draftxr.com/vr/edFyOD 😊
Tras tres días de intensos y duros procesos para conseguir implementar todo nuestro diseño en el plugin y que éste funcionase, conseguimos sacar adelante el proyecto.
Conseguimos cuatro voluntarios a los que mostrar nuestra propuesta y, para causar una mayor impresión a la hora de experimentar la vuelta al pasado, decidimos que fuera a través del teléfono. Ya que todo nuestro proceso se ha hecho mediante videollamadas, pedimos a los usuarios la posibilidad de conectar por un lado el ordenador para poder ver así sus reacciones y, por otro, su dispositivo móvil dentro de la reunión para compartir pantalla y ver en todo momento qué está haciendo.
La idea funcionó con sus más y sus menos.
El recorrido de entrar a un concierto fue un poco caótico, pues confundían el Onboarding con instrucciones que podían ser clicables y sentían que todo el camino hasta poder disfrutar de un espectáculo en directo era muy largo. Cuando les preguntábamos si podían obtener algo de merchandising que no requiriera pasar por tienda, intuían que, si no era una opción era otra, y lo buscaban a través de la pantalla vis a vis, que te metía en una entrevista con el grupo o artista que habían escogido escuchar, dentro de la cual había una sección que te ofrecía obtener productos de ese grupo.
Como anotaciones extras que nos dieron los usuarios, sacamos en conclusión las siguientes:
- Las pantallas del principio causan confusión y se hace muy pesado hasta poder llegar a lo importante.
- En algunos artboards se echa en falta poder retroceder, como, por ejemplo, si ya está disfrutando del concierto y quiere volver a cambiar su avatar.
- Si no se puede comprar a través de la tienda, hace falta que se entienda qué es lo que el usuario puede hacer. «¿Cómo que sin pasar por la tienda?».
- Quisieran haber podido tener la oportunidad de abandonar la experiencia sin tener que ir a otras pantallas que no fuera la del concierto directamente.
- No entienden por qué en una pantalla existe la posibilidad de «volver atrás» y de «salir» al mismo tiempo. Se debería resaltar de otro tono si el usuario desea salir y finalizar su experiencia.
- El vocabulario tan cercano no termina de gustar a todo el mundo. «El colegueo hay quien lo admite y quien no».
- La interfaz no es tan atractiva como podría llegar a serlo.
Mejoras a tener en cuenta…
Una vez finalizado el proyecto en grupo, valoramos de manera individual qué podríamos mejorar.
Echando la vista atrás, cometimos fallos a los que deberíamos habernos anticipado por medio de las heurísticas, cosa que se nos pasó por alto. Por tanto, mis mejoras son las siguientes:
- Barra de navegación en todo momento por si el usuario desea ir a otro sitio o, directamente, salir del concierto.
- On boarding al inicio cuando el usuario así lo desee. No todos querrán leerlo, por lo que podrá escoger qué desean hacer desde un principio.
- Interfaz más llamativa.
- Mejorar el vocabulario y que no parezca tan de colegueo.
- Ofrecer una entrevista de esa gira y no un vis a vis. Nuestra tecnología actual sí puede recrear a las personas, pero sería un gran coste que no podría permitirse desde un principio el negocio.
- Opción de capturar el momento a través de una cámara, la cual estaría dentro de la sala y recogería los datos que en ese momento el usuario está viviendo desde su interfaz y la implementaría en el croma mediante IA.
En los test de usuario tuvimos muy en cuenta la música, para poder hacerles viajar a los años 80 y 90. Además, el puntero que nos ofrece el complemento es muy pequeño, y desde el dispositivo móvil no todo el mundo lo podía apreciar, por lo que en el vídeo he añadido un cursor rojo para crear la sensación del puntero.
Aunque el vídeo haga el on boarding completo, el usuario tiene libertad absoluta de moverse por la interfaz desde el primer on boarding, donde se explica el uso del puntero.
Como añadido, el prototipo final está diseñado en 2D debido a que el plugin sólo permite crear una panorámica por una cuenta de Adobe, por lo que he decidido dejar el enlace original para que todas aquellas personas que deseen experimentar el proyecto tengan acceso. 😊
Como novedad, para la página oficial del museo, la cual no hemos llegado a prototiparla debido al poco tiempo que teníamos, he llevado a cabo el diseño de una página landing page tanto para versión móvil como desktop, donde se presenta la tecnología de las gafas virtuales.
