Challenge Diseñador UX/UI
AyHungry
CHALLENGE
Instrucciones para la prueba de diseñador UX/UI de AyHungry:
La tarea consiste en diseñar una experiencia de usuario en nuestra plataforma B2C, solo pensando en una experiencia mobile. Por favor, sigue los siguientes pasos para completar la prueba:
● Diseño de la carta del menú: Diseña una experiencia de navegación por la carta del menú que sea fácil de usar y amigable. Considera la organización y categorización de los platos, así como la presentación de la información (por ejemplo, descripciones, imágenes, precios, opciones vegetarianas o sin alérgenos). Piensa en cómo los usuarios pueden encontrar rápidamente lo que desean comer y cómo puedes mejorar la experiencia de selección de platos.
● Documentación del proceso: A medida que avances en el diseño, documenta tus decisiones y explica cómo abordaste los problemas y las necesidades de los usuarios en cada etapa. Esto nos ayudará a entender tu enfoque y habilidades en diseño UX/UI.
● Entrega: Presenta tus diseños en un formato adecuado, como imágenes, archivos PDF, enlaces a prototipos interactivos o presentaciones. Asegúrate de que tus entregables muestren claramente el flujo de usuario y las interacciones en cada paso del proceso.
Por favor, completa esta prueba en un plazo de no más de 5 días.
MI ROL
Diseñar la interfaz para la funcionalidad de Menú de un Restaurante
EL EQUIPO
Solo yo.
LÍNEA DE TIEMPO
MAY 2023 - MAY 2023
EMPATIZAR
USER RESEARCH - AUDITORIA COMPETITIVA
Une vez leí los requerimientos de la tarea pude definir claramente los objetivos de la misma y comenzar a idear como crear esta solución. Como la tarea indica crear un Menú pero no especifica para que tipo de restaurante decidí investigar un poco más sobre AyHungry.
AyHungry pretende ser una plataforma digital que te ayude a descubrir los mejores restaurantes de la ciudad y a disfrutar de los sabores más deliciosos. Así que a partir de esa premisa creé una experiencia de búsqueda de restaurantes, y dentro de ella, una experiencia de navegación por la carta de un Restaurante de Pizzas, ya que el ejercicio no especifica un tipo de menú o restaurante en particular.
Lo primero que hice fue identificar los puntos claves a considerar en la creación de este Menú que son:
- Descripciones
- Imágenes
- Precios
- Opciones vegetarianas o sin alérgenos
A continuación procedí a realizar una auditoria competitiva de las principales plataformas de restaurantes para entender como es la organización de sus menús y comprender la lógica detrás de ello.
Como en este caso realizaré un menú para un Restaurante de Pizza, audité solo Menús de Restaurantes de Pizza, acá les dejo un benchmark de esta auditoria:
DEFINIR E IDEAR
USER RESEARCH - OBJETIVOS - USER FLOW - WIREFRAMES LO-FI
Ya teniendo más claro como son normalmente las experiencias en un menú de restaurantes (de pizza para este ejercicio) procedí a describir el user flow sobre el cual comenzaría a diseñar esta experiencia:
Ya teniendo más claro como son normalmente las experiencias en un menú de restaurantes (de pizza para este ejercicio) procedí a describir el user flow sobre el cual comenzaría a diseñar una esta experiencia.
Si bien el ejercicio no contempla crear pantallas de acceso a una app, lo agregué para tener un flujo más completo en un caso hipotético de el uso de una app mobile. En resumen el flujo es el siguiente:
- Ingresar a la app.
- a) Seleccionar por categoría o restaurante.
- b) Realizar búsqueda y luego seleccionar opciones de tus resultados de búsqueda.
- Una vez seleccionado el restaurante podrás ver su carta o menú.
Es importante mencionar que el diseño visual a continuación no muestra la estructura completa de un menú de un restaurante de pizzas, sino simplemente como se veria este. Sin embargo describo a continuación una posible estructura completa para un menú de pizzería:
Sección de «Especialidades de la casa»: en esta sección, se presentan las pizzas más populares y exclusivas de la pizzería, que suelen llevar los nombres propios de la casa o de los creadores de la pizza.
Sección de «Clásicas»: aquí se presentan las pizzas más conocidas y populares, como la Margarita, Napolitana, Pepperoni, entre otras.
Sección de «Vegetarianas»: aquí se presentan las pizzas con ingredientes vegetarianos, como champiñones, pimientos, cebollas, tomates, alcachofas, etc.
Sección de «Especiales»: en esta sección se presentan las pizzas con ingredientes especiales o inusuales, como la pizza con frutos del mar, la pizza de jamón serrano, la pizza con rúcula, entre otras.
Sección de «Crear su propia pizza»: aquí los clientes pueden elegir entre una variedad de ingredientes para crear su propia pizza personalizada.
Además, un menú de pizzería también puede incluir otras secciones, como las entradas (por ejemplo, pan de ajo, ensaladas, aperitivos), bebidas (cervezas, vinos, refrescos, etc.), postres (típicamente tiramisú, helados, flanes) y otros platos típicos de la cocina italiana (pastas, calzones, entre otros). Cada sección suele estar acompañada de una breve descripción de los platos y de su precio correspondiente.
En el siguiente paso generé los prototipos LO-FI para tener una visión mas clara de como distribuir los elementos de manera ordenada y amigable en la pantalla.
PROTOTIPO
USER INTERFACE - PROTOTYPE HI-FI
Con todas las ideas y objetivos claros basados en la investigación realizada, procedí a crear una propuesta de diseño de la interfaz. Aquí aplique los principios de diseño más importantes como lo son:
1) La claridad y simplicidad, ya que debe ser fácil de usar y entender, intuitiva.
2) La consistencia en el diseño, es importante que todos los elementos puedan identificarse y relacionarse fácilmente, para ello el uso correcto de colores, fuentes tipográficas, iconos y demás elementos gráficos es fundamental. Esto permite que los usuarios sientan confianza al usar la interfaz.
3) Retroalimentación, cada acción que el usuario realiza genera una respuesta que permite al usuario comprender mejor como avanza el proceso y los pasos a seguir.
4) Estética y diseño visual, creando un diseño atractivo y agradable a la vista, utilizando el concepto de marca como base.
5) Accesibilidad, un requerimiento es que se pueda verificar fácilmente si el restaurante ofrece opciones veganas y sin alérgenos, y que estas sean claramente visibles en el menú, es permite que los usuarios puedan tener conocimiento de ello con anticipación.
También en este sentido apliqué la metodología «Atomic Design» para mantener un orden, estructura y además ir creando un sistema de diseño escalable que permita una mejor comprensión de quienes se sumen al proyecto mas adelante. Y este fue el resultado:
Para finalizar agregué las interacciones correspondientes como lo son los desplegables y hover al desplazar entre las opciones, y las transiciones de una pantalla a otra.
Así mismo, este diseño se puede probar con usuarios para recolectar información y aplicar mejoras, es claro que hay muchas mejoras que se pueden aplicar, entre ellas la accesibilidad.
En los siguientes enlaces pueden tener acceso al documento de figma para visualizar y al prototipo para tener una interacción básica.
POR QUE FUE IMPORTANTE ESTE PROYECTO
✅ El desafío de diseñar una interfaz que sea fácil de navegar y comprender para una variedad de usuarios, incluyendo aquellos que pueden no estar familiarizados con la tecnología.
🍕 La satisfacción de saber que este trabajo puede mejorar la experiencia de los clientes y facilitar el proceso de selección de platos en un restaurante, lo que podría contribuir a una experiencia gastronómica más placentera.
📚 Realizar este challenge no solo puede abrirme las puertas a una nueva oportunidad laboral, sino que también me permite poner en practica mis habilidades en el Diseño UX-UI al mejorar la eficiencia del servicio y la satisfacción del cliente, lo que podría resultar en una mayor rentabilidad y éxito para el restaurante.
🙌 Como diseñador UX-UI, agradezco sinceramente la oportunidad de participar en este challenge. Estoy entusiasmado por la posibilidad de aplicar mis habilidades y conocimientos para resolver los desafíos que se presenten en este y otros proyectos.
