CASO DE ESTUDIO

Cliente: Principal International MX
Sector: Inversiones
Tipo de producto: Boleta Digital / Estado de Cuenta
Rol: Product Designer & UX Researcher
Enfoque: Reestructurar y modularizar la interfaz
Principal Afore México — Mi Ahorro vista desktop con saldo, detalle de cuenta y simulador
Scroll para explorar
Mi Ahorro Afore — vista mobile del detalle de saldo

El desafío

VISIóN GENERAL

El enfoque del producto se centró en reestructurar y modularizar la interfaz junto con la creación de gráficos de alto impacto cognitivo. Esta combinación redujo la complejidad visual de la información financiera, transformando datos pasivos en insights visuales que guían al usuario hacia decisiones informadas y aumentan la confianza en el canal digital.

EL PROBLEMA

El estado de cuenta original presentaba una arquitectura inconsistente: saturado de información densa en ciertas secciones y carente de explicaciones en zonas críticas. Esta falta de jerarquía visual, sumada a opciones de interacción confusas, generaba una alta carga cognitiva. El resultado era una experiencia opaca que erosionaba la confianza del usuario e impulsaba elevadas tasas de abandono.

CÓMO LO ABORDAMOS

  • Plan de trabajo — brief
  • Benchmark competitivo y funcional
  • Research
  • Arquitectura de información
  • Prototipado en Figma
  • Entrevistas a usuarios

ORGANIZACIÓN DEL PROYECTO

Plan de trabajo estructurado en seis fases que guiaron el rediseño del estado de cuenta digital — desde la alineación inicial del brief hasta el monitoreo post-lanzamiento con mejora continua.

Alineación e Interpretación del Brief (Discovery)

  1. Desglose de objetivos: Identificar KPIs clave (disminución del porcentaje de abandono, incremento en la tasa de lectura y adopcioón del canal digital).
  2. Auditoría del producto actual: Mapeo de fricciones en el estado de cuenta anterior (puntos de saturación de texto, zonas ambiguas y falta de contexto).

Investigación y Estrategia de Usuario (UX Research)

Auditoría del documento impreso, análisis de dolor del usuario y benchmark de boletas digitales, definir reglas de negocio para personalizar el contenido según perfil demográfico, nivel educativo (ajuste de microcopy) y contexto geográfico (optimización de carga).

Arquitectura de Información y Modularización

Reestructuración de la interfaz, jerarquización del contenido, definición de la matriz de segmentación de clientes y mapeo de patrones de lectura (F y Z).

Diseño UI y Visualización de Datos (Data Viz)

Creación de componentes modulares en Figma, jerarquización de saldos, tarjetas informativas y botones de acción (CTA).

Reestructuración y Modularización de la Interfaz

Diseño UI y Prototipado: Creación de componentes modulares en Figma, jerarquización de saldos, tarjetas informativas y botones de acción (CTA).

Validación y Pruebas de Usabilidad

Pruebas de usabilidad sobre el grado de comprensión del saldo, pruebas de escaneo visual y compatibilidad de renderizado en clientes de correo.

Entrega y Monitoreo (Handoff & Growth)

Documentación técnica para crear las especificaciones de componentes y estados para el equipo de desarrollo en Confluence.

Medición de resultados: Monitoreo post-lanzamiento de la tasa de apertura, tasa de interacción en botones clave. Mejora continua.

Enfoque

Para garantizar que el rediseño del producto respondiera a necesidades reales y no a suposiciones, estructuré un Plan de Trabajo Inicial de Pruebas de Usabilidad (Test-Form). La investigación se enfocó en medir la interacción del usuario en tiempo real, identificar fricciones en las tareas clave y conectar los hallazgos de diseño con métricas de valor directo para el negocio.

Metodología y Herramientas

  1. Plan de Testeo & Guión: Definición de escenarios, tareas específicas y métricas de desempeño para evaluar la usabilidad de las interfaces.
  2. Mapa de Empatía y Encuestas: Levantamiento cualitativo para comprender lo que el usuario piensa, ve, escucha, dice y siente durante su interacción financiera.
  3. Clasificación de Hallazgos (Matriz de Diagnóstico): Categorización ágil de las respuestas e interacciones observadas en tres estados principales:
  • Todo (Fricción / Error): Bloqueos de usabilidad o puntos donde el usuario se detiene.
  • Algo (Oportunidad / Parcial): Pasos completados con duda o que requieren mayor contexto.
  • Bien (Éxito / Fluidez): Patrones de interacción eficientes y bien comprendidos.

El Impacto del UX en los Resultados de Negocio

El proceso de investigación se fundamentó en la correlación entre la experiencia de usuario y el retorno de inversión (ROI), alineado con estudios de la industria (como McKinsey) que señalan que más del 40% de las empresas no interactúan con sus usuarios durante el desarrollo y más del 50% carece de procesos para evaluar el rendimiento del diseño.

  1. Aumento de Ingresos: Experiencias fluidas que fomentan la recurrencia y la recomendación (NPS / Recompra).
  2. Reducción de Costos: Disminución sustancial de soporte al cliente al resolver dudas de navegación directamente en la interfaz.
  3. Lealtad y Retención: Reducción de la tasa de abandono (churn) mediante procesos confiables y transparentes.
  4. Reputación de Marca: Posicionamiento del producto como una solución moderna y accesible.

Encuesta — 61 usuarios

Número de usuarios y preferencias: 61 usuarios que contestaron preguntas abiertas y de selección múltiple. Algunas preguntas clave de la encuesta:

  • ¿Los videos te ayudaron a comprender el contenido ofrecido?
  • Consultar mi saldo a través del teléfono móvil / App
  • Consultar mi saldo a través del Estado de Cuenta Regulatorio
  • Otro
Captura de encuesta — resultados de usabilidad del producto legacy Captura de encuesta — preferencias de consulta de saldo Captura de encuesta — comprensión del contenido Captura de encuesta — opciones de consulta

Como parte de la fase Empatizar del Design Thinking, construí un mapa de empatía que sintetizó los sentimientos, observaciones, acciones y experiencias de María, una usuaria real de Principal Afore. Esto nos permitió enfocar el rediseño según sus motivaciones, frustraciones y necesidades reales.

María

¿Qué piensa y siente?
  • Se preocupa por su futuro financiero
  • Quiere ahorrar para su jubilación
  • Quiere entender cómo está creciendo su dinero
  • Información clara y concisa
  • Opciones para personalizar su estado de cuenta
  • Herramientas para entender su rendimiento
¿Qué necesita?
  • Confía en que su dinero está seguro
  • Se siente informado sobre su situación
  • Se siente motivado para ahorrar más
  • Proyecciones de ahorro
  • Sincronizar experiencia
  • Personalización
¿Qué hace?
  • Revisa su estado de cuenta con regularidad
  • Compara su rendimiento con el de otros fondos
  • Investiga sobre diferentes opciones de inversión
¿Cómo se siente al usar el estado de cuenta?
  • El saldo anterior se puede ver desmotivador cuando hay minusvalías, ya que su saldo disminuye
  • Quiere tener acceso al estado de cuenta más rápido y fácil
  • Aumentar tamaño de letra en secciones importantes
¿Qué podría mejorar?
  • Información más detallada sobre el rendimiento
  • Desglose de cuentas: reorganización para facilitar la diferencia ya sea por iconos o colores
  • Me gusta que se sigan los comentarios y se tomen medidas para mejorar, esto demuestra el valor de mi opinión
  • Rendimiento y saldo anterior: no entiendo datos del cuatrimestre y rendimiento mensual, quisiera un gráfico o tabla a largo plazo
  • El rendimiento real no es consistente con la tabla de IRN de CONSAR, puede provocar sentirse confundidos o engañados

Mapa de Empatía — Versión visual completa

Mapa de empatía de María — usuaria real de Principal Afore México

El rediseño del simulador de pensiones se abordó en dos variantes según el régimen del cliente: Ley 97 (trabajadores que cotizan bajo la ley actual) y Ley 73 (trabajadores con régimen anterior). Cada variante tiene flujos, calculadoras y mensajes personalizados. La interfaz se modularizó para reducir la carga cognitiva y transformar datos pasivos en insights visuales accionables.

Mi Saldo — Ley 97
Mi Saldo Ley 97 — experiencia mobile rediseñada de Principal Afore
Mi Saldo — Ley 73
Mi Saldo Ley 73 — experiencia mobile rediseñada de Principal Afore

Mejoras Clave en la Experiencia de Usuario (UX)

Segmentación Inteligente de Entrada

Eliminamos la ambigüedad inicial identificando o guiando al usuario hacia su régimen correspondiente de forma inmediata, evitando campos innecesarios y preguntas confusas. Se eliminó la opción "mes anterior" ya que generaba pensamientos confusos y renuncias.

Visualización de Datos de Alto Impacto

Sustitución de tablas densas por gráficos interactivos optimizados para patrones de escaneo (F y Z). El usuario puede modificar variables como edad de retiro o aportaciones adicionales y ver el impacto inmediato en su pensión proyectada.

Microcopy Claro y Transparente

Traducción de la jerga financiera y legal a un lenguaje accesible, ofreciendo tooltips y desgloses progresivos sobre las condiciones de cada ley.

Componente Modular y Responsivo

Un formato tipo widget adaptado para dispositivos móviles que no solo entrega un resultado en segundos (Time-to-Value), sino que conecta directamente con llamadas a la acción (CTAs) para incrementar el ahorro voluntario.

Resultados del rediseño

+62%
Aumento en la tasa de lectura del estado de cuenta digital
+45%
Mejora en la comprensión de la información financiera
+38%
Incremento en la adopción del canal digital