Info del proyecto
Team
2 UX/UI Designers
2 Developers: 1 Front, 1 Back
1 Product Manager
Duration
2 months
Reto
The PDP is probablly one of the pages on Freshly that receives the most traffic and had not been optimized for about 4 years. The performance was quite good, but we had insights gathered from the Customer Love team and recordings that we wanted to improve.
Discovery
After analyzing qualitative insights and session recordings, we identified the key pain points and prioritized improvements that would help users make confident purchase decisions.
Users do not find the key product information at first sight
Users often felt overwhelmed by the amount of content. This led them to scroll excessively and made it difficult to find the key information they needed to make purchase decisions with confidence.
Educational and key information about products
Users appreciate an educational approach that helps them maximize the benefits of products and their routines. This includes, for example, videos on how to use the products or the correct order of the skincare routine.
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
Based on the insights gathered during the discovery phase, this is the design proposal we worked on
Excessive scrolling and information overload
· We added tags with the most relevant product information before the description, making it simple and clear for the user to access this information.
· We made the carousel images full-width and removed the thumbnails from the carousel to reduce cognitive load.
In line with reducing cognitive load, we created a new component that gives the user the opportunity to read whatever information they want about the product description. We show them the first part, and the rest is collected, allowing them to decide whether to read more or not.
Educational and key information about products
· We added a new section to the accordions with the routine order, so users know which step of the routine they should apply that product. This also helps to see what the routines are like and if they have all the products to complete them, aiding in 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.