UX Sprint Falabella home
¿Cómo mejorar la experiencia del simulador hipotecario según lo aprendido en pruebas con usuarios reales?
Objetivo
Falabella.com es uno de los marketplaces más importantes de Latinoamérica. Este UX Sprint se centra en resolver dos desafíos clave de experiencia de usuario.
La siguiente presentación se enfoca en la resolución de 2 desafíos que buscan como objetivo la evaluación de la usabilidad de la sección “en tienda” de la app de Falabella.com junto con generar una propuesta de diseño del home en ambiente web tanto para la experiencia desktop como móvil. Tomando esto en cuenta y haciéndome cargo del desafío, comenzamos.
Actualmente la aplicación de Falabella.com ofrece un botón para que los clientes puedan realizar las operaciones, que son propias de realizar en tienda, en un apartado digital dentro de la app. Estas secciones son: Ticket de cambio, Retiro en tienda, Mis cupones, Precios, tallas y Experiencia en tienda.
El término “en tienda” se ha utilizado para ubicar al usuario, dentro de las acciones realizables, cuando este se encuentra físicamente dentro de una tienda.
Hipótesis:
Dentro del entorno de una aplicación, en el contexto de un marketplace, el concepto “en tienda” suele utilizarse como una traducción del concepto inglés “store” o en español “tienda” lo que podría llevar a ciertos segmentos de usuarios (los más digitalizados) a hacer Tap en esta sección pensando que van encontrar productos que están en la tienda, sin embargo, la plataforma despliega operaciones propias del acto de estar físicamente en una tienda relacionadas al servicio al cliente lo que generaría un problema conceptual. Tampoco específica en cual de las 4 tiendas se encuentra, si es Falabella, Tottus o Sodimac.
Acciones:
Realización de cardsorting a usuarios representativos con las distintas secciones para recabar evidencia suficiente que aporte a la construcción de un nombre más apropiado o el eventual cambio de lugar de la sección.
Evaluar activar sección “en tienda” solo por geolocalización de usuario, cuando el dispositivo detecte que se encuentra en una tienda.
Hipótesis:
Al ingresar a la sección en tienda se despliegan 6 botones, en lista vertical que utilizan todo el alto del viewport, incluso dejando botones fuera del primer vistazo. Esto podría generar:
Invisibilización del último elemento de la lista
Desaprovechamiento del espacio
Perdida de la oportunidad de conectar realmente con el usuario tienda en una verdadera experiencia “en tienda aumentada”
Acciones:
Primero realizaría una prueba rápida, un test de los 5 segundos para identificar la pregnancia de los elementos de diseño de la sección.
Test de usabilidad.
Benchmark de aplicaciones relacionadas al concepto marketplace con foco en “utilidades”
Hipótesis:
La etiqueta “nuevo” de cada elemento contradice su objetivo al ser utilizada en serie. El efecto Von Restorff, también conocido como el efecto de aislamiento, indica que cuando hay varios objetos similares presentes, es más probable que se recuerde el que difiere del resto. Aplicado al caso de la app falabella, en un primer vistazo tenemos 3 etiquetas “nuevo” dejando solo 2 botones sin etiquetas, lo que hipotéticamente destacaría los botones, sin la etiqueta nuevo, ya que estos se distinguirían al no seguir el patrón.
Acciones:
Test de 5 segundos para poner a prueba la efectividad de las pills “nuevos”
Hipótesis:
El botón información de tienda está limitado solo a Falabella, cuando la app está enfocada a 3 líneas de negocio con tiendas físicas: Falabella, Tottus, Sodimac lo que sugiere una limitación a la obtención de la información que el usuario requiere respecto de las tiendas de Sodimac o Tottus
Acciones:
Test de usabilidad
Hipótesis:
El botón retiro en tienda, seguido por la frase de apoyo “Obtén más rápido tu número de atención al llegar a la tienda” sugiere que obtendremos una atención más rápida al utilizar esta función. Lamentablemente, como hay que estar en una tienda para utilizarla, no puedo ver el resto del flujo en acción. Pero lo que si es observable, es el que al estar cerca de la tienda, muestra un mensaje que indica “No estás cerca de ninguna tienda Falabella para poder pedir un número”, esta pantalla se podría mejorar desde 2 aspectos:
Un onboarding al proceso de velocidad en la atención y como esta función apoya al proceso de atención rápida.
Pre alertar un número, antes de estar en la tienda para que este se active al llegar a la tienda, pudiendo utilizar la función antes de llegar a la tienda para así reducir ansiedad en el usuario.
Acciones:
Test de usabilidad
Antes de comenzar este ejercicio, realicé un breve benchmark visual a competencias, pero quise salir del continente a ver que es lo que se está realizando afuera en Norte América, Europa y Asia para identificar patrones o tendencias que pudieran ser de utilidad para este ejercicio.
Cuando se combinan secciones armables y categorías visuales simplificadas, se obtiene un sistema de diseño flexible y intuitivo. Las secciones armables permiten reorganizar el contenido de manera rápida y sencilla, mientras que las categorías visuales simplificadas facilitan la identificación y la comprensión de la información presentada. Esto proporciona una experiencia de usuario más eficiente y agradable, al tiempo que mejora la estructura y la organización del diseño.
Cuando se combinan los colores sólidos pasteles con la simplificación de las gráficas, se logra una estética suave y minimalista que favorece la legibilidad y la atención al contenido principal. Esta combinación puede generar interfaces visuales agradables, relajantes y fáciles de usar, proporcionando una experiencia de usuario intuitiva y atractiva.
Uso del blanco para destacar: aprovechar las cualidades luminosas y neutras de este color para resaltar elementos importantes, crear contraste y generar una sensación de claridad y amplitud.
En base al rápido benchmark visual realizado puedo concluir que una de al combinar secciones armables y categorías visuales simplificadas, se logra un sistema de diseño flexible e intuitivo que permite reorganizar el contenido de manera rápida y sencilla. Esto mejora la experiencia de usuario al tiempo que mejora la estructura y organización del diseño.
Además, al combinar colores sólidos pasteles con gráficas simplificadas, se crea una estética suave y minimalista que favorece la legibilidad y la atención al contenido principal, generando interfaces visuales agradables y fáciles de usar. El uso del blanco como color destacado aprovecha sus cualidades luminosas y neutras, resaltando elementos importantes y creando una sensación de claridad y amplitud.
En esta propuesta, decidí dividir el slider en dos partes, reduciendo el número de slides a solo dos. Esto se debe a que los estudios demuestran que los usuarios tienden a hacer scroll en los primeros segundos de navegación en un sitio web. Al hacerlo, los productos que se encuentran a partir del tercer puesto en adelante en un slider corren el riesgo de pasar desapercibidos, lo que podría afectar negativamente sus ventas. Al dividir el slider, aseguramos que los productos más relevantes y destacados estén visibles desde el inicio, mejorando su exposición y aumentando las posibilidades de captar la atención de los usuarios.
Con el objetivo de facilitar la navegación y recordar el comportamiento al usuario, he creado una nueva sección de categorías rápidas que se asemeja a la función de “Stories” de Instagram, ampliamente utilizada y reconocida por los usuarios. Al incorporar esta estructura familiar, se busca aprovechar la familiaridad y el patrón de uso establecido por los usuarios en la plataforma de Instagram.
La disposición de los elementos fue creada con una visión centrada en un gran producto ancla visual que actúa como punto focal y guía para el diseño. Este elemento ancla no solo proporciona un punto de referencia visual sólido, sino que también brinda soporte y acompaña a los 4 elementos base que representan una categoría o tema específico.
La elección de una distribución sencilla y fácil de recordar tiene como objetivo facilitar la comprensión y la navegación intuitiva para los usuarios. Al mantener una estructura clara y coherente, se fomenta una experiencia de usuario fluida y agradable.
Al reducir el número de elementos en el slider, nos aseguramos de que los productos más importantes y relevantes estén visibles y tengan mayor exposición. Esto mejora la oportunidad de captar la atención de los usuarios y aumenta las posibilidades de que realicen una compra. Al mantener el slider conciso y enfocado, evitamos la sobrecarga de información y facilitamos la toma de decisiones por parte de los usuarios.
Este enfoque de repetir la disposición de los elementos con un cambio de efecto espejo en relación con la sección anterior tiene el propósito de mantener el ritmo visual del diseño sin comprometer la claridad de la navegación. Al utilizar esta técnica, se logra un equilibrio entre la coherencia visual y la facilidad de comprensión para los usuarios.
Al repetir la estructura de diseño, los elementos familiares generan un sentido de familiaridad y continuidad a lo largo de la página o del sitio web. Esto ayuda a que los usuarios se sientan cómodos y puedan anticipar dónde encontrar la información que están buscando. Al mismo tiempo, el cambio de efecto espejo crea una variación visual que evita que el diseño se vuelva monótono o predecible.
Soy un profesional creativo apasionado por las ideas únicas, ayudando a empresas a crear identidades increíbles a través de diseños UI/UX de alta calidad.