Resumen del proyecto

Resumen del proyecto

2023

Mejoras en interfaz de cobros para "Mis compras" Jumbo y Santa Isabel.

Resumen

Con el objetivo de mejorar la satisfacción del cliente, brindar información clara y mantener la consistencia con otros puntos de contacto durante el proceso de compra y postventa, surge la necesidad de optimizar la interfaz y la información de cobros en la sección “Mis Compras” para los pedidos de supermercados Jumbo y Santa Isabel. A través de un enfoque colaborativo y centrado en el usuario, implementamos mejoras que incrementaron el entendimiento de los cobros, fomentaron la autogestión y contribuyeron a que “Mis Compras” obtuviera una calificación de 86 puntos en la escala SUS y que el CSTA aumentara en promedio un 14% tras su implementación.

¿Qué hice?

Diseño de interfaz

Prototipado

QA

Handoff

Validar con negocio

Pruebas con usuarios

Plataforma

Web responsive

IOS

Android

Roles involucrados

Detalles del proyecto

Detalles del proyecto

Detalles del proyecto

Antecedentes

Entender necesidades de los clientes.

Como equipo de UX, compuesto por un Product Designer, un Researcher, un UX Writer y un UI Designer, llevamos a cabo una serie de entrevistas y pruebas no moderadas con clientes para conocer los dolores de los clientes en torno a la sección de facturación. Nuestro objetivo principal fue analizar mapas de calor, medir la usabilidad y recopilar las respuestas de los usuarios para validar hipótesis y detectar oportunidades de mejora en la experiencia.


Insights Clave Obtenidos:


Confusión sobre el segundo cobro: Aunque los clientes son conscientes de que existe un primer y segundo cobro, no comprenden claramente el motivo del segundo cargo, lo que genera incertidumbre y desconfianza.


Preferencia por mensajes breves pero informativos: Los usuarios prefieren recibir mensajes concisos que, sin embargo, no omitan detalles importantes sobre los montos pagados y los procesos de cobro.


Expectativas de interacción con imágenes: Detectamos un patrón de interacción donde los clientes esperan obtener más detalles al hacer clic o tap en las imágenes de los productos en su pedido, buscando información adicional o específica.


Inconsistencias entre plataformas: La información de cobros en “Mis Compras” se muestra de manera diferente a la boleta física, lo que causa confusión al comparar los montos pagados por cada producto.


Estos insights nos permitieron identificar áreas críticas de mejora en la interfaz y en la presentación de la información. Al comprender las necesidades y expectativas de los usuarios, pudimos enfocar nuestros esfuerzos en diseñar soluciones que aborden estas problemáticas, mejorando la claridad, la consistencia y la usabilidad de la sección de facturación.

Representación de mapa de calor obtenido del testeo. Un 87% de los clientes hicieron clic dentro de la zona de facturación, mientras que un 75% interactuó con el link "Revisar pedido" y las imágenes de los productos.

Representación de mapa de calor obtenido del testeo. Un 87% de los clientes hicieron clic dentro de la zona de facturación, mientras que un 75% interactuó con el link "Revisar pedido" y las imágenes de los productos.

Representación de mapa de calor obtenido del testeo. Un 87% de los clientes hicieron clic dentro de la zona de facturación, mientras que un 75% interactuó con el link "Revisar pedido" y las imágenes de los productos.

Objetivos

Experiencia consistente y clara.

Transparentar los cobros: Mejorar la presentación de los cargos para que los clientes comprendan claramente cada transacción realizada en sus compras. Esto busca construir confianza y reducir la confusión relacionada con los pagos.


Fomentar la autogestión: Proporcionar a los clientes herramientas e información que les permitan gestionar sus consultas y necesidades de manera autónoma, disminuyendo la dependencia del soporte al cliente y mejorando su experiencia general.


Mejorar la satisfacción del cliente: Al abordar directamente los puntos de dolor identificados, como la confusión sobre los cobros y la inconsistencia de la información, buscamos aumentar la satisfacción y lealtad de los clientes hacia las marcas Jumbo y Santa Isabel.


Homologar contenidos de facturación: Unificar y estandarizar la información relacionada con la facturación en todos los puntos del journey digital del cliente, tanto en la etapa de venta como en la postventa. Esto evita fricciones e incoherencias que puedan surgir por discrepancias en la información presentada en diferentes plataformas o canales.


Incrementar el entendimiento de los cobros: Asegurar que los clientes comprendan el motivo y el detalle de cada cobro, especialmente en situaciones donde existen múltiples cargos, como el primer y segundo cobro identificados en los insights. Esto reduce la incertidumbre y mejora la transparencia del proceso.


Validar las propuestas con el negocio: Colaborar estrechamente con Stakeholders de negocio para alinear las soluciones diseñadas con los objetivos comerciales y operativos de la empresa. Esto garantiza que las mejoras implementadas sean viables y aporten valor tanto a los usuarios como al negocio.


Al enfocarnos en estos objetivos, el proyecto busca no solo mejorar la experiencia de usuario a través de una interfaz más intuitiva y consistente, sino también fortalecer la relación entre los clientes y las marcas al ofrecer una comunicación más clara y efectiva en cada interacción.

Homologación entre la estructura de la boleta física y el nuevo drawer de cobros con los elementos clave para clarificar la forma en la que realiza el cobro de los productos y el total del pedido.

Homologación entre la estructura de la boleta física y el nuevo drawer de cobros con los elementos clave para clarificar la forma en la que realiza el cobro de los productos y el total del pedido.

Homologación entre la estructura de la boleta física y el nuevo drawer de cobros con los elementos clave para clarificar la forma en la que realiza el cobro de los productos y el total del pedido.

Comparativa entre la versión incial del detalle de cobros y la nueva versión. Entre las mejoras destacadas a nivel de interfaz se encuentran: Etiquetas de estado para identificar los productos no disponibles, sustitutos y no enviados, tabs para filtrar los productos, Cambio de color en el valor subtotal para mejorar la accesibilidad y sumatoria en la zona inferior para clarificar el monto pagado por el pedido.

Comparativa entre la versión incial del detalle de cobros y la nueva versión. Entre las mejoras destacadas a nivel de interfaz se encuentran: Etiquetas de estado para identificar los productos no disponibles, sustitutos y no enviados, tabs para filtrar los productos, Cambio de color en el valor subtotal para mejorar la accesibilidad y sumatoria en la zona inferior para clarificar el monto pagado por el pedido.

Comparativa entre la versión incial del detalle de cobros y la nueva versión. Entre las mejoras destacadas a nivel de interfaz se encuentran: Etiquetas de estado para identificar los productos no disponibles, sustitutos y no enviados, tabs para filtrar los productos, Cambio de color en el valor subtotal para mejorar la accesibilidad y sumatoria en la zona inferior para clarificar el monto pagado por el pedido.

Desafíos

Solución Transversal.

Uno de los mayores desafíos en el desarrollo de la interfaz fue crear una solución que funcionara como un proyecto white label, es decir, diseñar un layout y componentes capaces de adaptarse a diferentes negocios. En este caso, la solución debía ser aplicable a dos marcas distintas de supermercados, cada una con sus propios tipos de clientes, lineamientos visuales y sistemas de diseño.


Para superar este reto, fue esencial colaborar estrechamente con los diseñadores UI de cada negocio, validando la homologación de los componentes respecto a sus sistemas de diseño y la interfaz en general. El objetivo era asegurar que la solución cumpliera con los requisitos de transversalidad, manteniendo al mismo tiempo la coherencia con el resto del sitio web y las aplicaciones móviles.


Este proceso implicó armonizar diferencias visuales y funcionales entre las marcas, garantizando una experiencia de usuario consistente sin sacrificar la identidad única de cada supermercado. Mi rol fue clave para asegurar la adaptabilidad y escalabilidad del diseño, demostrando habilidades en gestión de proyectos, Componetización, comunicación efectiva y diseño centrado en el usuario.

Resultados

Aumento de las interacciones y satisfacción.

Según los datos de Analytics, más del 60% de las interacciones web de los clientes en la sección “Mis Compras” corresponden a la visualización del módulo de facturación y del drawer de detalle de cobros, lo que se traduce en un promedio de más de 50,000 interacciones mensuales.


La implementación de nuestra solución contribuyó significativamente a mejorar la experiencia del usuario en esta sección. Como resultado, “Mis Compras” obtuvo una calificación de 86 puntos en la escala SUS (System Usability Scale), lo que indica un alto nivel de usabilidad y satisfacción por parte de los usuarios. Además, el CSTA (Customer Satisfaction Transactional Analysis) aumentó en promedio un 14% tras su puesta en producción.


Estos resultados evidencian que las mejoras realizadas no solo incrementaron la satisfacción del cliente, sino que también mejoraron la comprensión y transparencia de la información de cobros. Al facilitar la autogestión y reducir la confusión, logramos reforzar la confianza de los clientes la postventa. El incremento en las interacciones con el módulo de facturación demuestra que los usuarios encuentran valor en la información presentada y se sienten más seguros al realizar sus compras en Jumbo y Santa Isabel.

Video con demostración del flujo interactivo.

Video con demostración del flujo interactivo.

Video con demostración del flujo interactivo.

Vista de drawer en la versión desktop.

Vista de drawer en la versión desktop.

Vista de drawer en la versión desktop.