Ruidoblanco

UX/UI

HERRAMIENTAS
Illustrator + Figma + Photoshop

FECHA
Diciembre 2020

ÍNDICE

  1. Descubriendo
    1. Investigación
    2. Encuestas
    3. Entrevistas
  2. Definiendo
    1. User personas
    2. Customer journey
    3. Propuesta de valor
  3. Desarrollando
    1. Plan de medios
    2. Priorización de funcionalidades
    3. Sitemap
    4. Wireframes
    5. Moodboard
    6. Guía de estilo
  4. Puesta en marcha
    1. Prototipos navegables
    2. Mockups
  5. Aprendizaje y siguientes pasos

En los tiempos de pandemia algo que no podía parar de echar de menos eran los festivales. Quiero que al leer esto te metas de lleno en un festival, que estés en la atmósfera de estar rodeado de gente, escuchando música por todos lados, pegado a una persona que no conoces y que te canta al oído.

El cartel este año está formado por 4 bandas principales, que son Descubriendo, Definiendo, Desarrollando y Puesta en marcha, y los teloneros que hay justo debajo.

1. Descubriendo

1.1 INVESTIGACIÓN
Llevar la experiencia de un festival a casa.

El reto principal era llevar la experiencia de un festival a casa, ya que hoy en día, sobre todo en invierno esperando a esos festivales que llegan en verano, lo tenemos un poco difícil a la hora de poder acudir a este tipo de espectáculos.

Al empezar este proyecto quise cotillear otros festivales que ya hubiesen hecho antes una versión online, entre ellos el Cuarentena Fest al que yo misma asistí, y el Couchella. De estos cuatro solo uno de ellos era de música española, pero los conciertos se transmitían en YouTube. Cuando yo asistí a este festival me pareció una idea muy buena pero a la vez un poco dispersa; eran muchos días, los conciertos eran a través de YouTube, y a veces se me olvidaba cuando era cada uno de ellos.

1.2 ENCUESTAS

Empecé a investigar con datos a través de encuestas que hice a 113 personas, en su mayoría participantes de 20 a 35 años, con todo tipo de preguntas sobre música, conciertos y festivales, y de ahí saqué los siguientes datos clave para el resto de la investigación.

Quise sacar un poco más de chicha para saber qué pasaba con ese 22% que no va a festivales, para analizar y sacar puntos débiles que pudiera potenciar en la experiencia online y tomarlos como oportunidades, como que suelen pillar lejos o que son un agobio entre tanta gente.

En la otra cara de la moneda teníamos a un 78% que les encantaba ir a festivales, por lo que todo el proyecto tenía sentido, y las cosas a las que más importancia le dieron fueron las siguientes:

1.3 ENTREVISTAS

De las encuestas saqué dos perfiles bastante claros y por ello decidí entrevistar a dos de los encuestados, que son cercanos a mi, para sacar algo más de información de primera mano. Me dijeron estas frases que son las que me marcaron el camino para seguir con la investigación, y saqué estas ideas clave a modo de conclusión.

2. Definiendo

2.1 USER PERSONAS

Saqué a dos personas o usuarios target para este proyecto, basadas en las observaciones y en los datos que recogí de las encuestas y las entrevistas. Os presento a Rocío y Felipe. Rocío es la típica fan fatal que siempre está en la primera fila, se hace ronda de festivales en verano y nunca le falta una cerveza en mano, seguro que conoces a más de uno así. Si te gustan los festivales seguro que has sido como Rocío alguna vez en tu vida.

El segundo usuario objetivo de nuestro festival es Felipe, el típico espectador que se queda atrás en los conciertos, que no le gusta que le molesten, le gusta coleccionar vinilos… Es un chico joven pero en el fondo es como un señor mayor. 

2.2 CUSTOMER JOURNEY

Para entender su experiencia en los festivales de música, creé un customer journey. El objetivo de esta herramienta era descubrir sus puntos altos y bajos, lo que me permitiría identificar los puntos de dolor y las áreas de enfoque. La experiencia es una auténtica montaña rusa.

Tras analizar el viaje que podían atravesar cada uno de ellos, observé que el precio era un factor fundamental y a su vez había otros puntos de fricción que manchaban la experiencia, tal y como las colas, aglomeraciones, baños sucios… en resumen, todo lo malo que tienen los festivales. Sin embargo, esto sirvió como oportunidades en las que centrarme para cumplir el objetivo final.

Luego convertí esos principales puntos bajos en necesidades principales:

    • El precio debe ser económico, y más al tratarse de un evento online
    • Los amigos son una parte vital de la experiencia y deben estar presentes 
    • Hay que mantener involucrados a los participantes

Esta línea me ayudó mucho a ver todo el contexto de la experiencia. Una vez identificados sus tres principales puntos débiles, pude transformar esos problemas en frases del tipo How Might We (HMW):

    • ¿Cómo podemos bajar el precio lo máximo posible?
    • ¿Cómo podemos conectar la experiencia con los amigos?
    • ¿Cómo podemos dar a conocer las ventajas de un festival online?

Esto lo leí un poco a lo teletienda, ya que son las necesidades básicas que necesitamos cubrir, por así decirlo, las cosas que echan para atrás hay que combatirlas con una ventaja de que el festival sea online.

 

¿Tus favoritos se solapan o duran tan poco que no los disfrutas? Los tendrás todos grabados para verlos luego desde la web. 

¿Nunca llegas a la primera fila? Podrás ver hasta los poros de la cara del artista. 

¿Te haces pis? Olvídate de colas y aglomeraciones. Ahora puedes ir al baño sin tener que atravesar una masa de gente sudando. 

¿Gente gritando a tu lado? Ninguna, solo el cantante en tus altavoces.

Por fin había terminado con el pilar de definición del diseño centrado en el usuario y estaba lista para pasar a la fase de desarrollo.

3. Desarrollando

Ahora pasamos a la parte donde se desarrolla el meollo. Aquí decidí dividir la experiencia del festival en tres fases:

  1. La primera fase es la vía pública que da a conocer el festival por la calle con los típicos mupis de autobús o metro.
  2. La segunda fase se centra en las redes sociales y la web, que refuerza la publicidad y la información general.
    · Fomenta la participación de los usuarios ya que apunta a la web que es donde se mueve el cotarro y se retroalimentan. Decidí crear una web ya que la experiencia quería que fuese inmersiva, que no cayese en saco roto de un año a otro, aunque no se descarta una app en el futuro, para complementar la web pero nunca para sustituirla.
  3. Y por último, la tercera fase se trata del envío de un paquete promocional con cada una de las entradas
    · Ayuda a mantener la relación y la comunicación con el público.
    · Justifica el pago por el concierto, a pesar de que sea online (como se recopiló en las entrevistas)
    · Apela a lo emocional
    · Te acerca al festival de una manera más física y más humana

Teniendo claros los objetivos decidí separar el proyecto en dos fases muy claras para la web, antes y durante el festival, ya que son dos etapas muy diferenciadas con dos objetivos muy diferentes cada una de ellas (dar a conocer / ver los conciertos).

3.1 MVP (Mínimo Producto Viable)

Decidí llamar a nuestro festival RUIDOBLANCO, entendiendo así la similitud con el ruido de fondo del ventilador de tu ordenador, tan presente e imprescindible en este festival. Una vez definido el MVP, estaba lista para empezar a imaginar cómo sería la web de Ruidoblanco. El mapa del sitio fue una gran herramienta para ayudarme a entender la taxonomía.

Era hora de empezar a crear prototipos de baja calidad. Recibir comentarios y críticas desde el principio no sólo ayuda a garantizar que se está diseñando para el usuario y no para nadie más, sino que también ahorra tiempo a largo plazo. Cuanto menor sea la fidelidad, más rápida será la implementación de cambios.

Después, para hacerme un poco más clara la idea, hice un wireframe a mano de diferentes secciones de la web, como por ejemplo el cartel o la zona de la tienda, que era lo que más claro tenía en ese momento.

3.2 MOODBOARD

De aquí pasé un poco a la parte más gráfica y visual, quería hacer una web que llamase la atención en la que predominase un estilo brutalista.

Al realizar una prueba de deseabilidad de los moodboards, o de cualquier otro elemento estético, es importante preguntar al público objetivo cómo le hace sentir el moodboard. El objetivo no es preguntarles qué color, tipo de letra o imagen prefieren, sino qué sentimientos o emociones evocan esos elementos visuales. Necesitaba comprobar el mensaje que intentaba comunicar, no las «preferencias» del usuario.

Durante la tormenta de ideas sobre los atributos del festival describí el evento como:

  • Moderno
  • Atrevido
  • Ecléctico

Después creé el moodboard y lo probé con 5 usuarios, preguntándoles cómo les hacía sentir y por qué. También les pregunté si había algún elemento que les pareciera «apagado» o si algo no terminaba de encajar. Los datos que recibí de las pruebas incluían palabras como: diversión, moderno, diferente, alternativo, fiesta, buena energía, feliz, brillante, emoción y explorar. Como empecé a ver algunas tendencias en los datos, pude tomar decisiones más sólidas sobre el diseño.

Con la inspiración visual del moodboard, acompañada de los atributos de la identidad, llegó el momento de trabajar en la guía de diseño. Las guías de estilo están diseñadas para traducir nuestros moodboards en los cimientos de un sistema de diseño. Realicé una guía de estilo del festival en la que elegí la tipografía, una principal para el logo y otra secundaria para todos los textos de la web, ambas bastante características, junto con la paleta de colores muy llamativos, que rompen junto con la tipografía.

Usando de base la guía de estilo añadí varios elementos visuales, para combinar con la identidad del festival realicé unos iconos e hice varios tipos de elementos que asociaba con el nombre del ventilador.

4. Puesta en marcha

4.1 PROTOTIPOS EN ALTA FIDELIDAD

Volvemos a nuestra amiga Rocío de nuevo. Rocío va un día a coger el autobús y ve estos dos carteles. Tienen unos colores muy llamativos por lo que se para a leerlos, y ahí se queda. 

De vuelta a su casa decide coger el metro y ve este otro cartel, y como es la segunda vez que lo ha visto hoy en el camino a casa decide bichear el Instagram del festival, a ver qué se cuece. Ve el feed y la publicación de un sorteo.

Es hora de cotillear la web. Pincha aquí para ver el prototipo en Figma. Al ver los precios piensa que hay poca diferencia entre unas entradas y otras, y decide escoger la entrada melómana, que trae más cosas. Tras comprar su entrada pasan unos días y recibe esta caja tan chula, la abre y empieza a ver las cosas que vienen incluidas: una cerveza, su pulsera, unas pegatinas, y un altavoz de regalo.

El día del festival se sienta en su sofá y se pone al lío con su cerveza en mano.

¡Va a empezar, vamos a figma! Pincha aquí para ver el prototipo completo.

¿QUÉ APRENDÍ DE TODO ESTO?

El proyecto se hizo con una idea clave en la cabeza pero no realicé más ampliaciones (app) por falta de tiempo, por lo que es algo a implementar en un futuro. Lo malo de este tipo de proyectos libres es que siempre se te echa el tiempo encima, pero cuanto más tiempo, más modificaciones quieres hacer. 🙂

Mi objetivo principal con este proyecto era aprender lo que conllevaba un proyecto de UX y UI de principio a fin, desde que trazas la idea en tu cabeza hasta que tienes el producto final, y he podido caminar por todos los pasos uno a uno y elegir los más adecuados para el tipo de proyecto que quería llevar a cabo. 

En resumen, he cumplido los objetivos que tenía en un principio, y he sacado muchas más ideas para continuar con el mismo.

Volver

¡Este sitio web es único y necesitará de un navegador moderno para funcionar correctamente!

¡Por favor, actualiza!

Compartir