Bienestar a la carta,
una plataforma que evoluciona contigo
Product Designer | UX Strategy | Design Systems | Accessibility
Bienestar a la carta
Desde noviembre de 2025, lidero la transformación integral de la Plataforma de Bienestar a la Carta (Compensar), un ecosistema digital que impacta directamente a mas de 298.000 usuarios. El proyecto nace ante la necesidad crítica de reducir la fragmentación visual y la alta carga cognitiva del modelo anterior.
El objetivo del proyecto es evolucionar la plataforma hacia un sistema de "Mundos" personalizados, entornos temáticos que utilizan lógica de segmentación avanzada para curar la oferta. Además, se plantea un diseño personalizable para el entorno corporativo (B2B), permitiendo que las empresas que contratan programas de bienestar adapten la interfaz a sus colores de marca y visualicen exclusivamente la oferta contratada. La meta es entregar una experiencia intuitiva y escalable que optimice la conversión y fortalezca la fidelización mediante una navegación 100% digital y humana.
Desde finales del 2025 hasta inicios 2026
Mi rol
Como Senior Product Designer, dirijo la estrategia de producto de punta a punta (End-to-End). Mi responsabilidad abarca desde la traducción de objetivos de negocio en arquitecturas de información escalables, hasta la ejecución visual de alta fidelidad.
Lidero la creación y gobernanza del Sistema de Diseño, asegurando el cumplimiento estricto de los estándares de accesibilidad WCAG 2.2. Asimismo, orquesto la alineación técnica con el equipo de arquitectura, desarrollo y analítica para garantizar que la personalización basada en datos se traduzca en componentes de interfaz funcionales y eficientes.
Solutions Lead
Equipo
Líder de Soluciones
Yolima Segura
Product Owner Compensar
Lorena Jiménez
Estrategas de Solución
John Milan
Analista de Negocio
Sandra Benjumea
Senior Product Designer
Sofía Martínez (Yo)
Líder Técnico Transversal
Carlos Rojas
Front-end Dev
Juan Cano
Front-end Devs
Yulieth Zuluaga
Back-end Dev
Jose Ruiz
Back-end Dev
Santiago Cano
Mobile Dev
Marlon Vargas
Analistas QA
Johana Peña
Analistas QA
Harold Calderón
El desafío
La plataforma operaba como un catálogo genérico con fricciones críticas en dos frentes:
-
B2C (Usuarios): Sobrecarga cognitiva, jerarquía débil y falta de claridad en precios, causando desconfianza y abandono.
-
B2B (Empresas): Personalización de colores sin restricciones, rompiendo la consistencia visual y que rompían los estándares de accesibilidad (WCAG 2.2).
Reestructurar la arquitectura de información para transformar este ecosistema en una experiencia predictiva para el usuario y un modelo de personalización corporativa seguro.
Proceso de diseño
A través de un proceso de diseño End-to-End, transformamos la complejidad de este ecosistema dual en una solución intuitiva. A continuación, detallo cómo evolucionamos desde el UX Research para identificar fricciones críticas, hasta la ideación e implementación de un Sistema de Diseño y las WCAG 2.2.
Empatizar
Understanding a dual ecosystem
Cognitive overload, weak hierarchy, and lack of pricing clarity, causing distrust and abandonment.
1. The individual user (B2C) and the need for adaptation:
For the average member, the current platform felt static. We understood that the experience needed to be seamless and adaptive, using behavioral data (searches, historical preferences) to transform the general navigation into a personalized flow that anticipated their wellness needs.
2. The corporate client (B2B) and the challenge of white labeling:
Companies that purchase wellness plans need the platform to feel like an extension of their own corporate culture.
Idear / definir
-
¿Navegación limitada?
Durante el proceso de ideación, establecimos que la personalización debía ser proactiva. Definimos el concepto de "Mundos" y decidimos ubicar la segmentación al inicio del flujo para filtrar el contenido irrelevante antes de solicitar las credenciales completas. Asimismo, al auditar la arquitectura de la "Experiencia previa al inicio de sesión", identifiqué brechas de seguridad críticas y problemas de coherencia que se corrigieron en el diseño del flujo de usuario.
Optimización del "time to value"Al cambiar la arquitectura de un modelo restrictivo de Pre-login a uno de Delayed-login, eliminamos los nodos de autenticación temprana Esto reduciendo el número de pasos para acceder al Home de 7 a solo 2 interacciones, logrando una optimización del 70% en el flujo de exploración inicial y eliminando la fricción de entrada.
Orquestando la estandarización
Un desafío clave fue la personalización corporativa (B2B). El modelo anterior era "totalmente abierto": el cliente elegía los colores primarios y secundarios, el fondo, el fondo de la tarjeta, los títulos y el texto de la tarjeta. El análisis reveló graves deficiencias de accesibilidad.
From total freedom to curated customization
After many sessions, I proposed a paradigm shift. In the new model for the MVP, we provided a palette of six base colors. The user selects only one primary color, which guides the interface with a monochromatic logic, ensuring compliance with WCAG standards and the scalability of the design. We maintained key identity features: the ability to add base images for banners and the company logo, ensuring brand identity while maintaining design control and native accessibility.
Diseñar
Enfoque basado en datos (prioridad al escritorio):
Comenzamos el diseño conceptual y de alta fidelidad a partir de la versión web (de escritorio), en respuesta a los análisis que la posicionaban como el dispositivo más utilizado por nuestra base de usuarios.
Sistema de diseño base:
Desarrollamos la estructura de un sistema de diseño independiente de la plataforma, basado en los principios de Material Design, pero incorporando componentes personalizados adaptados para iOS. Esta decisión estratégica nos permitió garantizar la coherencia y escalabilidad multiplataforma, facilitando la implementación y acelerando la entrega de componentes en Flutter.
Adaptación multicanal y B2B:
A partir de la propuesta web validada, derivamos el diseño nativo para la aplicación móvil y estructuramos la lógica variable para la Propuesta de Personalización B2B (marca blanca para empresas), asegurando que el diseño respondiera a diferentes entornos sin alterar la estructura principal.
Testing
Validation was carried out in two phases:
-
Focus groups and stakeholder review.
-
Structured surveys and usability testing (A/B testing) with real users.
Accesibilidad validada (Plugin Stark)
Para garantizar que la plataforma fuera verdaderamente inclusiva desde su concepción, implementamos auditorías continuas mediante el plugin Stark. Validamos parámetros críticos como el contraste de color, la legibilidad tipográfica y la sensibilidad táctil, lo que nos permitió asegurar el cumplimiento de los más altos estándares normativos.
Principales hallazgos de las pruebas
Architecture and Readability:
70% found it easier to navigate using a top bar (tabs) instead of dropdown lists.
Visual cleanliness and interaction:
75% intuitively understood that the cards were interactive (clickable), allowing us to clean up the interface by removing redundant buttons.
Conversión y arquitectura de precios:
Optimizamos la visualización del inventario unificando bonos fragmentados (ej. Bonos Falabella de $20.000, $30.000 y $50.000) en una sola tarjeta de experiencia. Al implementar un selector dinámico de valor, redujimos excesivamente la carga cognitiva y facilitamos la búsqueda, un modelo que el 80% de los usuarios encontró altamente intuitivo.
Transparencia en los flujos intermedios (iteración crítica):
Durante las pruebas, detectamos un sesgo de desconfianza (70 % de fricción) al proceder al pago. En las experiencias de la Tienda Compensar, el sistema no podía mostrar el precio exacto. Para facilitar la conversión sin modificar la arquitectura técnica, iteramos la interfaz, mostrando:
-
Rangos de precios (en dinero y puntos)
-
Implementamos un aviso proactivo y personalizado para gestionar las expectativas:
«El precio a pagar se ha calculado automáticamente en función de su categoría de membresía (Categoría B). El precio final de esta experiencia se confirmará al continuar con la compra».
Esta transparencia estratégica redujo la incertidumbre y generó la confianza necesaria para completar el proceso. -
Cambiamos el texto del botón de llamada a la acción (CTA) de «comprar» a «continuar con la compra».
Resultados y estado actual del proyecto
Actualmente en fase de estructuración del roadmap de desarrollo, cerramos la etapa de diseño estratégico con hitos críticos aprobados por negocio. Transformamos una plataforma legacy (lanzada en 2022) sin estandarización, creando el primer Sistema de Diseño agnóstico optimizado para Flutter. Evolucionamos la experiencia hacia un modelo predictivo (Mundos), eliminando años de deuda técnica y entregando un ecosistema End-to-End (App, Web, B2B) listo y validado para +298.000 usuarios.
Time to Value
70%
Optimización de pasos en el flujo inicial, pasando de un modelo restrictivo a uno predictivo.
Eficiencia operativa UI
50%
De reducción proyectada en tiempos de diseño, la estandarizacion, permite al equipo enfocar los recursos en la estrategia y aceleran el time-to-market.
Lecciones aprendidas
Este proyecto me dejó dos grandes aprendizajes estratégicos.
-
Arquitectura Adaptativa: Para +298k usuarios diversos, diseñar de forma genérica no funciona. La solución fue la lógica de los "Mundos": una base estructural única que se reconfigura proactivamente según el perfil.
-
Cambio de Paradigma: En empresas tradicionales, un Sistema de Diseño no se vende por su estética, sino por su "eficiencia operativa". Demostrar su impacto en el rendimiento (Flutter) y la accesibilidad (WCAG 2.2) fue clave para su aprobación.
¡Muchas gracias!
Créditos
