.png){kind=logo}
Charity M. Jantzen,UXC
Showboat Drive-In Theater
Estudio de caso de diseño receptivo
Por Caridad M. Jantzen
Nobody likes to wait in line, so we got rid of them!
El producto
¡Bienvenido a una nueva experiencia cinematográfica como nunca antes! Puede obtener una vista previa de películas, comprar boletos, concesiones y mercadería, y alquilar este teatro retro. Nuestro sitio/aplicación está diseñado para personalizar todo, desde el lugar donde se estaciona hasta los subtítulos y las descripciones de los subtítulos, todo desde el dispositivo seleccionado.
El problema
Tony Ajana es un cinéfilo ávido y un padre ocupado que necesita una forma de comprar fácilmente boletos de cine y concesiones en línea porque no quiere esperar en la fila con muchos niños y perderse la película.
La meta
Cree un método interactivo para que los usuarios simplifiquen y personalicen su experiencia en el teatro. La utilización de esta aplicación aumentará las ventas y garantizará que cada transacción esté libre de colas.
El producto
¡Bienvenido a una nueva experiencia cinematográfica como nunca antes! Puede obtener una vista previa de películas, comprar boletos, concesiones y mercadería, y alquilar este teatro retro. Nuestro sitio/aplicación está diseñado para personalizar todo, desde el lugar donde se estaciona hasta los subtítulos y las descripciones de los subtítulos, todo desde el dispositivo seleccionado.
Responsabilidades
Desarrollo de personas, historias de usuarios y mapas de viaje de usuarios.
Realización de estudios de usabilidad.
Creación de wireframes y prototipos.
Probar e iterar diseños
Diseño de Mockups
prototipo de alta fidelidad
Implementando la accesibilidad
Comprender al usuario
Investigación de usuarios: puntos débiles
.png){kind=small}
Navegación
Los usuarios no pudieron encontrar información sobre las películas que querían ver.
.png){kind=small}
Interacción
Los cinéfilos se sienten apurados cuando intentan comprar algo en el cine.
Experiencia
Las colas excesivas a menudo irritan a los cinéfilos; abandonan la compra de entradas o snacks en la cafetería.
Persona: Tony Ajana
Planteamiento del problema:
Tony es un ávido cinéfilo al que le encanta llevar a sus hijos al cine, pero la molestia de comprar boletos y bocadillos en el cine se vuelve abrumadora. Necesita una forma de hacer sus compras en línea porque quiere disfrutar de la película.
Mapa de viaje del usuario
Creé este mapa de viaje para ayudarme a identificar cualquier brecha entre la personalidad del usuario y el modelo mental del usuario. Además, el mapa de viaje me ayudó a visualizar el objetivo final general del usuario y cómo necesitaban lograr su objetivo.
Comenzando el diseño
mapa del sitio
Los usuarios tenían considerables complicaciones de navegación, lo que lo convertía en su principal punto débil. Decidí usar este conocimiento y creé un sitemap.
Mi objetivo era tomar decisiones estratégicas de arquitectura de la información para mejorar la navegación general del sitio web. Opté por una estructura de navegación que facilitara las cosas a los usuarios y tuviera la flexibilidad de expandirla en el futuro.
Flujo de usuario
Antes de comenzar, trazo un mapa del flujo de usuarios y lo uso como guía cuando empiezo a crear las páginas. Encuentro esto extremadamente útil cuando trabajo solo y en proyectos que tienen un tiempo de respuesta rápido. Además, el flujo de usuario me proporciona un método para realizar un seguimiento de los diseños completados, pendientes y lo que se considera fuera del alcance mientras estoy diseñando.
Estructuras metálicas de papel
Después de completar un análisis competitivo y teniendo en cuenta lo que necesitan los usuarios y las partes interesadas, comencé a esbozar variaciones de cada pantalla en mi aplicación.
Inicialmente, pensé que tener el pago en la página de inicio era la solución ideal.
Estructura metálica de papel
Variaciones de tamaño de pantalla
Diseñar un sitio totalmente receptivo es esencial para mí. Quiero asegurarme de que todos los usuarios y sus dispositivos sean compatibles. Empecé a trabajar en los wireframes de papel de diferentes tamaños de pantalla para asegurarme de que cada usuario tuviera acceso al sitio.
Estructuras alámbricas digitales
Tener los wireframes en papel como guía para crear los wireframes digitales ayudó a acelerar el proceso y fue más comprensible lo que necesitaban los usuarios. Mientras creaba los wireframes digitales, noté algunos problemas de interacción que pude abordar de inmediato.
.png)
Prototipo de baja fidelidad
Después de recibir comentarios de mis compañeros de equipo, creé un prototipo de baja fidelidad con el enfoque fundamental de comprar un boleto de cine.
Visita: Prototipo de baja fidelidad de Showboat Drive-in Theater
Estudio de Usabilidad: Parámetros
Tipo de estudio
Estudio de usabilidad moderado
Participantes
5 participantes
Ubicación
Estudio de usabilidad moderado
Longitud
20-30 minutos
Estudio de Usabilidad: Hallazgos
Estos fueron los principales hallazgos del estudio de usabilidad:
.png)
Compra de bocadillos
La mayoría de los usuarios tuvieron problemas para agregar otros artículos de concesión
.png)
Concepto
Varios usuarios no entendían el proceso y eran tímidos para comprar y atender.
Fecha
Los usuarios no pudieron declarar en qué fecha deseaban asistir a la película.
Redefiniendo el diseño
maquetas
Antes del estudio de usabilidad
Después del estudio de usabilidad
maquetas
Después de recibir comentarios sobre el perfil VIP/miembro, decidí adoptar un enfoque más social y agregar insignias de gamificación para recompensar a los usuarios.
Antes del estudio de usabilidad
Después del estudio de usabilidad
maquetas
Después de la prueba de usabilidad, los resultados revelaron que los usuarios quieren tener la posibilidad de obtener una vista previa de las próximas películas, no solo de la función de esta semana. Como resultado, eliminé la vista previa grande en la página de inicio y agregué varias vistas previas de tráiler más pequeñas, lo que permitió que el cine mostrara más de dos películas por semana.
Antes del estudio de usabilidad
Después del estudio de usabilidad
.png)
Prototipo de alta fidelidad
Mi objetivo era reducir la cantidad de tiempo que los usuarios pasaban en las colas y su confusión y aumentar la venta de entradas; basado en la retroalimentación; Cumplí este objetivo. Además, fue divertido aprender un nuevo programa y todos los activadores.
Ver el Showboat Drive-in Theater
Consideraciones de accesibilidad
Quiero asegurarme de que el sitio sea legible para personas con problemas de visión y daltónicos. Logré esto proporcionando que el sitio cumpliera con WGA AA con una proporción de 4.5.1 entre los enlaces, el texto del cuerpo y el contraste de fondo.
Quería utilizar un diseño de página jerárquico para mantener las cosas organizadas y ayudar a los lectores de pantalla a saber qué hacer a continuación.
Diseñé el sitio cambiando el tamaño del texto y el espaciado del texto, lo que ayuda al usuario con la pérdida de visión y otros problemas de accesibilidad.
Yendo hacia adelante
comida para llevar
Impacto
"¡Sobresaliente!"
"Me encanta el nuevo sitio; es increíble y está bien hecho".
El usuario encontró un nuevo "flujo de usuario cohesivo absoluto establecido con señales de navegación claras". El sitio en general logró el modelo mental y los objetivos del usuario. Los usuarios podían comprar boletos, mercadería, concesiones e incluso recibir espacios de estacionamiento en línea.
Que aprendí
Lo más valioso para mí es llevar un diario a lo largo de la experiencia de objetivos, citas, pensamientos e ideas a medida que se reúne cada entregable.
Próximos pasos
Realice pruebas de usabilidad de seguimiento en el sitio web y realice los cambios de la siguiente manera.
Comience a diseñar el circuito cerrado y las aplicaciones de subtítulos para personas con discapacidades.
Mi próximo paso sería trabajar en los submenús, obtener una maqueta e idear nuevas características.