SnackPik

Objetivos

• Expandir mi portfolio de UX: Para mejorar mi catálogo de proyectos y mostrar mi versatilidad como diseñador UX/UI y desarrollador.
• Aprender nuevas herramientas: Para adquirir competencia en el uso de Figma y herramientas de diseño UX relacionadas.
• Aplicación en el mundo real: Crear una solución práctica para un problema real al que se enfrentan los asistentes al cine, con el objetivo de reducir sus inconvenientes y mejorar su experiencia general.
• Diseño centrado en el usuario: Para comprender las necesidades y frustraciones del usuario, desarrollando así una aplicación que aborde estos problemas de manera efectiva.

Empatía

Comencé el proceso poniéndome en la piel de mis usuarios para comprender sus necesidades, problemas y motivaciones.

User Personas

Eliza Howell: Una trabajadora remota de 37 años y madre de dos. Visita el cine los fines de semana con su familia y batalla con la logística de comprar dulces en el cine sin perderse ni un minuto de película.

Daniel Mills: Un estudiante de 23 años con un trabajo a tiempo parcial. Él y sus amigos disfrutan viendo películas de acción y, a menudo, les resulta difícil coordinar y comprar dulces debido a restricciones dietéticas y limitaciones presupuestarias.

Definir

Enfoque del problema

Basándome en los hallazgos de la fase de empatía, generé soluciones para diseñar un wireframe testeable. Estas son algunas de las técnicas que utilicé:

• Declaraciones de problemas: Una descripción clara y concisa del problema central que enfrentan los usuarios.
• Declaraciones de hipótesis: Averiguar la causa del problema y cómo una solución potencial podría abordarlo.
• Auditoría competitiva: Un análisis de cómo los competidores directos e indirectos están abordando problemas de usuario similares.
• Declaración de objetivos : Establecer un objetivo claro y medible que la solución UX tiene el objetivo de cumplir.

Flujo de usuario

El flujo de usuario para SnackPik está diseñado para ser intuitivo y directo, minimizando los pasos necesarios para pedir y recoger bocadillos.

Storyboard

Para describir y explorar mejor la experiencia del usuario con la aplicación, creé dos storyboards. El primero se centró en lo que el usuario necesita, su contexto y por qué la aplicación será útil.

El segundo se centra en cómo funcionaría la aplicación.

Ideación

Brainstorm

Dibujé varias opciones rápidas para organizar la información en las pantallas principales de la aplicación para tener en cuenta la mayor cantidad posible de opciones distintas.

Wireframes

Transformé los bocetos de las mejores ideas obtenidas durante la lluvia de ideas en wireframes, que utilicé para crear un prototipo MVP, permitiendo iniciar el proceso de prueba lo antes posible.

Prototipos

Mockups de media fidelidad

Después de testear y recopilar ideas y pain points, hice una versión más visualmente precisa del prototipo centrándome en aspectos de diseño muy básicos, como agregar toda la información que faltaban en los wireframes, agregar imágenes y color para crear una jerarquía visual coherente y aplicar cambios en el comportamiento de la aplicación para corregir los pain points detectados durante las pruebas.

Validación

Prueba de usabilidad

Cinco usuarios participaron en las pruebas de usabilidad del prototipo, llevando a cabo tareas como crear un perfil, establecer un cine favorito, agregar y eliminar elementos del carrito y completar el proceso de pago. La retroalimentación indicó que:

• El icono del carrito no se encuentra fácilmente.
• Los usuarios no estaban seguros de si los artículos se agregaron con éxito al carrito.
• El proceso de creación de cuentas debe ser opcional inicialmente.

Diagrama de afinidad

Con la información recopilada durante la prueba, construí un diagrama de afinidad para encontrar otros temas comunes y pain points en los que trabajar para mejorar la experiencia de la aplicación.

Iteración

Las conclusiones de las pruebas de usuario guiaron la última fase de desarrollo.

Sistema de diseño y escalabilidad

Una vez que todos los elementos necesarios estuvieron presentes en el diseño, hice una versión final teniendo en cuenta las pautas propias de un sistema de diseño y considerando su escalabilidad.

Paleta de colores: Los colores primarios son naranja y azul oscuro, elegidos por su contraste y capacidad para llamar la atención sobre acciones y componentes clave. El naranja transmite optimismo y positividad, mientras que el azul oscuro aporta profesionalidad y credibilidad.

Tipografía: Las fuentes outfit e Inter fueron seleccionados por su legibilidad y diseño geométrico. Outfit se usa para titulares, mientras que Inter se usa para un texto más pequeño, asegurando la claridad en los diferentes tamaños de pantalla.

Accesibilidad: Las relaciones de contraste de color y los tamaños de fuente fueron elegidos para que la aplicación sea accesible para los usuarios con impedimentos visuales.

Mockups de alta fidelidad

Navegación simplificada: El menú principal es el centro de la app, lo que permite a los usuarios navegar fácilmente y filtrar los dulces que quieren. Las acciones clave como agregar elementos al carrito y ver la información de alérgenos se muestran prominentemente.

Diseño responsivo: La aplicación está diseñada con Auto Layout en Figma, lo que la hace adaptable a varios tamaños de pantalla garantizando una experiencia de usuario consistente en diferentes dispositivos.

Significadores: Mensajes emergentes y señales visuales confirman acciones como agregar elementos al carrito, asegurando que los usuarios siempre sean conscientes de sus selecciones y el estado del pedido.

Conclusión

Trabajar en SnackPik ha sido una experiencia de aprendizaje invaluable. No solo ha mejorado mis habilidades en el diseño UX/UI, sino que también proporcionó información práctica sobre el diseño centrado en el usuario. El proyecto muestra mi capacidad para crear soluciones que aborden los problemas del mundo real, asegurando una mejor experiencia para los usuarios.