App para buscar restaurantes, pedir tu comida y pagar la cuenta, todo desde tu dispositivo móvil.
Easy Food.
Introducción.
Easy Food es una aplicación móvil que permite a los comensales de cualquier restaurante pedir y pagar su comida directamente desde su dispositivo móvil. Este proyecto estaba divido en la parte B2C (ver, pedir y pagar) y la parte B2B (configurar, recibir y gestionar pedidos)
Rol
Head of design
Fecha
1 de Abril, 2019
Categoría
Diseño de Producto
TAGS
Emprendimiento
Propuesta de valor.
Investigación.
Estudio de campo
En esta primera fase de la investigación es donde empatizo con el usuario que frecuenta restaurantes (en este caso, Madrid centro) y comienzo a entender su comportamiento y qué necesidades tiene a la hora de ver la carta, pedir y pagar.
En este estudio de campo utilizo una muestra de 10 usuarios y me centro en dos métodos para recopilar la información: la observación directa y las entrevistas cualitativas.
La observación directa la hago en su entorno natural, es decir, restaurantes de carta y/o menú.
El output que obtengo de esta fase es la
Persona
que usaría mi producto y su
Journey Map.
Benchmark
Esta es una etapa muy importante en los proyectos porque nos muestra cómo están haciendo el trabajo actualmente los demás.
El resultado de un buen benchmark no es copiar a la competencia, sino analizar a fondo cada detalle, aprender y finalmente diseñar una solución aún mejor.
En la etapa de benchmark me gusta aprovechar para crear tablas comparativas analizando algunas heurísticas de usabilidad. Este sería un ejemplo de dos funcionalidades importantes.
| Ordenar listas | Eliminar un producto | |
|---|---|---|
|
Just Eat |
2 clicks | 0 pantallas ✅
|
3 clicks | 2 pantallas❌ |
|
Glovo |
3 clicks | 1 modal ✅ |
1 click | 0 pantallas ✅ |
|
Deliveroo |
4 clicks | 2 pantallas ❌ |
4 clicks | 1 pantalla❌ |
|
Uber Eats |
3 clicks | 0 pantallas ✅ |
4 clicks | 2 pantallas ❌ |
Pruebas de usabilidad
Para las pruebas de usabilidad recluto a 5 usuarios, siguiendo la buena práctica de probar con 5 usuarios de cada segmento que se haya definido en el estudio de campo y las entrevistas.
El plan de la prueba de usabilidad consta de 10 tareas, objetivos, localización, caso de negocio, etc.
Finalmente con los datos obtenidos en las pruebas, y unidos a las Personas, desarrollo varios User Scenarios.
Decisiones de diseño.
Ordenando los restaurantes
"Me ha costado encontrar la forma de ordenarlos, y ahora... No recuerdo qué orden he puesto."
Pablo R. (Tester de Deliveroo)
Durante mi análisis de la competencia encuentro que la funcionalidad de ordenar los restaurantes supone demasiado trabajo e intuición por parte del usuario. Además, varios comentarios durante las pruebas de usuario validan esta hipótesis.
Por lo que mi decisión de diseño se basa en minimizar la fricción cognitiva del usuario mostrando la información necesaria y optimizando heurísticas.
Filtrando restaurantes
En mi investigación me encuentro con filtros que no aceptan selección múltiple, que abren pantallas innecesarias, que requieren más taps de los debidos y que no son lo suficientemente visuales. Al igual que en la funcionalidad de ordenar, veo necesario disminuir la fricción cognitiva añadiendo la funcionalidad de filtrado rápido y optimizando heurísticas.
Eligiendo lo que comer
El proceso de llenar el carrito es sin duda el que más frustración supone a los usuarios en las pruebas de usabilidad, llegando incluso a desistir cerrando la App (probando Uber Eats).
Esto es debido a las tareas de editar productos y navegar entre categorías.
Estas dos tareas deben ser sencillas e intuitivas, ya que de lo contrario son bloqueantes para la realización del pedido.
Slide para confirmar
En esta App hay acciones delicadas que requieren más seguridad que la que puede aportar un botón de confirmación, ya que puede ser tocado sin querer.
Por ello opto por implementar un Slide Right para confirmar dichas acciones.
En el siguiente ejemplo se muestran las pantallas de realizar el pedido y pagar la cuenta.
Arquitectura de la información
En Easy Food la pantalla de aterrizaje es la lista de restaurantes cercanos, ya que es desde donde parten las demás funcionalidades.
Desde aquí el usuario tiene acceso a todas las opciones del menú lateral, ver todos los restaurantes filtrados por tipos y ver sus cartas para pedir comida y finalmente pagar la cuenta.
Sistema de diseño.
Colores
En este proyecto, tras un estudio de posibles colores, terminé eligiendo el azul como color primario, mientras que el fondo de la App es en blanco. En este caso decidí gestionar los colores como Material Design, por lo que también está la tonalidad oscura del azul.
Componentes
Este es un punto crucial para ahorrar futuro trabajo y ganar consistencia a lo largo de todo el producto. Toda la interfaz está estudiada siguiendo las leyes de la psicología de Gestalt para asegurar una correcta percepción visual por parte de los usuarios.
Tipografía
Para conseguir una armonía visual en cuanto a formas, elegí una tipografía de palo seco redondeada. En este caso usando tres variantes: Light, Regular y Bold.
Gráficos
Todos los gráficos, tanto ilustraciones como iconos de color, llevan un diseño plano para aportar limpieza a la interfaz. Los iconos de color son usados en zonas donde se requiere más información visual que la aportada por un icono blanco/negro. Los iconos de línea son usados en zonas como el menú lateral, las pestañas inferiores, el menú superior, etc.
Animaciones
Las animaciones siguen el mismo patrón visual que los gráficos, y son usadas en ciertos puntos de la App donde se requiere algo de dinamismo. Las ilustraciones están creadas en Adobe Illustrator y el proceso de animación en Adobe After Effects.
*Algunas de ellas son un rediseño mío de animaciones usadas en UberEats
Interfaz completa.
© 2024 No hay derechos reservados.
De hecho, comparte, roba (like a pro) y obtén la inspiración que quieras.
¡Vivimos en un mundo libre!
Mención de honor en
