Madrid Games Week

Microsite Design · UX / UI Case Study

Anais Saphire
Oct 7, 2019 · 9 min read

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.

Benchmark · Microsite MGW

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).

User Personas · Microsite MGW

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:

Conclusiones entrevistas · Microsite MGW

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)

Sitemap · Microsite MGW

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.

Estado actual (2019) MGW · Microsite MGW

¿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:

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:

A continuación se puede ver el comportamiento que se mencionaba anteriormente del Header.

ENTRADAS:

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:

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!!

Anais Saphire

Written by

UX / UI Designer | Graphic & Industrial designer (Madrid, Spain) https://anaissaphire.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade