Foody Cat

Sitio web adaptable (Caso de estudio Certificación de Experiencia de Usuario en Google)

Research / Emphaty Map / Wireframe / Mockup / Prototype / Feedback / Responsive Design

Duración del proyecto: Marzo 2023

Rol y tareas: Diseñador UX/UI

Investigación de usuarios
Mapas: usuario, empatía y sitio
Auditoría competitiva
Ejercicios de ideación How Might We y Crazy Eights
Wireframes
Estudios de usabilidad e iteración
Branding, diseño responsivo e iteración
Mockups y Prototypes
Evaluación de usuarios (feedback)

Objetivo: Diseñar un flujo de seguimiento de pedidos para un servicio de entrega de alimento para gatos.

Problema: Crear un producto que permita comprar alimento para gato con entrega donde el usuario pueda dar seguimiento puntual al pedido hasta tener certeza al recibirlo.

Metas

Entender los procesos y las emociones que experimentan las personas en torno a comprar alimento para gato con servicio de entrega.
Identificar los comportamientos y las experiencias frecuentes de los usuarios con las tareas de comprar alimento para gato con servicio de entrega.
Identificar las frustraciones que experimentan las personas durante el proceso de comprar alimento para gato con servicio de entrega.

En Foody Cat asumí la creación de un sitio web adaptable desde el análisis centrado en el usuario hasta la creación del prototipo de alta fidelidad bajo la metodología Design Thinking.

Investigación de usuario

En la investigación tomé como público objetivo a todas las personas que tuvieran un gato y se encargaran de adquirir el alimento.

El reclutamiento de participantes fue mi red personal (familiares, amigos, colegas) y utilicé como método de investigación la Encuesta dado que el tiempo para reunirse con los participantes para una muestra significativa era corto. Obtuve la participación de 11 personas, siendo 6 mujeres y 5 hombres, fluctuando entre edades de 28 a 55 años.

Los resultados de investigación produjeron 4 puntos débiles, cada uno de tipo: financiero, de producto, de proceso y de apoyo.

Pain Points (Desafios o limitaciones)

Mapa de empatía

Persona

Mapa de recorrido

Planteamiento del problema

“Eva es una creadora de contenidos digitales y amante de los gatos que necesita una forma fácil de comprar alimento para sus gatos con entrega y dar seguimiento a su pedido porque quiere tener la certeza sobre cuando estará llegando su pedido a domicilio.”

Antes de comenzar la etapa de ideación, indagué sobre las tendencias de diseño de mis competidores para tomar notas de los aspectos y establecer temas con los resultados.

Auditoría competitiva

Durante esta fase utilicé dos ejercicios de ideación: How Might We (HMW) y Crazy Eights

Crazy Eights

Sitemap

Wireframes

Digital Wireframes

Boceto de flujo del usuario para comprar un artículo del sitio web

Ir a la "Tienda" en la barra de navegación
Elegir un alimento para gatos
Seleccionar el peso
Agregar al carrito
Continuar con la compra
Completar la información de la dirección
Elegir la forma de envío
Ingresar la información de pago y facturación
Hacer clic en "Hacer pedido ahora"
Consultar el status (ruta de entrega)

Wireframes para completar el flujo de usuario

Screens: Homepage > Catálogo > Producto > Selección de presentación > Carrito de compras

Flujo de HomePage hasta continuar compra

Estudio de usabilidad

Script de indicaciones

Pantalla 1: Ingresa al catálogo de productos de alimentos para gato

Pantalla 2: Selecciona uno de los alimentos para gato

Pantalla de seguimiento 2: ¿Qué tan fácil o dificil fue realizar esta acción? ¿Hay algo que te gustaría cambiar en el proceso de ingresar al catálogo de productos y seleccionar uno? ¿Completó el acceso a Tienda y seleccionó uno de los productos?

Pantalla 3: Selecciona la presentación de 500 g del alimento para gatos

Pantalla 4: Agrega al carrito de compras tu producto

Pantalla de seguimiento 4: ¿Cuánto tiempo te llevo completar esta tarea? ¿Hay algo que te gustaría cambiar en el proceso de reserva de horario? ¿Qué tan fácil o dificil fue realizar esta acción? ¿Completó la selección de presentación a agregó el alimento para gatos al carrito de compras? ¿Qué te pareció la experiencia en general?

Ejemplo de aplicación (toma de notas)

Estudio de usabilidad: parámetros

Recomendaciones (findings)

Iteración en el diseño de los wireframes digitales para generar el prototipo de baja fidelidad considerando los conocimientos (insights) del feedback obtenido en el estudio de usabilidad

Acciones de diseño producto de la iteración

Como prioridad y desde los primeros estudios se consideró que el acceso a la función de compra de alimento para gatos fuera intuitiva por lo que a pesar de los buenos resultados en la prueba del prototipo de baja fidelidad se enfatizó el botón de acción para entrar al catálogo de alimentos.

Uno de los puntos débiles en el proceso de investigación fue el dar certeza de entrega a los usuarios sobre su producto, para lo que se incluyó una ruta de proceso de compra y entrega.