top of page
000_FINAL BANNER_Mesa de trabajo 1.png

ROL

Diseñadora UX/UI (proyecto individual)

DURACIÓN

Agosto, 2022 - Enero 2023

HERRAMIENTAS

Figma, Illustrator, Photoshop

RESUMEN

Ready, Snack, Action! es una aplicación móvil que permite a los usuarios pedir sus snacks antes de ir al cine. Esta aplicación ofrece opciones de combos de snacks según la película que vayan a ver; además, funciona con un sistema de recogida para aquellas personas que llegan justo a tiempo para ver una película, eliminando largas filas y tiempo de decisión antes de disfrutar de una película. El nombre surge como juego de palabras de la frase popular en cine (Ready...Set...Action!)

PROBLEMA

A las personas les falta tiempo antes de ver una película en el cine y no quieren tener que elegir su comida con prisa cuando llegan.

OBJETIVOS

Los objetivos son eliminar un paso decisivo para las personas que no quieren decidir, aconsejar a las personas que desean elevar la experiencia de ver películas con un snack y eliminar las largas filas con un punto de recogida al llegar al cine.

1
Investigación

perfil2-03.png

USUARIO PRIMARIO

Gavin es un estudiante y barista de medio tiempo que quiere diversificar su elección de snacks para una película pero siempre llega justo a tiempo al cine y termina eligiendo el mismo combo.

perfil1-03.png

USUARIO SECUNDARIO

Susie es una madre con un horario semanal completo que no quiere tener que pensar en qué snacks comprar en el cine para poder relajarse y disfrutar de tiempo con su familia.

Realicé entrevistas y creé mapas de empatía para comprender a los usuarios para los que estoy diseñando y sus necesidades. Un grupo de usuarios primarios identificado a través de la investigación son adultos que trabajan y no cuentan con mucho tiempo entre finalizar de trabajar e ir al cine.

Este grupo de usuarios confirmó las suposiciones iniciales sobre los clientes de las salas de cine, pero la investigación también reveló que el tiempo no era el único factor que limitaba a los usuarios: la mayoría están a cargo de tomar decisiones durante el día en sus trabajos, lo que los lleva tener fatiga de decisión, elegir cualquier snack en la prisa y a menudo se apegan a la misma combinación, aunque tienen deseos de diversificar su elección.

Los principales pain points que tiene en cuenta la app son:

TIEMPO

Los usuarios no tienen mucho tiempo entre llegar al cine y ver una película.

DECISIÓN

Los usuarios quieren diversificarse en las opciones de snacks pero no saben qué elegir o no quieren elegir.

LARGAS FILAS

Al llegar al cine, hay una larga fila para comprar un snack.

2
Proceso de diseño

ARQUITECTURA DE LA INFORMACIÓN

A partir de la investigación de las necesidades de los usuarios y contando con el aporte de los usuarios a través de un card sorting, llego a la siguiente arquitectura de información para la aplicación.

arquitectura de info_Mesa de trabajo 1 copia.png

USER FLOW

Construí un user flow de cómo se ve un viaje básico de principio a fin al comprar un snack combo. Esto ayuda a comprender las formas en que los usuarios pueden interactuar con el producto, visualizando la navegación a través de sus objetivos.

user flow-1.png
IMG_20230611_135032605.jpg

WIREFRAMES EN PAPEL

El proceso de bocetado funcionó para determinar qué pantallas y factores se deben tener en cuenta al realizar los wireframes digitales. La prioridad es crear un camino simple y concreto que el usuario siga cuando usa la aplicación.

WIREFRAMES DIGITALES

El objetivo de los wireframes digitales era probar una primera versión de la aplicación. La navegación sencilla era el componente principal que los usuarios necesitaban ver en el diseño.

Esta sección proporciona opciones de snack combos basado en la película que vaya a ver el usuario.

La barra de navegación abajo de la pantalla permite a los usuarios moverse a través de las pantallas de la aplicación.

home wireframe-04.png
movie wireframe-04.png

Al elegir la película que van a mirar, los usuarios marcan el horario al que asisten y, en base a esto, los snacks quedan para recoger a tiempo para la película.

PROTOTIPO DE BAJA FIDELIDAD

Prototipo baja fidelidad.png

Aquí se encuentra el prototipo de baja fidelidad.

TEST DE USABILIDAD

Realicé dos rondas de estudios de usabilidad. Los hallazgos del primer estudio ayudaron a guiar los diseños desde los wireframes hasta las mockups; el segundo estudio fue a través de un prototipo de alta fidelidad y reveló qué aspectos de los mockups necesitaban refinarse.

RONDA #1

1. Los usuarios quieren personalizar sus pedidos de snacks y la hora de recogida.

2. Los usuarios estaban confundidos acerca de la función de algunas secciones.

3. Los usuarios quieren que su información de métodos de pago ya esté en la aplicación.

RONDA #2

1. Los usuarios no encontraron útil el botón de perfil en la barra superior.

2. A los usuarios les gustaría tener sus preferencias de comida incluidas en la aplicación para filtrar la comida que les muestra.

3
Diseño final

MOCKUPS

pantallas mock up-low y high-05.png
Captura de pantalla 2023-04-26 113626.png

HOMEPAGE

Durante el test de usabilidad, varios usuarios expresaron confusión respecto a la sección de películas, particularmente se preguntaban si en la app se pueden comprar tickets de cine; a partir de esto, implemento un texto descriptivo debajo de cada título para aclarar qué se puede hacer en cada sección de la aplicación.

Asimismo, todos los usuarios expresaron que un sidebar/hamburger menu les resulta más conveniente para encontrar todas las secciones disponibles en formato de lista en lugar de íconos divididos entre barras.

Antes de test de usabilidad.

Después de test de usabilidad.

SELECCIÓN DE SNACKS

En cuanto al momento de agregar snacks al carrito, antes del test, los combos se encontraban pre-hechos y los usuarios solo debían elegir el que quisieran, sin embargo, expresaron su necesidad de poder personalizar los elementos del combo que eligieron (por ejemplo, el tamaño de bebida y pop). De este modo, al implementarlo después del test, se evita experimentar frustración en caso de no encontrar un combo que se adapte a sus necesidades.

Grabación 2023-04-26 113805.gif

Secuencia después de test de usabilidad.

Grabación 2023-04-26 114424.gif

CARRITO

Esta sección fue la principal más pain points en el test de usabilidad.

  • en primer lugar, fue expresado que sería más cómodo tener datos de métodos de pago guardados en la misma app para no tener que llenarlos cada vez que se realiza una compra

  • en segundo lugar, varios usuarios mencionaron en la segunda ronda de test que preferían un menú desplegable para elegir la hora de recoger los snacks en lugar a escribirlo manualmente.

  • por último, agregué una varias pantallas con la información general del pedido a medida que avanza con el proceso de pago, para prevenir errores del usuario y visibilizar el estatus del sistema.

Secuencia despues de test de usabilidad.

USUARIO

Antes del test de usabilidad, el perfil incluía información para contactar a la persona (nombre, email, teléfono), pero los usuarios mencionaron una oportunidad de incluir información relevante para la experiencia de comprar snacks. Por ejemplo, marcar preferencias alimenticias para filtrar los combos y snacks que les muestra la app, y una sección de métodos de pago para almacenar información al respecto al y agilizar el proceso de checkout.

Captura de pantalla 2023-02-01 204635.png
Captura de pantalla 2023-04-26 144500.png

Antes de test de usabilidad.

Después de test de usabilidad.

GUIA DE ESTILO

La combinación de colores característica de Ready... Snack... Action! surgió a partir de una paleta retro inspirada en una sala de cine, contemplando colores como el rojo, blanco y amarillos/beiges para aludir al elemento característicos del lugar: el pop. Si bien se trata de una paleta muteada, la idea es poder contemplar los distintos diseños de pósters de película sin generar un alto conflicto visual.

N_guia de estilo.png

PROTOTIPO DE ALTA FIDELIDAD

La solicitud a seguir en la aplicación es realizar la compra de un combo clásico para mirar Little Women.

CONSIDERACIONES DE ACCESIBILIDAD

1

Acceso proporcionado a los usuarios con discapacidad física (específicamente, visual) mediante la adición de texto alternativo a las imágenes para los lectores de pantalla.

2

Iconos usados ​​para ayudar a hacer navegación más fácil, así como una barra lateral para encontrar cualquier página que deseen encontrar.

3

Usé una iconografía mínima para ayudar a todos los usuarios a tener un mejor entendimiento del diseño.

4
Conclusiones

IMPACTO

Espero que este diseño tenga un impacto positivo en el mundo real, mejorando la experiencia de ver películas y haciendo que las personas se diversifiquen más en sus opciones de snacks.

APRENDIZAJE

Mientras diseñaba la aplicación de snacks, aprendí a crear una aplicación desde cero, desde bocetos hasta un prototipo funcional real, siendo mi primera experiencia con Figma. Los estudios de usabilidad influyeron en cada iteración de los diseños de la aplicación, teniendo en cuenta también comentarios de compañeros del curso.

A FUTURO...

Un siguiente paso sería realizar otra ronda de test de usabilidad para validar si los pain points experimentados por los usuarios se han abordado de manera efectiva; asimismo, se debe averigüar si el diseño es viable en términos de programación y los cambios correspondientes.

bottom of page