Vooy | Proyecto ganador del Hackshow de UX / UI Ironhack (Madrid)
Este es el proyecto final de Ironhack que fue elegido ganador del Hackshow de UX/UI. Para hacerlo, contaba solo con dos semanas contrarreloj.
Mi punto de partida era hacer algo que me gustara. Me encanta viajar y me encanta la cultura. Siempre que voy de viaje, antes de ir, intento hacerme con todo lo posible sobre ese país para empezar ya a “viajar” porque disfruto tanto de la preparación del viaje como durante. Esto viene a ser: leer libros, ver películas, series, escuchar canciones.. y siempre había echado en falta un sitio donde encontrar todo catalogado por país.
En plan.. me voy a Islandia. Saco la guía de la biblioteca, pero no hay una página específica que me dé info sobre el contenido cultural que se ha creado allí para poder empezar a viajar ya desde el sofá. Así que lo suelo buscar por mi cuenta peinando la web. Luego, me hace ilusión ir a esos sitios y reconocerlos. Es una sensación especial :)
Así que me dije… vamos a por ello. Tiene que haber más gente como yo. (Además, después de lanzar el proyecto, me di cuenta de que ahora está el tema que lo peta. No sé si habéis leído que San Juan de Gaztelugatxe está ahora desbordado porque la última temporada de Juego de Tronos se ha rodado ahí!).
- RESEARCH
Como también es diseño de producto, busco referencias parecidas que me ayuden a abrir camino y no encuentro mucho parecido. Solo Dive y DCine.org.
Arranco con un brainstorming, donde Luis Nagel (mi buddy de Ironhack), me ayuda con consejos diciéndome que no deje fuera Ciudades e Instituciones. Consejo clave para el desarrollo del proyecto.
Para eso, empezamos validando que efectivamente hay un nicho y un público. Hago entrevistas y encuestas.
Entrevistas, a perfiles muy dispares, de más viajeros a menos, y de más frikis a menos. Buscando información que luego me ayude a construir los user persona y los diferentes matices.
Hago cuatro entrevistas y dos extra de un perfil de Cultura y otro de Guía de viajes (Deluxe, especializada en Rutas temáticas por Madrid). Me aporta una visión más amplia que, de nuevo, será muy importante para la parte de negocio.
Lanzo las encuestas con Typeform, aprovechando el gancho de Juego de Tronos, que justo acaban de estrenar, y reconozco San Juan de Gaztelugatxe antes del boom. Las encuestas lo petan. A la gente le interesa mucho el proyecto y comparten. (La podéis ver y hacer aquí).
Saco muchas conclusiones. Os dejo las más importantes. Evidentemente, saco muchas más, pero os las voy contando a lo largo del post para no saturar.
2. ANÁLISIS
¡Bien! Tiene sentido y hay una “necesidad” real. Así que me pongo a hacer el Mapa de afinidad con toda la info. Lo mismo que os comentaba en el proyecto de los Galgos, perdonad la calidad de las fotos, pero lo hice a horas intempestivas de la noche. En verde, los datos cualitativos, en azul, cuantitativos y amarillo, el título del concepto por los que los agrupé. Este ejercicio sirve para asentar y reorganizar toda la info que has ido sacando. Que fue muuucha como os digo. No hay nada como escuchar.
Una vez que tenemos el UX Strategy Blueprint, como era un “negocio”, ya sabemos hacia dónde ir. Son preguntas que, aunque parecen fáciles, no lo son. Y con una hojita de estas igual te puedes tirar media hora o más. Es donde está toda la estrategia y también te preguntas cómo vas a hacer para monetizar.
Ahora pasamos a conocer a nuestros usuarios. Sacamos varios perfiles de User Persona, que vienen a ser arquetipos de persona, no es gente real. Como en las entrevistas, plasmamos diferentes inquietudes de más a menos viajeros y frikis.
Nos vamos a centrar en Luis, pero os dejo la fichita de todos:
Ahora nos vamos con Luis. Estamos viendo Juego de Tronos en su casa y flipa con la localización de San Juan de Gaztelugatxe.. se dice.. ¿esto será real? Y lo busca en Google.
Y en esta situación es donde hacemos un User Journey. Esta vez es Journey del todo, no proto como en el proyecto de los Galgos. Vamos analizando cómo sería la primera toma de contacto de Luis con nuestro servicio, detectando los Pain Points o puntos donde puede haber fricciones y tienen que ser reforzados. Como partimos de una hipótesis, ya que el producto no existe, me intento adelantar a los posibles problemas, miedos, perezas etc que puedan surgir. Esto se convierte en Oportunidades de Diseño que atacar a nivel de UX.
Ahora centramos nuestro User Story. ¿Qué quiere esta gente? Ya lo tengo super claro.
Además, como el producto iba a ser web y app, tuve que desarrollar ambos formatos paralelamente. La razón era que el tipo de uso que se le daba a este servicio cambiaba según la situación o contexto. Encontré estos cuatro:
Aquí hago un Benchmark, espío a la competencia u otras plataformas relacionadas y copio lo que me gusta, tal cual. Estas son las que investigué y de las que saqué ideas para las funcionalidades y cómo las resuelven otros.
3. IDEACIÓN
Llegamos a la parte más compleja (para mí). La parte de la Arquitectura de la Información, donde vamos a crear el Sitemap, toda la estructura de la web y app.
Yo al final lo fui haciendo todo a la par: sitemap, flujo de usuario y pintar las páginas a mano, porque si no, me costaba imaginarme todas las funcionalidades de cabeza. Preferí solapar estos tres ejercicios en uno, pero hay gente que lo hace en orden. Depende del caso concreto. Aquí os dejo el User Flow para web y app.
Y los bocetos hechos a mano, que ya sabéis, no os fijéis en lo feo que está, que estamos usando metodología Lean. Lo que importa es la agilidad y no el acabado final, jajaja
Parece mentira, pero yo me entiendo con todo esto.
Pasamos ya a los wireframes en baja Fidelidad (Low-Fi Wireframes), donde trabajamos la estructura y las funcionalidades, sin detenernos por ahora en la parte visual. Para esto era super importante tener en mente la info que había sacado del Research. Os la pego antes de cada wireframe.
Para la web:
Ahora para la app:
Ahora, tenemos que testear la app. Por falta de tiempo, no lo hice con animación. Solo me dio tiempo a enseñársela a profesores y compañeros, que me ayudaron mucho a mejorarla.
IDENTIDAD
Llegados a este punto, tendría que deciros cómo se llama la App. Os he desvelado un poquito arriba, pero en el proceso fue más o menos aquí cuando di con el nombre definitivo :)
Primero os explico el Naming. Se llama “Vooy” por tres razones:
- Voy del verbo ir, de ir a los sitios y verlo con tus propios ojos.
- Voy de “Voyage”, que significa Viaje en francés.
- Las dos oo son dos ojitos que es de ir a verlo con tus propios ojos, pero también de ver series, pelis, libros en casa. Da idea de visión y actividad.
Y esta sería la identidad de Vooy, que necesitaba crearla para empezar a pintar las pantallas. Creé la Identidad con el Moodboard, que me sirvió para ambas cosas, también para la web+app. Los hago en Pinterest en carpetas secretas.
Este es el Moodboard que creé. Una mezcla de cosas frikis, orden, color y humor. Vooy va enfocado a gente que ya sabe de lo que le hablas. No necesita que le cuentes la sinopsis de la película o el libro, sino que le aportes algo más, algo que no sepa. Tipo alguna curiosidad.
Pues vamos ya a pintar pantallas con los Wireframes de Alta Fidelidad (High-Fidelity Wireframes), tanto para web como para App.
4. PROTOTIPADO
Y ya pasamos a prototipar las pantallas. Las monto en Flinto y hago dos: la primera para web. A destacar que hago hincapié en vídeo, series que lo petan ahora, así como dar importancia a contenido actual como clásico. A la gente le interesa Juego de Tronos, pero también una ruta guiada por Bath de Jane Austen o un tour por los Pubs en Oxford de Tolkien. No tan de rabiosa actualidad, pero con mucho atractivo.
No lo he dicho aún, pero la parte de negocio de VOOY sería por un lado:
- Conseguir un acuerdo con las principales plataformas de contenido cultural: Netflix, HBO, Spotify, Amazon (en caso de libros) y trackear esos enlaces al contenido original. Todo el tráfico que se derivara de Vooy a estas páginas nos daría pasta. El negocio es importante para que un proyecto sea sostenible y autosuficiente. Por soñar, que no quede.
- Por otro, todas esas agencias, ciudades o ayuntamientos que ofrecen rutas guiadas relacionadas con contenido cultural, que pudieran ofrecer sus rutas a través de Vooy. No sé si lo sabéis, pero desde que La Trilogía del Baztán se publicó o El Silencio de la Ciudad Blanca, pueblos o ciudades como Elizondo (Navarra) o Vitoria-Gasteiz (País Vasco) organizan visitas guiadas oficiales.
(Así que si alguno de vosotros trabaja aquí y me lee, ya sabéis dónde encontrarme).
Prototipo de la web, donde veréis cómo se da respuestas a todas las necesidades de los usuarios: opiniones, compartir y crear rutas colaborativas, poder comparar la escena, acceder directamente al contenido original, poder comprar una ruta temática relacionada…
Y ahora vamos a por el prototipo de la app, que es la que tiene lo más divertido del proyecto ;)
Cuando te vas de viaje, evidentemente necesitas un dispositivo que puedas llevar encima contigo, donde puedas descargar offline el contenido, tu ruta creada, y que puedas seguirla en tiempo real hasta llegar al punto exacto donde se filmó la escena. Cuando llegas… la app detecta las coordenadas y… ¡Sorpresa, sorpresa! Echadle imaginación al ver el vídeo, jaja
5. TESTEAR
Ahora quedaría testear el prototipo a ver qué tal se maneja la gente con él. Porque aunque yo sea público objetivo de Vooy, hay que recordar que uno nunca es su usuario.
Espero que os haya interesado y os sirva para entender un poquito qué es esto del UX/UI, que está tan de moda.
Os dejo foto del Hackshow, presentando en Ironhack y foto finish con el hacha con el resto de cracks que presentaron también. Uehhhh!
En orden: Iga Gawronska, Alejandro Martinez, yooo, Susana Vázquez y Glarrz.
Gracias de nuevo a todos los que habéis contestado a encuestas, entrevistas, tests, opinado, aconsejado, fregado platos, venido al Hackshow. Y gracias a los cracks que tenemos de profesores Chucho Lozano, Óscar SP, Samuel Hermoso, Danny Saltaren y AlejandroArribas y a los T.A. Aketza Gómez e Isa Morell.
Dudas, ideas, mejoras, críticas… a mi mail hola@itziarsanvicente.com :)
Y si os habéis quedado con ganas de más (que sería para hacéroslo mirar), podéis ver mi proyecto SOS Galgos, que fue seleccionado para presentar en Google Campus Madrid.
