Healvery Supermercado
Introducción
El Producto
Healvery facilita las elecciones de comestibles para usuarios con conocimientos limitados sobre nutrición, garantizando simplicidad y selecciones informadas.
Rol: Diseñador de Experiencia de Usuario (UX/UI)
Duración: 12 semanas
Tipo de proyecto: Proyecto de certificado de Google Ux - Diseño de sitio web responsivo
Contribución: Entrevistas & User Journey - Ideación - Prototipo - Sistema de diseño
El Problema
Las tiendas de comestibles a menudo carecen de información nutricional, dejando a los usuarios inciertos sobre las opciones más saludables. Comprar se vuelve abrumador, ya que los usuarios, inseguros sobre qué comprar, enfrentan un desafío para adoptar una dieta más saludable.
El Objetivo
Ofrecer información nutricional y simplificar las compras de comestibles, para que los usuarios puedan tomar decisiones informadas sin esfuerzo.
Proceso
Design Thinking
Investigación
Resumen
Al realizar entrevistas y una auditoría competitiva, creé personas y mapas de empatía, profundizando mi comprensión. Los usuarios con agendas ocupadas buscan compras en línea más rápidas, especialmente cuando tienen dudas sobre que opciones son las más saludables.
Competencia
En esta auditoría competitiva, mi objetivo principal fue llevar a cabo un análisis destinado a identificar a los principales competidores, evaluar el tipo y la calidad de sus productos, comprender sus estrategias de posicionamiento en el mercado, evaluar cómo articulan sus identidades de marca y, en última instancia, descubrir sus fortalezas, brechas y oportunidades dentro del panorama del mercado.
Entrevistas
Las entrevistas revelaron los principales puntos de dolor en los que me enfoqué en mi diseño.
Personas
Para garantizar que los objetivos de la empresa se alineen con las necesidades de nuestros usuarios, creé personas.
Jornada del Usuario
Creé un mapa de la jornada del usuario que proporciona una comprensión más profunda de los puntos de dolor y áreas de mejora.
Ideación
Resumen
En la fase de ideación, estructuré la arquitectura del proyecto con un mapa del sitio, diseñé wireframes para visualización y creé prototipos de baja fidelidad para pruebas. Después de esto, realicé un estudio de usabilidad, que proporcionó ideas para mejorar el diseño.
Mapa del sitio
En línea con mi objetivo de proporcionar una experiencia familiar pero más rápida e intuitiva, estructuré la arquitectura del proyecto con un mapa del sitio.
Wireframes
Iteré a través de diversas posibilidades de diseño, creando wireframes para probar diferentes interacciones de usuario.
En la creación de los wireframes de Healvery, mis objetivos fueron la comodidad del usuario, la rapidez y la intuición.
Mantuve elementos comunes mientras introducía nuevas funciones, como una sección para recetas populares que permite la adición directa de ingredientes al carrito.
Wireframes de Papel
Usé marcas amarillas para resaltar mis elementos favoritos, los cuales luego se fusionaron en el wireframe final.
Wireframes Digitales
En mis wireframes digitales, mi objetivo principal era lograr una navegación sencilla, recetas con la opción de agregar sus ingredientes al carrito y mostrar productos populares y favoritos guardados en la página principal.
Versión móvil
Para la versión móvil, redimensioné numerosos elementos para que se ajusten a la pantalla mientras se conserva la misma lógica.
Prototipos
Prototipo de baja fidelidad
El flujo principal está diseñado para una experiencia directa, rápida y sencilla. Para las categorías, implementé una función para ver/ocultar el carrito, permitiendo a los clientes añadir o quitar artículos sin salir de la página.
Estudio de usabilidad
Estos fueron los hallazgos más importantes del estudio de usabilidad.
Refinando el diseño
Se implementaron cambios basados en el principal punto de dolor identificado en el estudio de usabilidad.
Home
Los participantes tendían a hacer clic en las categorías o en el botón de llamada a la acción principal, a menudo perdiéndose los descuentos por no desplazarse hacia abajo. Ahora, los descuentos están en la parte superior de la página para mayor visibilidad.
Antes del estudio de usabilidad
Después del estudio de usabilidad
Sección de Categorías
Dado los problemas de los usuarios con el botón "ocultar carrito", realicé los siguientes cambios para resolver este problema.
Antes del estudio de usabilidad
Después del estudio de usabilidad
Carrito
Los usuarios frecuentemente pasaban por alto la selección del día, lo que llevó a su integración en el flujo para abordar este problema.
Antes del estudio de usabilidad
Después del estudio de usabilidad
Prototipo de alta fidelidad
El flujo de alta fidelidad mantiene la misma lógica que el de baja fidelidad, con mejoras derivadas de los conocimientos obtenidos durante el estudio de usabilidad.
Además, implementé nuevas características que se planearon al principio del proyecto, como una página de recetas con la opción de explorar alimentos mediante opciones de filtrado específicas. Esto incluye una función que permite a los usuarios agregar todos los ingredientes de una receta específica a su carrito.
Además, agregué algunas mejoras a la experiencia del usuario para garantizar un recorrido sin problemas. Esto incluye la implementación de una función de favoritos para un acceso fácil a los elementos preferidos, una sección de productos populares, una función de repetir pedido y una barra de búsqueda que permite una navegación más rápida de las categorías populares y búsquedas anteriores.
Versión de escritorio
Home
Categorías
Categorías & Carrito
Carrito
Calendario
Recibo de Orden
Repetir Pedido
Repetir Pedido & Carrito
Favoritos
Ofertas
Recetas
Receta Seleccionada
Versión Móvil
Home
Categorías
Carrito
Calendario
Recibo de Orden
Consideraciones de Accesibilidad
