Dando una vuelta a Motorbeach
Microsite Design · UX / UI Case Study
El mundo de las motos custom, coches vintage, surf y la música siempre han tenido algo en común, son apasionantes. Por ello, encontramos diferentes ferias y festivales que dan culto a estas disciplinas, reuniéndolas con el objetivo de transmitir el gran entusiasmo que generan entre sus seguidores.
Dada la envergadura de estos eventos, resulta imprescindible contar con un sitio web apropiado donde promocionarlos.
1. El proyecto: Microsite
En este proyecto debíamos crear un microsite responsive para el festival Motorbeach. Para ello, tuvimos en cuenta las diferentes etapas, es decir, el pre-evento, evento y el post-evento.
Actualmente Motorbeach cuenta con una web convencional donde presentan de forma extendida el festival y sus servicios. No obstante, era necesario crear un espacio único y temporal destinado a fines estrictamente promocionales y de conversión. Así podríamos generar una comunicación mucho más directa y accesible para los usuarios y futuros asistentes.
2. Objetivo
Fundamentalmente los objetivos de este microsite son: incrementar los beneficios y mejorar la imagen de Motorbeach. Esto se conseguiría aumentando el número de ventas de entradas online y la conversión de clientes. También mejorando la percepción de los usuarios con un diseño centrado en sus necesidades.
3. Research y Arquitectura de la Información (AI)
Durante esta primera fase de inmersión del proyecto, empleamos diferentes metodologías lean orientadas a la investigación y que nos ayudarían a plantear y dar soluciones basadas en el usuario.
Benchmark (análisis de la competencia)
En primer lugar, realizamos un análisis de la competencia tanto a nivel nacional como internacional. Evaluando los puntos positivos y negativos de cada competidor y sacando conclusiones aplicables al proyecto.
Escogimos festivales y eventos que compartieran temática y público. Algunos ejemplos son: Wheels & Waves, Oldies But Goldies, Surf, Music & Friends, entre otros.
User Persona
Con el objetivo de empatizar con los usuarios y validar decisiones en función de sus pensamientos, empleamos la herramienta de User Persona.
Para ello creamos dos perfiles arquetipo, que representan a la visión de un expositor del festival (Jake) y la de una asistente (Charlotte).
Entrevistas
Realizamos también una serie de entrevistas a usuarios tipo con las que obtener información cualitativa acerca del festival Motorbeach. Sacamos las siguientes conclusiones:
Nos llamó especialmente la atención como la mayoría coincidía en el hecho de que si no contaran ya con buenas referencias del festival, probablemente no les llamaría la atención al ver su sitio web. Se trataba de un espacio con demasiada información, mal estructurada y estéticamente poco atractiva.
Estaba claro, debíamos crear un nuevo espacio adaptado a las necesidades de los usuarios y en el que aumentar los puntos de conversión.
Affinity Diagram
Realizamos un diagrama de afinidad donde agrupamos toda la información obtenida durante la investigación y la ordenamos para poder clasificarla. Gracias a esto, pudimos sacar fácilmente conclusiones y evidencias que nos ayudaron a continuar con el proyecto.
Sitemap (AI)
Elaboramos un sitemap, que como su propio nombre indica, es un mapa del sitio web. Sirve para estructurar la información de los diferentes recorridos y definir los niveles de navegación en los que se encuentra cada elemento.
La nueva estructuración la definimos teniendo en cuenta las necesidades de los usuarios (asistentes, expositores y prensa) y nuestro objetivo de conversión.
4. Solución
En la imagen superior podemos ver cuál era el aspecto de la homepage de Motorbeach en 2019. Nos encontramos ante un diseño web neutro, visualmente poco atractivo y que no termina de llamar a una acción concreta.
Como recordaréis, durante el proceso de investigación, confirmamos con los usuarios la importancia de ofrecer una imagen apropiada a la hora de patrocinar o vender un producto. Por este motivo, no solo debíamos trabajar las técnicas para la monetización, sino también el conjunto visual que conformaría el nuevo universo de Motorbeach.
Por tanto, teníamos dos objetivos principales con este proyecto: el primero, enfatizar los puntos de conversión y atender las necesidades de negocio; el segundo, una actualización de la imagen de marca para mejorar la percepción de los usuarios y transmitir la esencia de un festival que da culto al mundo de la gasolina y el salitre.
Conversión
Mediante bocetos, planteamos la distribución de los bloques de información y los CTA (Call To Action) que aparecerían en el microsite. Pudiendo testearlos rápidamente con usuarios y así comprobar su efectividad.
El primer CTA de compra de entradas con el que se encontraría el usuario lo situamos al inicio de la página, justo debajo de la cabecera y acompañado de una imagen y texto potente que incremente las posibilidades de captación.
A continuación, siguiendo un patrón muy común en el diseño web, dejamos el header anclado en la parte superior para ayudar a la navegación y le añadimos un segundo CTA de compra que se activaría al sobrepasar al primero. De esta manera, cuando el usuario haga scroll y supere nuestro primer CTA, seguirá teniendo acceso en todo momento al menú principal y al botón de compra.
También optamos por la inclusión de banners que sirvieran como separación de los módulos y además como punto de conversión. Un espacio en el que ofrecer la posibilidad de subscribirse a la newsletter o disfrutar de otros servicios relacionados con el festival. Dichos banners debían contar con un diseño que se integrase correctamente con el resto de la web, sin resultar abrumadores para los usuarios.
Moodboard
Una herramienta muy útil a la hora de llevar a acabo un proceso creativo, es el panel de tendencias o moodboard. Consiste recolectar en un lienzo todo tipo de elementos que puedan servir de inspiración (colores, texturas, imágenes, tipografías…) a fin de crear diseños consistentes y con sentido.
En este moodboard, recogimos principalmente texturas y elementos que representan la esencia del mundo de las motos, el surf y los coches clásicos (polvo de tierra, olas salpicando, óxido por salitre, carreteras infinitas...). Detalles que hacen de este estilo de vida algo tan especial y único.
Rebranding (rediseño de la marca)
En cuanto al logotipo, el actual cuenta con un tagline descriptivo y la figura de una tabla de surf como elemento decorativo, pero observamos evidentes problemas de legibilidad. Esto se hace evidente al aplicarlo a pequeñas escalas y formatos responsive.
Por ello, a la hora de actualizar la marca, priorizamos la correcta visualización, la flexibilidad y las nuevas tendencias gráficas.
Buscamos darle un toque actual y minimalista, pero sin perder su esencia rústica y divertida. Tampoco queríamos recurrir a lo evidente así que optamos por eliminar elementos decorativos y taglines. Rescatamos la tipografía original, aumentamos su peso y remarcamos el detalle de las salpicaduras en el texto para que los usuarios puedan identificarlo fácilmente.
En el lado derecho podemos ver el resultado obtenido:
5. Prototipos Hi-Fi (Alta Fidelidad)
Una vez concluido el proceso de investigación y el testing con usuarios, realizamos el prototipo de alta fidelidad teniendo en cuenta los puntos de mejora identificados.
Basándonos en los datos recabados durante el research, realizamos en primer lugar la versión desktop y posteriormente, cumpliendo con el briefing, diseñamos la versión responsive adaptada para móviles.
Version de escritorio (desktop)
El video representa el recorrido que realiza el usuario al pasar por los diferentes módulos de la homepage y terminar en la página de Venta de entradas donde decide realizar la compra.
A continuación, lo explicamos con más detalle:
- En primer lugar, el usuario se encuentra con CTA de compra de entradas representado por un botón verde.
- Una vez sobrepasa el primer CTA al hacer scroll, se destaca en verde en el header el segundo CTA. El cual le acompañará durante toda la navegación.
- A continuación, se encuentra información sobre Motorbeach y sus novedades para el 2019.
- Luego, aparece un banner que ofrece beneficios exclusivos por suscribirse a la newsletter.
- Después el programa desglosado por categorías y la opción de descargar el programa completo.
- Le prosigue un banner que oferta servicio de alojamiento del festival.
- En la siguiente sección, vemos las diferentes formas de participar, pudiendo elegir entre Expositores, Prensa o Asistente.
- Continúa con un banner que promociona la Shop del microsite.
- Al llegar a la galería, encuentra contenido de otros años.
- Finalmente en el footer, tiene acceso a las redes sociales de Motorbeach.
- En este punto, el usuario decide darle al botón de Entradas, situado en el header y le lleva a la página de venta de entradas.
- Se muestran los diferentes packs de compra y puntos de venta físicos.
- Después, un banner que recomienda nuevamente visitar la Shop.
- Por último, una sección de comentarios de asistentes de otros años.
- Para terminar, el usuario vuelve a ver los packs y elige uno para comprarlo.
Versión mobile responsive
En este segundo video, se muestra el recorrido por la homepage en formato responsive para móviles.
Destacan principalmente dos elementos; el primero, el header fijo en la parte superior y el segundo, el CTA de compra que queda anclado en la parte inferior y acompaña al usuario durante el resto de la navegación.
6. Next Steps
En cuanto a los siguientes pasos a desarrollar, hablaríamos de:
- Posibilidad de descarga del plano del evento con estimaciones de tiempo y distancia entre los diferentes stands y actividades.
- Teniendo en cuenta que la mayoría de asistentes del festival vienen de fuera y se alojan en el sitio, ofrecer un servicio que organice rutas temáticas propias de Motorbeach previas al evento. Con intención de promover los valores de la marca, crear comunidad y así motivar a los asistentes a volver.
- Añadir la reserva de entradas o merchandising de la próxima edición.
7. Aprendizaje y agradecimientos
Gracias a este proyecto, pudimos contrastar la importancia de la “primera impresión” y cómo influye en la percepción que desarrollan los usuarios acerca de los productos y servicios que se les ofrece.
Por otra parte, comprendimos la necesidad de considerar todas las fases que conlleva el lanzamiento o promoción de un producto. Atendiendo en todo momento las necesidades de los usuarios y las del negocio.
Para terminar, agradeceros el tiempo invertido en esta lectura y esperamos que os haya gustado. Si ha sido así, ¡No olvidéis darle tres claps al proyecto!
