Case study: Food delivery app
Optimización de la experiencia de pedido móvil
Sector
- FoodTech
- E-commerce
Mi rol
- Product Designer Lead
- UX Researcher
- UX Designer
- UI Designer
Herramientas
- Sketch
- InVision
- Photoshop
- Illustrator
Entregables
- Discovery & Research
- Arquitectura (AI) y user flows
- Wireframes baja y alta fidelidad
- Diseño UI
El reto
Facilitar la decisión de compra y reducir el abandono.
El problema principal detectado en este tipo de servicios es la saturación de opciones y la
complejidad en la navegación, lo que genera fricción en el momento de la compra. El objetivo de
este proyecto fue diseñar una estructura de información eficiente que permitiera al usuario
encontrar lo que busca rápidamente y completar el pedido con el mínimo esfuerzo cognitivo y
operativo, evitando la pérdida de usuarios en el proceso de checkout.
La solución
Diseñé una aplicación centrada en la conversión y la usabilidad. La propuesta equilibra el descubrimiento visual (mediante tarjetas grandes y fotografía de producto) con una navegación funcional basada en filtros rápidos y categorías claras. Se optimizó el flujo de cierre de compra (checkout) haciéndolo lineal y transparente. Finalmente, completé el ciclo de servicio integrando el seguimiento en tiempo real sobre mapa, ofreciendo al usuario visibilidad total del estado de su pedido desde la confirmación hasta la entrega física en su domicilio.
El proceso
1. Toma de requerimientos y análisis
Antes de diseñar, realicé un benchmark de competidores directos para detectar patrones de usuario y áreas de mejora (pain points). Definí las User Personas para centrar las funcionalidades en necesidades reales: rapidez, variedad y seguridad en el pago.
2. Arquitectura de información y user flow
Estructuré el mapa del sitio priorizando el "Happy Path" (el camino ideal de compra). Definí la arquitectura global del sistema para garantizar una navegación intuitiva y escalable. Estructuré el contenido en módulos claros permitiendo al usuario acceder a cualquier funcionalidad crítica (como "Mis direcciones" o "Métodos de pago") en un máximo de tres toques.
3. Wireframes
Comencé conceptualizando la estructura global del proyecto y diseñando las pantallas principales en baja fidelidad (Low-Fi) para iterar rápido y validar la navegación. Una vez definidos los flujos clave, diseñé todas las pantallas en alta fidelidad (Hi-Fi), detallando cada interacción y asegurando la coherencia visual antes de pasar al diseño final.
4. Definición de identidad visual
Establecí las bases visuales del proyecto seleccionando los estilos que definirían la personalidad de la interfaz.
- Color: Definí la paleta de colores principales y secundarios. Elegí el Rosa Coral (#FF4081) como color primario por su psicología asociada a la energía y la acción, usándolo para destacar los elementos de interacción (CTAs) y otros elementos importantes de la interfaz. Lo complementé con escala de grises y blancos para mantener la limpieza visual.
- Tipografía: Opté por una familia Sans-Serif moderna y geométrica, priorizando una alta legibilidad y versatilidad tanto en titulares grandes como en textos legales de menor tamaño.
5. Diseño UI
Finalmente, apliqué la capa visual creando un UI Kit atómico (botones, inputs, tarjetas...). Esto aseguró la consistencia visual en todas las pantallas (Login, listados, detalle, perfil...), garantizando una armonía estética y un lenguaje gráfico unificado en todo el producto.
¿Tienes un proyecto en mente?
Escríbeme y vemos cómo podemos colaborar.