Construcción de flujo web para compra de boletos del Estadio de la Ciudad de los Deportes en la Ciudad de México.

Estadio de la Ciudad de los Deportes

Construcción de flujo web para compra de boletos del Estadio de la Ciudad de los Deportes en la Ciudad de México.
Diseño UX
Junio 2022

Resumen del proyecto

El producto: El Estadio de la Ciudad de los Deportes es un estadio que ha tenido eventos de futbol en la Ciudad de México desde 1944. Ha albergado partidos de futbol para clubes como Cruz Azul y Atlante. Ofrece partidos de futbol los fines de semana, así como otros eventos ya sea musicales o celebraciones empresariales. Los eventos están dirigidos al público en general, por lo que asisten familias y gente de todas las edades.

Duración del proyecto: abril de 2022 a junio de 2022

El problema: El estadio no tiene un sitio web en el cual se pueda adquirir directamente un boleto a un evento. Depende de otro sitio web para ello, lo cual retrasa el proceso a los clientes. El objetivo: Crear un flujo web de pedido de boletos propio del estadio para que los clientes puedan comprar los boletos de una manera más directa y rápida.

Mi rol: Diseñador de UX a cargo de crear una aplicación para el Estadio de la Ciudad de los Deportes desde la concepción hasta la entrega. Responsabilidades: Realización de entrevistas, esquemas en papel y digitales, creación de prototipos de baja y alta fidelidad, realización de estudios de facilidad de uso, accesibilidad e iteración de diseños.

Investigación sobre los usuarios

Realicé entrevistas y creé mapas de empatía para entender a los usuarios para quienes diseño, así como sus necesidades. Un grupo de usuarios primario identificado a través de la investigación fueron adultos trabajadores y estudiantes que quieren ahorrar tiempo a la hora de comprar un boleto al estadio. Los usuarios también tenían el interés en que el Estadio de la Ciudad de los Deportes tenga su propio sitio web, sin tener que entrar a la página del equipo de futbol que juegue actualmente ahí.

Puntos débiles: Los clientes quieren adquirir sus boletos en el menor tiempo posible, se necesita una interfaz que permita adquirir los boletos en el momento de una manera directa y sencilla, el flujo de compra de boletos debe ser parte de la interfaz del sitio del estadio.

Planteamiento del problema: Oscar es un estudiante aficionado al futbol que necesita comprar boletos de una manera más efectiva porque no hay una página del estadio en la que pueda comprar un boleto directamente.

Diapositiva con el planteamiento del problema del usuario Oscar Fuentes.
Persona: Oscar Fuentes

Crear un mapa de recorrido del usuario de Oscar reveló lo útil que sería para los usuarios tener acceso a un sitio oficial del Estadio de la Ciudad de los Deportes para comprar boletos en línea.

Tabla con el recorrido del usuario Oscar Fuentes.
Mapa de recorrido de usuario

Esquemas de página en papel: Tomarse el tiempo para elaborar en papel iteraciones de cada pantalla de la aplicación garantizó que los elementos que llegaron a convertirse en esquemas de página digitales fueran los correctos para abordarlas dificultades del usuario. Para el flujo de pedidos, prioricé un sistema rápido para revisar los eventos del estadio y comprar los boletos.

Esquema de página en papel hecha a mano de la página web del Estadio de la Ciudad de los Deportes.
Esquema de página en papel.

Esquema de página en papel hecha a mano de la página web del Estadio de la Ciudad de los Deportes.
Esquema de página en papel.

Esquemas de página digitales

A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas según los comentarios y los resultados de la investigación de usuarios. Se hizo hincapié en la necesidad de crear un sitio web responsivo, capaz de hacer funcionar el flujo de compra de boletos en la mayoría de los dispositivos móviles. Usando el conjunto completo de esquemas de página digitales, creé un prototipo de baja fidelidad. El flujo de usuario principal que conecté fue el de comprar y reservar un boleto para un partido del club Atlante, por lo que el prototipo podría usarse en un estudio de facilidad de uso.

Maqueta de baja fidelidad de página digital de la página web del Estadio de la Ciudad de los Deportes.
Maqueta de baja fidelidad

Realicé dos rondas de estudios de facilidad de uso. Los hallazgos del primer estudio ayudaron a guiarlos diseños para convertirlos de esquemas de página en maquetas. El segundo estudio utilizó un prototipo de alta fidelidad y reveló qué aspectos de las maquetas necesitaban refinarse: Los usuarios quieren obtener su boleto de una manera fácil y rápida, es preferible un sitio web propio del estadio para la compra de boletos, se necesita una mejoría en el acceso a los menús, el método de pago es poco claro.

Prototipo de alta fidelidad

El primer diseño permitía determinar la estructura de la página. Una vez obtenidos los datos, se realizó un reacomodo de los mismos en la interfaz, así como se modificó la información de los eventos ofrecidos. El método de pago se podía entender, pero se modificaron aspectos visuales y de organización para ubicar mejor los datos. El prototipo final de alta fidelidad presentó flujos de usuario más limpios para pedir y descargar un boleto. También satisfizo las necesidades de los usuarios de contar con una mejor navegación y una mejor distribución de los datos.

Maqueta de alta fidelidad de la página web del Estadio de la Ciudad de los Deportes para PC.
Maqueta de alta fidelidad para PC.
Maqueta de alta fidelidad de la página web del Estadio de la Ciudad de los Deportes para tabletas.
Maqueta de alta fidelidad para tableta
Maqueta de alta fidelidad de la página web del Estadio de la Ciudad de los Deportes para teléfonos móviles.
Maqueta de alta fidelidad para smartphone

Conclusiones: El sitio web hace que los usuarios puedan tener un mejor acceso a los boletos del Estadio de la Ciudad de los Deportes, dándole una presentación propia en internet. Mientras diseñaba el flujo del sitio web, aprendí que las primeras ideas son solo el comienzo del proceso. Los estudios de facilidad de uso y el feedback de los compañeros influyeron en cada iteración de los diseños del sitio.

Próximos pasos: Realizar otra ronda de estudios de facilidad de uso para validar si las dificultades experimentadas por los usuarios se abordaron de manera efectiva, realizar mejoras en las preguntas para las entrevistas a los usuarios para evitar problemas de sesgo, realizar más investigaciones de usuarios para identificar nuevas necesidades.

No items found.

Otros proyectos

MediHome

Diseño de herramienta multiplataforma para soporte y recordatorio del tratamiento médico
Diseño UX
Diseño de herramienta multiplataforma para soporte y recordatorio del tratamiento médico
Ver proyecto

La Paloma

Construcción de app de entrega a domicilio para la cafetería "La Paloma" en Oaxaca.
Diseño UX
Construcción de app de entrega a domicilio para la cafetería "La Paloma" en Oaxaca.
Ver proyecto

Manos que Sanan

Promoción de la Masoterapia en el Barrio de Mixcalco
Investigación
Promoción de la Masoterapia en el Barrio de Mixcalco
Ver proyecto

The Green Team

Diseño de branding para organización ecologista.
Diseño Gráfico
Diseño de branding para organización ecologista.
Ver proyecto

Galería fotográfica

Exposición de trabajos fotográficos
Fotografía e Ilustración
Exposición de trabajos fotográficos
Ver proyecto

Estemos en contacto