Madrid Games Week
Microsite Design · UX / UI Case Study
En la actualidad el mundo de los videojuegos es una de las industrias más potentes en el mundo (en España mueve el doble de ingresos que el cine o la música), engloba decenas de disciplinas y da trabajo a miles de personas en todo el mundo.
En las últimas dos décadas ha experimentado un crecimiento increíble, debido a los avances tecnológicos, comunicación y el incremento cada vez mayor de su comunidad, que siempre quieren estar al tanto de las últimas novedades.
1. El proyecto: Microsite Design
El encargo se basaba en crear un microsite para la Madrid Games Week (MGW), que fuera responsive, en el que se tuviera en cuenta el antes, durante y después de la feria, de cara al Research.
2. Objetivo
¿Qué queremos conseguir con este microsite?
Se fijó mediante un Elevator Pitch cuál era el objetivo principal que se quería conseguir con este microsite para la MGW.
3. Research & AI (arquitectura de la información)
El Research se compone de las diversas metodologías de investigación que empleamos a la hora de comenzar un proyecto. Gracias al uso de estas herramientas podemos basar nuestro proyecto en unos pilares sólidos que nos ayudarán a meternos de lleno (fase de inmersión) en el problema que queremos solucionar, encontrando una oportunidad de mejora.
Empleando en este proyecto metodologías Lean, seguimos una serie de técnicas de investigación para sumergirnos de lleno en el proyecto.
Benchmark
Se hizo un Benchmark, es decir un análisis de la competencia directa nacional e internacional, señalando buenas y malas prácticas, para poder entender el producto, lo que lo rodea y encontrar patrones.
Se analizaron ferias internacionales dedicadas al mismo sector como E3 (Electronic Entertaiment Expo), Gamescom, Tokio Game Show y nacionales como Gamepolis (Málaga), TLP (Tenerife), Nice One (Barcelona)
User Persona
Una de las mejores formas de ponerse en la piel de nuestros usuarios es crear los llamados User Persona. Estos son arquetipos, es decir, un conjunto de usuarios que representa a un grupo, gracias a ellos podremos validar decisiones según su pensamiento.
En este caso decidimos crear dos, uno con el perfil de un asistente a la feria (Manu) y otro con el perfil de un expositor (Carla).
Entrevistas
A través de las entrevistas podemos obtener datos cualitativos acerca de lo que piensan los usuarios sobre el producto que se está investigando.
Durante este proyecto, las entrevistas se realizaron con el fin de obtener más información sobre lo que piensan los usuarios acerca de la MGW. Se hicieron entre 8 –10 entrevistas de las que se sacaron las siguientes conclusiones:
Affinity Diagram
Hicimos un Diagrama de Afinidad gracias al cual podemos reunir toda la información obtenida durante la investigación, tanto entrevistas como documentos de referencia, encuestas, … esto nos permite sacar unas primeras conclusiones, aglutinar información que antes estaba dispersa y comenzar a conectar unos datos con otros.
Sitemap (AI)
Se realizó un Sitemap, para poder estructurar toda la información que debía recoger la página web de MGW (teniendo en cuenta el antes, durante y después de la feria).
Mediante este ejercicio podemos diferenciar entre navegación primaria (Sobre MGW, Entradas, Agenda, Expositores) y secundaria (buscador, carrito, footer).
4. Brand
En el momento en el que se comenzó este proyecto, este era el estado actual del logotipo de la MGW y su pagina web.
¿Porqué era necesario un rebranding?
Según los resultados obtenidos durante el Research, quedó latente la necesidad de que hacía falta un rebranding. Las causas por las cuales era necesario son:
- Es necesario cambiar la orientación de su marca para reposicionarse.
- MGW entra en una nueva etapa y por lo tanto, su manera de comunicar debe ser actual.
- Los clientes no perciben MGW de la manera adecuada, ya que muchos no entienden sus valores, en lo que se apoya o lo que defiende. Además la mayoría de los usuarios no reconocen ni diferencian su identidad.
- Necesitan actualizar su imagen, ya que la actual ha quedado obsoleta y no se adapta a los formatos digitales.
Moodboard
Una de las mejores formas de buscar ideas, tendencias, inspiraciones y bases sólidas donde apoyar el proceso creativo de la creación de una marca, comienza por la composición de Moodboards. Gracias a ellos seguimos practicando la idea de sumergirnos por completo en el universo del producto que estamos desarrollando.
En este caso, gracias a los Moodboards fijamos ideas como las posibles tipografías que encajaban con la identidad que queríamos transmitir, la gama cromática que podría funcionar (la cual se moviera por tonos azules, pero con contraste) y los diferentes tonos de imagen, en resumen ver las inspiraciones en las que nos queríamos basar e ir creando un tono en cuanto al diseño que queríamos transmitir.
Identidad de Marca
Una vez asentados los pilares fundamentales de la marca, como son innovación, tecnología, diseño y los videojuegos, nació el nuevo rebranding de la MGW.
Su nuevo logotipo pretende hacer un juego visual, simulando un mando de videoconsola que enmarca las siglas del evento, uniendo ambos mundos (videojuegos y feria).
Los colores que se escogieron para la identidad de la marca se mueven en un espectro de azules, una gama cromática elegante que hablará de tecnología e innovación.
Esta, además, tiene la intencionalidad de transmitir la unión que sucede en este evento, donde se integran como uno solo la parte business y la parte experiencial del mundo de los videojuegos (expositores & asistentes).
5. Solución
Conversión
Antes de lanzarnos a pintar pantallas, debíamos seguir teniendo claro que nuestro principal objetivo era la conversión.
Teniendo esto claro decidimos, mediante bocetos (con metodologías Lean) distribuir los módulos de información y ver cómo se intercalarían con los CTA (call to action) de la compra de entradas para seleccionar la mejor estrategia a seguir.
Después de realizar este proceso y viendo el conjunto con perspectiva, nos dimos cuenta que en la parte del Header queríamos transmitir en un primer impacto una presencia muy fuerte y diferenciada de la marca, ya que estábamos haciendo un rebranding. Pero después podíamos pasar a tener un Header más reducido en el que se incorporaría un CTA de la compra de entradas.
Gracias a la incorporación de este elemento en el Header, nos aseguramos de que la compra de entradas siempre esté presente . Además se el Header se quedará anclado en la parte superior para que acompañe en la navegación, y así no perder nunca la opción de compra.
Prototipo Hi-Fi Desktop
Se realizó en primer lugar la versión Desktop porque el tráfico de la compra de entradas, según el Research, era mayor a través del mismo.
Las conclusiones obtenidas durante la fase de investigación y los test fueron aplicadas, teniendo como resultado final este prototipo de alta fidelidad para Desktop donde podemos ver la Home y la sección de entradas.
A lo largo del prototipo podemos ver:
HOME:
- Encontraríamos en primer lugar un CTA de la compra de entradas para motivar la asistencia a la feria.
- Después un poco de información básica para aquellos que que son nuevos acerca de “¿Qué es la MGW?”.
- Un CTA para recordar la compra de entradas.
- La agenda de la MGW y todo lo que incluye, tanto ponentes, como su programa, las actividades y los torneos que se celebrarán a lo largo de la feria.
- Un CTA para suscribirse a la newsletter de la MGW y no perderse ninguna noticia, evento o nuevo expositor, entre otras cosas.
- Un módulo que cuenta lo básico para ser expositor y quién puede serlo a lo largo del evento.
- Por último un CTA para motivar la asistencia a los combates y torneos que se celebrarán los distintos días de la feria.
A continuación se puede ver el comportamiento que se mencionaba anteriormente del Header.
ENTRADAS:
- Al principio, lo primero que vería el usuario serían las distintas ofertas de las entradas, con una opción destacada señalando que suele ser la más vendida, fomentando su compra.
- Después se encontraría un CTA de una noticia sobre la feria en un medio conocido, para resaltar su status.
- Por último, estaría el apartado de las acreditaciones para la prensa, los youtubers… en resumen, gente especializada en la comunicación del sector.
En la sección de las entradas se quiso explicar cómo se comportarían las mismas al hacer rollover sobre ellas, destacando la seleccionada con respecto al resto.
Responsive: Prototipo Hi-Fi Mobile
Recordando una de las peticiones iniciales del briefing, el microsite que se desarrollara debía ser responsive. Por esta razón, el siguiente paso fue crear la adaptación a la versión móvil de las distintas pantallas, para ver cómo se comportaría todo el contenido.
Podemos ver en el prototipo cómo la cabecera se queda fija y el CTA de la compra de entradas se queda sticky, siempre acompañando en la navegación para fomentar la conversión.
Aquí podemos ver el resumen de la propuesta final de la Home y de la sección de las entradas.
A continuación se pueden ver algunas de las esencias del diseño visual de la propuesta en cuanto a (de izquierda a derecha) módulos, cards e iconos, tono de las imágenes, composición de imágenes, tipografías, módulos y botones e ilustraciones.
6. Next Steps
Los próximos pasos a desarrollar serían:
- Desarrollar la app en IOS y Android.
- Creación de rutas o tours temáticos por la ciudad de Madrid (por ejemplo, “Recorrido Assassin por el Madrid de los Austrias”).
- Plano con geolocalización dentro de la app, de la feria, para poder saber dónde encontrar cada stand y a qué distancia se encuentra.
- Calculador de tiempo de las colas de nuevos lanzamientos, para que cada asistente pueda decidir cómo emplear mejor su tiempo.
- Reservar cita para poder probar un videojuego, para evitar colas eternas y poder asegurar el disfrute de los asistentes, tanto probando juegos como motivando el tráfico fluido de los usuarios por toda la feria.
7. Aprendizaje & Agradecimientos
Gracias a este proyecto he comprendido la importancia, cuando se está diseñando un producto digital, de pensar en sus diferentes estados a lo largo de tiempo. Hay muchas cosas que tener en cuenta cuando quieres que un producto dure en el tiempo y sobre todo cumpla las expectativas que el usuario espera.
Por ello es importante pensar en qué repercute el antes, durante y después, en este caso de un evento como es la Madrid Games Week, en su microsite.
Quería daros las gracias a todos los que habéis llegado a leer este artículo hasta el final. Si tenéis alguna duda o comentario, no dudéis en decírmelo.
Espero que os haya gustado y si ha sido así espero vuestros Clap, Clap, Clap!!
