JOKSAN CRUZ

Leal Colombia · Loyalty · 2022

The home screen that had turned into a Frankenstein.

Después de años sumando funciones, la pantalla inicial de Leal era una mezcla de estilos sin narrativa. La desarmé por completo para descubrir qué debía quedarse.

El Home rediseñado de la app Leal.
The redesigned home screen: one mission, everything else one level down.

My role

Director of Product Design

Team

Producto, data, tecnología y diseño

Scope

Dos iteraciones con test en vivo

Methods

Amplitude, CrazyEgg, Clarity, entrevistas, observación

+25%de tasa de éxito en el flujo de compra del Marketplace después del rediseño.
1misión principal en el Home. Todo lo demás bajó un nivel en la jerarquía.

The problem

El Home de Leal había tenido tantos cambios que se convirtió en un Frankenstein: elementos con estilos variados, sin una narrativa que los uniera. La llegada del Marketplace y de nuevas funcionalidades dejó en evidencia que era momento de repensar la pantalla inicial completa.

  • Interfaz confusaDemasiadas opciones, y las acciones frecuentes no se encontraban fácilmente.
  • Experiencia desconectadaLa tienda física y la compra online estaban revueltas en un scroll infinito, lo que interrumpía el objetivo principal: obtener recompensas.
BEFORE · EVERYTHING AT THE SAME LEVELAFTER · ONE SINGLE MISSIONUse your cashback
Izquierda: siete bloques compitiendo por la misma atención. Derecha: una acción principal protegida y el resto en segundo nivel.

Cómo lo investigamos

Antes de dibujar nada montamos un enfoque centrado en evidencia: pruebas de usabilidad, entrevistas y sesiones de observación, más datos de Amplitude para analizar el funnel y ubicar dónde se generaba fricción. Con CrazyEgg aplicamos un test de atención para saber qué miraban primero las personas.

InterviewsQué esperaban alabrirAmplitudeDónde se caía elfunnelCrazyEggQué se mira primeroTest en vivoCambios contecnología
El orden importa: los datos dicen dónde, las entrevistas dicen por qué, y el test en vivo confirma si el cambio funcionó.
Los usuarios no quieren acumular. Quieren ese "dinero" para conseguir otra oferta, otro producto, ver si alcanza para algo más.

Ese hallazgo cambió el planteamiento. El saldo no era una alcancía, era combustible. El Home tenía que llevar a gastarlo, no a contemplarlo.

What we decided

  • One single missionPriorizamos la tarea principal y relegamos el resto de las funciones a un nivel secundario de la jerarquía.
  • Confianza en los detallesExplicaciones claras sobre comercios aliados, premios y la tecnología detrás del saldo, apoyadas en señales de validación social.
  • Diseño adaptableUn sistema modular que anticipa desarrollos futuros: menús, subtítulos y funciones que todavía no existían.
  • Construcción de hábitoRecompensa inmediata, inversión del usuario en personalizar, y disparadores externos con notificaciones sobre nuevos comercios y premios.

Textos y estructura

Simplificamos la comunicación con verbos directos — usa tu cashback, gana, compra — y eliminamos los términos técnicos que confundían. Después separamos las dos experiencias: compra online con acceso directo al Marketplace, y en tienda con comercios que dan puntos, mapa de ubicaciones cercanas y puntos por vencer, consolidados en un solo scroll simplificado.

Previous Leal app home screen, with mixed styles.
Antes. Estilos mezclados y sin jerarquía clara entre lo que se puede hacer online y en tienda.
Redesigned Leal home screen, online shopping section.
Después. La sección de compra online con acceso directo al Marketplace.
Mapa funcional del Home de Leal.
Mapa funcional. Qué se queda en el primer nivel y qué baja.
User persona del proyecto Leal.
Las cinco personas que guiaron las decisiones, construidas con datos de Amplitude y entrevistas.
Segunda user persona.
Cada una con su motivación para abrir la app y su punto de abandono.
Tercera user persona.
Perfiles de uso frecuente frente a uso esporádico.
Cuarta user persona.
El saldo significa cosas distintas según el perfil.
Primera user persona.
La primera persona: uso frecuente, saldo alto, expectativa de gastarlo ya.
Quinta user persona.
Y la quinta, la que menos entendía el producto y la que más nos enseñó.
SCOPE canvas del proyecto.
SCOPE canvas, para acotar el alcance antes de diseñar.
Esferas de usabilidad.
Esferas de usabilidad: qué dimensión hay que mover primero.
Wireframes del nuevo Home.
Wireframes de la primera iteración.
Segunda tanda de wireframes.
Segunda iteración, después del primer test.
Tercera tanda de wireframes.
Tercera iteración: la jerarquía ya estaba resuelta.
Flujo paso a paso del Home.
El flujo completo, con estados y casos extremos.
Primera alternativa en alta fidelidad.
Alternativa A en alta fidelidad.
Segunda alternativa.
Alternativa B, con el saldo en otro nivel de jerarquía.
Tercera alternativa.
Alternativa C, la que se llevó a test en vivo.
Heatmap de atención generado con CrazyEgg.
Test de atención con CrazyEgg: qué se mira primero y qué se ignora.
Segundo heatmap de atención.
El mismo test después de reordenar la jerarquía.
Tercer heatmap de atención.
Tercera medición: la acción principal ya concentra la mirada.
Sección En tienda del Home rediseñado.
Sección En tienda, consolidada en un scroll simplificado.
Animación de la sección de puntos.
Puntos por vencer y comercios cercanos, en movimiento.
100Before125After+25%de éxito en el flujo de compradel Marketplace
Los valores están normalizados: la barra de la izquierda representa la tasa de éxito antes del rediseño y la derecha después, medida con Amplitude sobre el mismo flujo.

Results

Tras implementar los cambios y correr nuevas pruebas, la tasa de éxito en el flujo de compras del Marketplace aumentó 25%. En las sesiones cualitativas, los usuarios describieron el proceso como más fácil y menos frustrante.

El aprendizaje que me llevé: simplificar no es quitar por quitar. Es identificar la única cosa que el producto tiene que hacer bien, protegerla, y construir el resto alrededor sin estorbarla.

Este rediseño fue una pieza de un encargo más grande. En Leal también trabajé la sección de movimientos, cupones, onboarding y captura de first party data, la sección de descubrimiento con mapa de comercios cercanos, un esquema de retos con insignias y niveles, y un juego de trivia para Texaco.

Ver en App Store Ver en Google Play

New project

Got a product that outgrew itself?

joksanricru@gmail.com

Projects

Tell me the context

Phone

+52 55 2173 0129

Talks and webinars

YouTube

Career

LinkedIn