Rediseñar el sitio de Second Cup para que los clientes fieles puedan pedir y encontrar sus recompensas sin que los empujen a una app.
4.5/5
Satisfacción, antes 3/5
1 min
Tiempo por tarea, antes ~2
100%
Encontró el programa de lealtad
Métodos
Pruebas de usabilidad · Card sorting · AI · Wireframes · Prototipo de alta fidelidad
- Problema
- El sitio había dejado de servirle a sus clientes más fieles. Las recompensas eran difíciles de encontrar y pedir siempre mandaba a la gente a la app.
- Mi rol
- Investigadora UX y diseñadora UI en un equipo de cuatro, desde las primeras pruebas de usabilidad hasta el prototipo de alta fidelidad.
- Impacto
- En las pruebas, la satisfacción pasó de 3/5 a 4.5/5 y el tiempo por tarea bajó a la mitad. Todos los usuarios encontraron el programa de lealtad.
Un sitio que mandaba a todos a la app
Second Cup es una cadena canadiense de cafés con clientes muy fieles. Pero el sitio había dejado de intentar servirles: cada flujo terminaba en un callejón sin salida o en un aviso para descargar la app.
Tres tareas, probadas en el sitio actual
Probamos el sitio en vivo con usuarios reales en tres tareas: encontrar el programa de lealtad e iniciar sesión, pedir una bebida personalizada para recoger, y encontrar una bebida de temporada y pedirla a domicilio.
Las pruebas mostraron más frustración de la que esperábamos.
Encontrar el programa de lealtad e iniciar sesión
“No veo nada relacionado con el programa de lealtad en la página principal.”
Pedir una bebida personalizada para recoger
“Está bien… solo que son muchos pasos. De alguna forma está en francés. No sé por qué.”
Encontrar una bebida de temporada y pedirla a domicilio
“No te dicen que el producto no está disponible hasta el checkout.”
Lo que escuchábamos una y otra vez: cuatro temas, en cada sesión.
Cuatro cambios a partir de la investigación
Qué cambiamos y por qué.
Llevar Recompensas al menú principal, visible en todas las páginas
Restricción: las recompensas estaban enterradas a 3 clics de profundidad y los usuarios asumían que no existían. Por qué: es una herramienta de retención. Tiene que verse antes de que el usuario decida irse.
Reordenar el flujo: primero la bebida, después la tienda
Restricción: el flujo pedía la tienda antes que la bebida, lo que rompía el modelo mental del usuario. Por qué: la gente piensa "quiero un latte" antes que "quiero la tienda de Bloor St." El nuevo flujo sigue ese orden.
Una sección propia de Temporada con cuenta regresiva, etiquetas de Tiempo limitado y pedido directo
Restricción: las bebidas de temporada eran decorativas: se promocionaban, pero no se podían pedir y estaban enterradas en el menú general. Por qué: los productos por tiempo limitado necesitan urgencia y una forma directa de pedirlos.
Pedidos nativos en la web. La app se promociona, pero nunca es obligatoria
Restricción: cada flujo terminaba con un aviso para descargar la app, así que el sitio no podía recibir un pedido por sí solo. Por qué: quien está en el sitio web debería poder pedir en el sitio web.
Una nueva estructura a partir de card sorting
Usamos card sorting para reconstruir la estructura. Pedir y Recompensas pasaron al menú principal, y Especiales de temporada y Cuenta tuvieron sus propias secciones.
Wireframes probados con usuarios
Hicimos wireframes de las páginas más críticas, corrimos pruebas de pensamiento en voz alta con usuarios e iteramos antes de pasar a alta fidelidad.
La mitad del tiempo por tarea
Probamos el rediseño con usuarios en las mismas tres tareas.
Los usuarios dejaron de adivinar
Fueron directo a lo que necesitaban.
La queja cambió
"No lo encuentro" se volvió "son muchos pasos." Ese es un problema mucho más fácil de resolver.
Oportunidad de conversión
Los usuarios se sintieron un 72% más seguros eligiendo productos de temporada. Ese es el paso justo antes de que algo entre al carrito.
2 minutos → 1 minuto
Menos pasos entre querer una bebida y pedirla.
Seis páginas en alta fidelidad
Seis páginas en alta fidelidad: inicio, bebidas de temporada, recompensas, detalle de bebida, tiendas y pedido.
Siguiente proyecto