CASE STUDY
HAPPY MEAL
App móvil de comida biológica para perros
Ficha técnica del proyecto
-
ROL:UX/UI Designer
-
DURACIÓN:5 meses
-
PLATAFORMA:iOS / Android
-
HERRAMIENTAS:Figma, FigJam
-
PÚBLICO OBJETIVO:Cuidadores de mascotas
El Desafío y Objetivos
EL PROBLEMA
Los cuidadores de perros con necesidades nutricionales específicas se sienten abrumados por la falta de transparencia en los ingredientes de la comida comercial y por procesos de checkout confusos e inaccesibles en otras plataformas.
LA SOLUCIÓN & OBJETIVOS
• Diseñar e implementar un flujo de compra intuitivo y personalizado en 3 pasos.
• Aplicar altos estándares de accesibilidad (contraste AA/AAA, lectura fluida).
• Crear una interfaz limpia basada en un sistema de diseño escalable en Figma.
Proceso de Investigación & Descubrimientos (UX)
Realicé entrevistas y mapas de empatía para entender mejor las necesidades, hábitos y frustraciones de los dueños de mascotas. Los hallazgos principales mostraron que los usuarios disponen de poco tiempo para desplazarse, valoran la comodidad por encima de otros factores, y necesitan una navegación clara y sencilla donde la accesibilidad sea clave para una experiencia satisfactoria.
Persona: Ana
- Edad: 36 años · Profesión: Camarera
- "Necesito ahorrar tiempo comprando comida natural para mi perro, sin tener que desplazarme a tiendas especializadas."
- Objetivos: proporcionar una alimentación saludable a su mascota, ahorrar tiempo, realizar compras de forma rápida y sencilla.
- Frustraciones: no poder seguir su pedido en tiempo real, dificultad para encontrar rápidamente sus productos habituales.
Mapa del flujo
Oportunidades detectadas: Mejorar la búsqueda de productos · Crear una lista de favoritos · Añadir mensajes de confirmación · Mejorar el seguimiento del pedido y las facturas.
Sistema de Diseño, UI y Accesibilidad
Paleta de color
Colores primarios y secundarios pensados para transmitir naturalidad y confianza, manteniendo siempre el contraste necesario para la legibilidad.
Tipografía
Se eligió Inter como tipografía principal por su alta legibilidad en pantalla y su buena adaptabilidad a distintos pesos (Bold, Semibold, Medium), lo que permite crear una jerarquía clara entre cabeceras y texto de cuerpo, reforzando la accesibilidad general de la interfaz.
Pruebas WCAG
Contraste: colores con suficiente contraste para mejorar la lectura. Tipografía: tamaños de texto más visibles y legibles. Interacción: botones táctiles grandes y fáciles de utilizar.
Evolución del Diseño
Wireframe a UI Final
Wireframe
Dibujar múltiples versiones de las pantallas en papel permitió explorar soluciones rápidas antes de pasar al diseño digital, validando ideas y respondiendo a los problemas detectados en la investigación.
Diseño Final
El diseño inicial presentaba una gran cantidad de información y elementos de navegación que dificultaban el recorrido del usuario. A partir de los resultados de las pruebas de usabilidad, se reorganizó la jerarquía visual, se simplificó la navegación y se incorporó una sección de perfil, logrando una experiencia más clara, intuitiva y eficiente.
Decisiones de diseño clave
Carrito siempre visible · navegación simplificada · productos sugeridos enlazados directamente · información organizada de forma más clara.
Prototipo y Validación
Se desarrolló un prototipo interactivo de alta fidelidad en Figma que reproduce el flujo completo de compra, validado mediante dos rondas de test de usabilidad con usuarios reales:
Ronda 1
Textos poco visibles · falta de página de perfil · mejoras necesarias en la navegación.
Ronda 2
Mejorar algunas transiciones · guardar direcciones de envío · mejorar métodos de pago · hacer más visible el carrito.
Conclusión
APRENDIZAJES & PRÓXIMOS PASOS
Diseñar con usuarios reales permitió tomar decisiones más precisas y crear una solución realmente útil: la investigación valida hipótesis, los tests de usabilidad descubren problemas ocultos, y la accesibilidad debe integrarse desde el inicio, no añadirse al final.
En la fase 2 se añadirá un panel de seguimiento de envíos en tiempo real mediante una API externa de mapas y notificaciones push. Como siguientes pasos, también ampliaría la investigación de usuarios y realizaría nuevas pruebas de usabilidad para seguir puliendo la experiencia de compra.
