democrateam
Llevar la plataforma de participación ciudadana CONSUL Democracy a instituciones públicas de todo el mundo.
Caso de estudio democrateam →
E-commerce · CRO · UX Redesign 2011 – 2015
Rediseñar una plataforma de cashback para que convierta de verdad
Lideré el rediseño UX/UI de beruby, uno de los portales de cashback y ahorro online líderes en España, con foco en claridad visual, simplificación de la propuesta de valor y optimización del funnel de registro y activación.
Impacto del rediseño
El resultado, en tres métricas
+34%
Conversión de registroIncremento en la tasa de completitud del funnel de alta.
–28%
Abandono en homepageReducción del bounce rate en la página principal.
+41%
Activación a 7 díasUsuarios que completaron su primera compra con cashback en la primera semana.
Contexto del proyecto
Un negocio real con un problema de diseño muy concreto
72%
Abandono en registroTasa de abandono del funnel de alta antes del rediseño.
8 seg
Para entender qué era berubyTiempo medio de comprensión de la propuesta de valor. El benchmark ideal es menor de 3 segundos.
4 años
Sin rediseño mayorLa interfaz acumulaba deuda visual y de usabilidad de años de crecimiento sin visión cohesiva.
€M
En cashback gestionadoCada punto de mejora en conversión impactaba directamente en el negocio.
El problema
El cashback es una idea simple que se explicaba de forma complicada
beruby tenía un producto genuinamente valioso: compras en tiendas habituales y recuperas un porcentaje. Pero la homepage intentaba explicarlo todo a la vez: categorías, porcentajes variables, proceso de cobro, referidos, puntos extra…
El resultado era una interfaz visualmente saturada, con jerarquía confusa y sin un CTA claro. Los usuarios llegaban, no entendían rápido y se iban. El producto era bueno. El diseño lo estaba saboteando.
«Si un usuario tarda más de 3 segundos en entender por qué debe registrarse, ya hemos perdido la partida. La claridad es la primera conversión.»
El enfoque
Diseño al servicio de la métrica de negocio correcta
El objetivo no era «hacer la web más bonita». Era aumentar la tasa de registro y mejorar la activación de los usuarios en sus primeros 7 días. Cada decisión de diseño debía poder justificarse contra esas métricas.
Esto implicó trabajar en tres frentes en paralelo: claridad del mensaje, simplificación del funnel y consistencia visual mediante un sistema de componentes.
Diagnóstico UX
Lo que encontré al auditar la interfaz existente
Antes de diseñar una sola pantalla nueva, realicé una auditoría heurística completa de la plataforma existente. Estos fueron los hallazgos más críticos.
| Área | Problema detectado | Severidad | Solución aplicada |
|---|---|---|---|
| Homepage hero | Cinco mensajes distintos compitiendo por atención. CTA enterrado bajo el fold. | Alta | Mensaje único + CTA prominente above the fold |
| Funnel de registro | 7 campos en pantalla única. Sin feedback de progreso ni validación inline. | Alta | Wizard de 3 pasos + validación en tiempo real |
| Propuesta de valor | Explicación del cashback en un párrafo de 120 palabras, sin apoyo visual. | Alta | Explicación en 3 pasos visuales, sin texto largo |
| Listado de tiendas | Grid denso sin filtros claros. Porcentajes difíciles de comparar. | Media | Cards rediseñadas con cashback destacado y filtros fijos |
| Dashboard usuario | Saldo de cashback pendiente difícil de localizar. | Media | Widget de saldo siempre visible + timeline de cobros |
| Email marketing | Newsletters sin jerarquía visual ni responsive. | Media | Plantillas responsive con sistema de módulos |
| Responsive | Diseño desktop sin adaptación mobile real. | Baja | Layout responsive completo desde mobile-first |
Proceso de diseño
De la auditoría a la solución en cuatro fases
-
01
Auditoría heurística
Evaluación sistemática contra los 10 principios de Nielsen. Análisis de analítica y heatmaps con Hotjar.
-
02
Tests de usuario
Sesiones con usuarios que no conocían el concepto de cashback para medir el tiempo de comprensión.
-
03
Diseño y prototipado
Wireframes de baja fidelidad, prototipo interactivo en InVision y diseño final en Sketch con librería de componentes.
-
04
A/B testing y validación
Lanzamiento gradual con test A/B en las páginas de mayor impacto e iteración continua sobre datos reales.
Rediseño de homepage
De cinco mensajes compitiendo a uno solo que convierte
La homepage original intentaba comunicar todo a la vez. El resultado era que no comunicaba nada. El rediseño parte de una pregunta simple: ¿qué necesita entender un usuario en los primeros 3 segundos?
«Compras en tus tiendas habituales y recuperas dinero». La propuesta de valor se explica en tres pasos visuales sin una sola línea de texto largo, con el CTA principal above the fold, sin competencia visual.
Funnel de registro
De 7 campos en pantalla a un wizard de 3 pasos con un 34% más de conversión
El formulario original pedía nombre, apellidos, email, contraseña, fecha de nacimiento, código postal y aceptación de condiciones en una sola pantalla. El problema no era pedir demasiado, era pedirlo todo a la vez.
El rediseño divide el proceso en tres pasos con indicador de progreso. Una franja de micro-copy con garantías («sin tarjeta de crédito, es gratis») neutraliza las objeciones antes de que aparezcan.
Dashboard de usuario
El saldo siempre visible. La activación, garantizada
El dashboard original enterraba el saldo de cashback en un rincón de la interfaz. Los usuarios se registraban pero no completaban su primera compra: no sabían cuánto habían ganado ni cuándo lo cobrarían.
El rediseño pone el cashback acumulado como elemento principal del dashboard, con la próxima fecha de cobro siempre visible y el historial desglosado por compra.
Sistema de diseño y marketing
Un lenguaje visual coherente de la UI al email
Antes del rediseño, la web, los emails y los banners de afiliación tenían estilos completamente distintos. Diseñé un sistema de componentes unificado con tokens de color, tipografía y espaciado compartidos entre todos los touchpoints.
Incluí el diseño de newsletters y emails transaccionales, aplicando los mismos principios: una acción por email, cashback visible en el pre-header y un módulo de tiendas en oferta.
«En e-commerce, el mejor diseño es el que no se nota. El usuario solo siente que todo funciona exactamente como esperaba.»
Resultados
Métricas de negocio que respaldan las decisiones de diseño
Todos los cambios se midieron contra KPIs de negocio reales: números concretos de conversión, retención y engagement.
+34%
Conversión de registroMedido en test A/B con tráfico real. El wizard de 3 pasos fue el cambio de mayor impacto.
–28%
Abandono en homepageTras simplificar el hero y colocar el CTA principal above the fold.
+41%
Activación a 7 díasEl dashboard con saldo visible fue el factor clave.
3 seg
Tiempo de comprensiónBajando de 8 segundos, medido con tests de 5 segundos.
+22%
CTR en newslettersTras rediseñar las plantillas con CTA único y cashback visible.
100%
Consistencia visualTodos los touchpoints comparten el mismo sistema de componentes.
Aprendizajes
Lo que aprendí diseñando para conversión real
beruby fue el primer proyecto en el que el diseño se medía directamente en euros. Eso cambia la forma de priorizar, de argumentar y de iterar.
-
01
La claridad siempre gana al ingenio
Los usuarios no leen: escanean. Si no entienden el valor en 3 segundos, se van. El ingenio es para cuando ya han convertido.
-
02
El microcopy es CRO
«Es completamente gratis» debajo del botón de registro aumentó la conversión más que cualquier cambio visual.
-
03
Lo que no se ve afecta lo que convierte
La inconsistencia entre la web y los emails generaba desconfianza inconsciente. La consistencia visual no es estética: es credibilidad.
-
04
Los datos sin contexto engañan
Un A/B test mostró que más texto convertía mejor porque respondía a una objeción concreta. Sin el «por qué», la conclusión habría sido la contraria.
Retrospectiva
¿Qué haría diferente con lo que sé hoy?
Empezar por el email antes que por la web. La mayoría del tráfico recurrente llegaba por email. Rediseñar las newsletters primero habría tenido un impacto más inmediato en retención.
Un onboarding post-registro más estructurado. El periodo crítico de los primeros 3 días no tenía una secuencia de emails de activación diseñada.
Test de 5 segundos antes de cada iteración del hero. Lo implementé al final del proyecto, pero debería haber sido el primer paso en cada ciclo.
Más foco en la experiencia post-primera compra. El LTV del usuario depende de que repita, y el estado vacío del dashboard necesitaba más cuidado.
Otros casos de estudio
Aprendo a programar
Plataforma educativa para que niños de 6 a 12 años aprendan a programar sin ayuda de un adulto.
Caso de estudio Aprendo a programar →