Info del proyecto
Equipo
2 UX/UI Designers
2 Developers: 1 Front, 1 Back
1 Product Manager
Duración
2 meses
Reto
La PDP es sin duda, una de las páginas en Freshly que más tráfico recibe y llevaba sin optimizarse unos 4 años. La performance era bastante buena, pero teníamos insights recopilados del equipo de Customer Love y de screen recordings que queríamos mejorar.
Discovery
Una vez recopilados y analizados todos los insights, nos centramos en los más significativbos:
Los usarios no encuentran la información clave del producto a primera vista
Los usuarios a menudo se sentían abrumados por la cantidad de contenido. Esto les llevaba a hacer un scroll excesivo y dificultaba encontrar la información clave que necesitaban para tomar decisiones de compra con confianza.
Información educacional y clave sobre los productos
Los usuarios valoran un enfoque educativo que les ayude a maximizar los beneficios de los productos y sus rutinas. Esto incluye, por ejemplo, vídeos sobre cómo usar los productos o el orden correcto de la rutina de cuidado de la piel.
Los test clínicos de los productos son muy valorados por los usarios
Los usarios quieren ver y entender los resultados clínicos de los productos para validar su efectividad
Delivery · Design Solution
Tras analizar los insights que otuvimos en la fase de discovery esta es la propuesta de diseño que trabajamos
Scroll excesivo y sobrecarga de información
· Añadímos tags con la información mas relevante del producto antes de la descripción. Facilitándole al usuario está información de manera simple y clara.
· Las imágenes del carrusel las hicímos Full-width y eliminamos las minituras del carrusel para reducir carga cognitiva.
· En línea con conseguir reducir la carga cognitiva, creamos un componente nuevo donde le damos la oportunidad al usuario de leer la info que quiera de la descripción del producto. Le mostramos la primera parte y el resto está recogido, y el puede decidir si leer mas o no.
Información educacional y clave sobre los productos
· Añadimos un nueva sección a los acordeones con el orden de rutina, para que los usuarios sepan en que paso de la rutina deben aplicarse ese producto. Esto ayuda también a ver como son las rutinas y si tienen todos los productos para completarlas, ayudando al cross-selling.
· Añadimos también un acordeon con el listado de INCI y con los ingredientes que no utiliza Freshly, para reforzar la transparencia y filosofía de la marca.
· Optimizamos el acordeón "Como puedo usarlo", aquí antes se mostraba un único vídeo en 1:1 de la modelo aplicándose el producto y había que darle al play para reproducirlo. La estrategia que trabajamos junto con el equipo de branding, fue poder añadir más de un vídeo, en formato 9:16 y que se autoreproducen, de diferentes perfiles UGC para poder acercarnos más a los diferentes targets que compran el producto.
Los test clínicos de los productos son muy valorados por los usarios
· Añadimos una nueva sección, con un componente de cards para destacar los resultados clínicos de cada producto, justo debajo de la descripción del producto.
· Utilizamos elementos visuales simples junto con textos breves, para comunicar la efectividad de los productos de una manera fácil de escanear y entender.
Datos y resultados
Implementamos la nueva PDP de forma gradual. Primero la probamos en los 5 hero products y se la mostramos únicamente al 20% de los usuarios que visitaban esas PDPs. Fuimos monitorizando las métricas de cerca y aumentando progresivamente el porcentaje de usuarios que veían el nuevo diseño. Cuando los resultados se mantuvieron consistentemente sólidos, escalamos el despliegue al 100%, ya que las métricas fueron muy significativas desde el principio.
↑2% Add to Cart
En las primeras 3 semanas después de lanzar el nuevo diseño. Un indicador de que los usuarios hacen compras con más confianza.
↑3.95% Average Order Value
Los usuarios exploraron más productos complementarios y se sintieron más seguros con la propuesta de valor general.
↑150% time on page
Observamos una clara reducción en las tasa de rebote, lo que indica mayor interés por los productos.
Info del proyecto
Equipo
2 UX/UI Designers
1 Frontend Developer
1 Product Manager
Duración
4 months
Reto
Freshly tiene un programa de fidelización (Freshly Club), donde los usuarios ganan puntos a través de compras y con esos puntos pueden conseguir descuentos, regalos o experiencias. Desde que se lanzó en 2021 (con una agencia externa) el proyecto no sé había vuelto a tocar. Decidimos realizar un research para indentificar oportunidades de mejora.
Discovery
Realizamos 10 entrevistas con usuarios, tanto recurrentes como nuevos. Cómo Freshly tiene tiendas físicas con bastante afluencia de clientes, fuimos a las tiendas de Reus y Tarragona a realizar entrevistas de usabilidad con los usuarios en las propias tiendas. Estos son los insights más significativos:
Los usuarios tienen dificultades para encontrar la información
Les pedimos que buscasen información sobre el programa y les costaba encontrarla en primera instancia. interaction.
La diferencia entre Drops y Coins no es clara
Los Drops y Coins son el sistema de puntos que tiene el programa. Los usuarios no saben que diferencia hay entre ellos y cómo pueden utilizarlos o beneficiarse de ellos.
No encuentran los beneficios del programa fácilmente
Los usuarios no podían encontrar de manera fácil que cupones tenían disponibles en su área de Club, tampoco sabía como podían aplicarlos en sus compras, ni tampoco que otros beneficios exclusivos tienen por ser del Club.
Delivery · Design Solution
· Redujimos el tamaño de la sección del nivel actual para minimizar el scroll y simplificar la experiencia de navegación, ya que durante los tests nos dimos cuenta de que los usuarios no interactuaban demasiado con esta sección.
· Asignamos colores diferentes a Drops y Coins para que fueran más fáciles de diferenciar. Además, para clarificar aún más la diferencia entre Drops y Coins, añadimos un pop-up que aparece al hacer clic en el icono de información ubicado en la tarjeta.
Con el nuevo diseño, la información más importante para los usuarios siempre se encuentra above the fold.
· Agrupamos todos los beneficios (descuentos, regalos y experiencias) en una misma sección, con cards. Ya que en el anterior diseño estaban en diferentes secciones pero a nivel visual las cards eran iguales y vimos en los test que no entendían si eran cosas diferentes o iguales.
· Añadimos también imágenes de los productos que tenían de regalo para ayudar a los usuarios a identificalos. También incluí CTAs claros en las tarjetas, facilitando que los usuarios comprendieran qué acciones podían realizar con sus beneficios.
· En las cards de los cupones en el CTA añadimos la funcionalida de copy to clipboard para que se les añadise el cupón en el portapapeles y lo pudesen pegar en el carrito. En el anterior diseño el botón les llevaba al carrito sin darles más información.
· Rediseñamos la tabla de beneficios después de que los tests con usuarios revelaran que el texto era demasiado pequeño y difícil de leer, y que el diseño no estaba claro. Para mejorar la legibilidad y la claridad, agrandamos la tabla y habilitamos el desplazamiento horizontal, permitiendo a los usuarios navegar por ella de manera más cómoda.
· Rediseñamos la página de área de cliente ya que tal y como estaba cuando te logueabas te llevaba directamente al Freshly Club sin darte nada de contexto. Además el menú del area de cliente se canibalizaba con el propio menú de la web que te lleva a las diferentes categorías.
· En el rediseño priorizamos el último pedido que el usario había realizado, la página de pedidos y después el Freshly Club.
· Por último, añadimos un onboarding en el Club. Ya que en los test muchos usuarios recurrentes nos dijeron que nisiquiera recordaban porque se habían unido al programa. Y los nuevos, cuando llegaban no sabían muy bien qué podían hacer en el area del Club.
· Este Pop-Up a modo de onboarding se muestra a clientes nuevos cada vez que se unen y a los clientes recurrentes, si llevaban mas de 3 meses sin entrar al area del Club, esa vez que entran.
· ·La sección que explica cómo funciona el Club generaba confusión con la sección de beneficios debido a su diseño similar. Además, contenía demasiada información y los usuarios rara vez se tomaban el tiempo de leerla. Para mejorar esto, rediseñmos la sección usando acordeones, reduciendo el scroll y permitiendo que los usuarios eligieran qué información querían ver.
Datos y resultados
100% de los usuarios
Con cupones o regalos en su área de cliente, los usuarios los añadieron a su carrito, en comparación con solo 4 de cada 10 usuarios en el diseño anterior.
7 de 10 usarios
Utilizaron el pop-up de información en la tarjeta de Drops y Coins, lo que indica que lo encontraron útil.
44.8% de los usuarios
Calificaron la mejora con un 10 sobre 10, en una prueba cuantitativa que realizamos en la web utilizando Hotjar.