InicioServiciosProyectos PreciosEquipoBlogContacto
KLAR
Case Study Fintech · Product Design 2024

KlarBank

Cliente
KlarBank
Industria
Fintech
Servicios
UX/UI · App
Año
2024
KlarBank App

De app funcional a
experiencia que activa.

KlarBank es una app bancaria para millennials con todas las funcionalidades necesarias. El problema: la tasa de activación era del 34%. El 66% de los usuarios que descargaban la app nunca completaban el onboarding. Los tickets de soporte por confusión en la interfaz eran el principal dolor del equipo de producto.

El objetivo fue claro: transformar un onboarding de 11 pantallas sin jerarquía en una experiencia que lleva al usuario a su primer éxito en el menor tiempo posible.

UX DesignUI DesignProduct DesignDesign SystemOnboarding

Una app que los usuarios
no terminaban de usar.

La app tenía todas las funcionalidades bancarias necesarias, pero la tasa de activación era del 34%. Los usuarios bajaban la app, empezaban el registro y lo abandonaban. El equipo no sabía exactamente dónde ni por qué.

Arquitectura de experiencia
rediseñada desde cero.

Se realizó una auditoría UX completa: heatmaps, grabaciones de sesión, 12 entrevistas a usuarios y análisis paso a paso del funnel de onboarding. El problema no era visual — era arquitectónico.

01
Onboarding en 4 pasos

Rediseñamos el onboarding de 11 a 4 pasos. Cada paso tiene un objetivo único y una sola acción posible. El progreso es visible en todo momento.

02
Dashboard simplificado

El dashboard pasó de 14 elementos a 5 acciones principales. El 80% de los usuarios solo necesita ver saldo, transferir y pagar — todo visible sin scroll.

03
Notificaciones inteligentes

Rediseñamos el sistema de notificaciones: de genéricas y confusas a contextuales, claras y accionables. −72% en llamadas al soporte por notificaciones.

04
Design System completo

El nuevo sistema de design tokens permite al equipo interno mantener consistencia visual sin depender de diseñadores para cada cambio.

05
Jerarquía visual clara

Se reorganizó la estructura para que el usuario identifique rápidamente colecciones, productos destacados y categorías principales.

06
Primer éxito en 3 minutos

Rediseñamos el flujo para que el usuario pueda completar su primera acción de valor (ver saldo real) en menos de 3 minutos desde la descarga.

Impacto

Números que hablan.

−65%
Tickets soporte

Reducción drástica de contactos por confusión en la interfaz

+240%
Tiempo activo

Los usuarios usan la app más frecuentemente y por más tiempo

+190%
Activación

De 34% a más del 90% de usuarios que completan el onboarding

4.8★
Rating en stores

De 3.2 a 4.8 en App Store y Google Play en 3 meses

DiazUX no solo rediseñó la app — entendió el problema de negocio. El drop en soporte fue inmediato y los usuarios por fin le encuentran el valor al producto.

PL
Pablo L.
CPO, KlarBank
Siguiente proyecto
Formen →
Ver todos los proyectos
.mobile-menu a:hover{color:var(--pink)} .mobile-close{position:absolute;top:24px;right:24px;font-size:32px;color:var(--white);cursor:pointer;background:none;border:none;font-family:'Barlow Condensed',sans-serif;font-weight:900} .case-hero{padding:160px 48px 80px;position:relative;overflow:hidden;border-bottom:1px solid rgba(242,170,191,0.08)} .case-hero-bg{position:absolute;top:50%;right:-40px;transform:translateY(-50%);font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(120px,20vw,280px);color:rgba(242,170,191,0.025);text-transform:uppercase;pointer-events:none;white-space:nowrap;user-select:none} .breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px} .breadcrumb a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);text-decoration:none;transition:color .2s} .breadcrumb a:hover{color:var(--pink)} .breadcrumb span{color:var(--gray-2);font-size:12px} .case-tag-row{display:flex;gap:8px;margin-bottom:20px} .case-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);background:var(--pink-dim);border:1px solid rgba(242,170,191,0.2);padding:4px 10px} .case-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(60px,8vw,120px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:40px;position:relative;z-index:2} .case-title em{font-style:italic;color:var(--pink)} .case-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(242,170,191,0.06);max-width:640px} .case-meta-item{background:var(--black);padding:16px 20px} .case-meta-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:4px} .case-meta-val{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;text-transform:uppercase} .case-cover{padding:0 48px} .case-cover-img{width:100%;height:520px;object-fit:cover;display:block;filter:grayscale(15%)} .case-content{max-width:900px;margin:0 auto;padding:80px 48px} .section-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--pink);margin-bottom:16px;display:flex;align-items:center;gap:12px} .section-label::before{content:'';width:28px;height:1px;background:var(--pink)} h2.cs-heading{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(32px,4vw,52px);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin-bottom:20px} h2.cs-heading em{font-style:italic;color:var(--pink)} .cs-text{font-size:15px;color:var(--gray);line-height:1.75;margin-bottom:20px} .cs-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px} .cs-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);padding:5px 10px} .problem-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:20px 0} .problem-list li{font-size:14px;color:var(--gray);display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--black-2);border-left:2px solid rgba(242,170,191,0.12)} .problem-list li::before{content:'✗';color:var(--gray-2);font-weight:700;flex-shrink:0} .solutions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(242,170,191,0.06);margin-top:24px} .sol-item{background:var(--black);padding:30px 26px;transition:background .3s} .sol-item:hover{background:var(--black-2)} .sol-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:11px;letter-spacing:.2em;color:var(--pink);margin-bottom:10px} .sol-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:18px;text-transform:uppercase;margin-bottom:8px} .sol-desc{font-size:13px;color:var(--gray);line-height:1.6} .results-section{background:var(--black-2);border-top:1px solid rgba(242,170,191,0.08);padding:80px 48px} .results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(242,170,191,0.06);margin-top:40px} .result-item{background:var(--black-2);padding:32px 24px;text-align:center} .result-val{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:48px;color:var(--pink);line-height:1;letter-spacing:-.03em} .result-label{font-size:12px;color:var(--gray);margin-top:6px;text-transform:uppercase;letter-spacing:.1em;font-family:'Barlow Condensed',sans-serif;font-weight:700} .result-sub{font-size:12px;color:var(--gray-2);margin-top:6px;line-height:1.4} .testimonial-box{background:var(--pink-dim);border:1px solid rgba(242,170,191,0.2);padding:36px;margin-top:36px} .t-quote{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,26px);text-transform:uppercase;line-height:1.2;margin-bottom:20px} .t-quote::before{content:'"';color:var(--pink);font-size:1.4em;line-height:0;vertical-align:-.2em;margin-right:4px} .t-author{display:flex;align-items:center;gap:12px} .t-avatar{width:40px;height:40px;border-radius:50%;background:var(--pink-dim);border:1px solid rgba(242,170,191,0.3);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;color:var(--pink)} .t-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase} .t-role{font-size:12px;color:var(--gray)} .next-project{padding:80px 48px;border-top:1px solid rgba(242,170,191,0.08);display:flex;align-items:center;justify-content:space-between} .next-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:8px} .next-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(32px,4vw,56px);text-transform:uppercase;color:var(--white);text-decoration:none;transition:color .2s} .next-name:hover{color:var(--pink)} footer{border-top:1px solid rgba(242,170,191,0.08);background:var(--black-2);padding:60px 48px 40px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .footer-brand-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px} .footer-brand-name span{color:var(--pink)} .footer-brand-desc{font-size:13px;color:var(--gray);line-height:1.6;max-width:240px} .footer-col-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:20px} .footer-links{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-links a{font-size:13px;color:var(--gray);text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:500;transition:color .2s} .footer-links a:hover{color:var(--pink)} .footer-bottom{border-top:1px solid rgba(242,170,191,0.06);padding-top:28px;display:flex;align-items:center;justify-content:space-between} .footer-copy{font-size:12px;color:var(--gray-2);font-family:'Barlow Condensed',sans-serif;font-weight:500;letter-spacing:.08em} .footer-social{display:flex;gap:20px} .footer-social a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-2);text-decoration:none;transition:color .2s} .footer-social a:hover{color:var(--pink)} .fade-up{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)} .fade-up.visible{opacity:1;transform:translateY(0)} @media(max-width:1024px){nav{padding:0 24px}.nav-links{display:none}.hamburger{display:flex}.case-hero,.case-cover,.case-content,.results-section,.next-project{padding-left:24px;padding-right:24px}.results-grid{grid-template-columns:1fr 1fr}.case-meta-grid{grid-template-columns:1fr 1fr}.solutions-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:640px){nav{padding:0 20px}.results-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:16px;text-align:center}.next-project{flex-direction:column;gap:20px}}
InicioServiciosProyectos PreciosEquipoBlogContacto
KLAR
Case Study Fintech · Product Design 2024

KlarBank

Cliente
KlarBank
Industria
Fintech
Servicios
UX/UI · App
Año
2024
KlarBank App

De app funcional a
experiencia que activa.

KlarBank es una app bancaria para millennials con todas las funcionalidades necesarias. El problema: la tasa de activación era del 34%. El 66% de los usuarios que descargaban la app nunca completaban el onboarding. Los tickets de soporte por confusión en la interfaz eran el principal dolor del equipo de producto.

El objetivo fue claro: transformar un onboarding de 11 pantallas sin jerarquía en una experiencia que lleva al usuario a su primer éxito en el menor tiempo posible.

UX DesignUI DesignProduct DesignDesign SystemOnboarding

Una app que los usuarios
no terminaban de usar.

La app tenía todas las funcionalidades bancarias necesarias, pero la tasa de activación era del 34%. Los usuarios bajaban la app, empezaban el registro y lo abandonaban. El equipo no sabía exactamente dónde ni por qué.

Arquitectura de experiencia
rediseñada desde cero.

Se realizó una auditoría UX completa: heatmaps, grabaciones de sesión, 12 entrevistas a usuarios y análisis paso a paso del funnel de onboarding. El problema no era visual — era arquitectónico.

01
Onboarding en 4 pasos

Rediseñamos el onboarding de 11 a 4 pasos. Cada paso tiene un objetivo único y una sola acción posible. El progreso es visible en todo momento.

02
Dashboard simplificado

El dashboard pasó de 14 elementos a 5 acciones principales. El 80% de los usuarios solo necesita ver saldo, transferir y pagar — todo visible sin scroll.

03
Notificaciones inteligentes

Rediseñamos el sistema de notificaciones: de genéricas y confusas a contextuales, claras y accionables. −72% en llamadas al soporte por notificaciones.

04
Design System completo

El nuevo sistema de design tokens permite al equipo interno mantener consistencia visual sin depender de diseñadores para cada cambio.

05
Jerarquía visual clara

Se reorganizó la estructura para que el usuario identifique rápidamente colecciones, productos destacados y categorías principales.

06
Primer éxito en 3 minutos

Rediseñamos el flujo para que el usuario pueda completar su primera acción de valor (ver saldo real) en menos de 3 minutos desde la descarga.

Impacto

Números que hablan.

−65%
Tickets soporte

Reducción drástica de contactos por confusión en la interfaz

+240%
Tiempo activo

Los usuarios usan la app más frecuentemente y por más tiempo

+190%
Activación

De 34% a más del 90% de usuarios que completan el onboarding

4.8★
Rating en stores

De 3.2 a 4.8 en App Store y Google Play en 3 meses

DiazUX no solo rediseñó la app — entendió el problema de negocio. El drop en soporte fue inmediato y los usuarios por fin le encuentran el valor al producto.

PL
Pablo L.
CPO, KlarBank
Siguiente proyecto
Formen →
Ver todos los proyectos