Rediseño completo de plataforma B2B para inversores hipotecarios en Estados Unidos · 2024
~100
Inversores activos en la plataforma
9 MESES
Duración del proyecto
3 FLUJOS
Críticos rediseñados tras usability test
+30%
Meta de crecimiento en ventas definida con el cliente
Mi rol en el proyecto
- UX Research
- Arquitectura de información
- Wireframing y prototipado
- Usability testing
- UI Design
- UIKit
Fui el único diseñador UX/UI del proyecto, responsable de todo el proceso desde la investigación hasta la entrega del diseño final. Trabajé en un equipo de tres personas junto con un desarrollador frontend y uno backend. Las decisiones de diseño y experiencia de usuario fueron enteramente mías.
El problema
KDM Financial es una entidad crediticia hipotecaria comercial de mercado medio que ofrece financiamiento para bienes raíces comerciales en Estados Unidos: propiedades multifamiliares, oficinas, industriales y de autoalmacenamiento, entre otras.
Su plataforma existente presentaba una interfaz anticuada y sobrecargada que dificultaba el trabajo diario de sus ~100 inversores externos. La navegación era confusa, la jerarquía de información era inexistente y los flujos clave — login, registro y gestión de propiedades — generaban fricción constante. El negocio necesitaba un rediseño que le permitiera competir y escalar.
Los inversores pierden el control de los estados y procesos en los que se encuentran. Queremos que las ventas aumenten un 30% y que los inversores logren sus objetivos de la forma más rápida y sencilla posible.
— Brief del cliente · KDM Financial
Proceso de diseño
1-Empatizar — entender el contexto real
Competitive analysis | Context analysis | Research hypotheses
Realicé un mapa de competencia para identificar dónde KDM perdía terreno frente a competidores que ya ofrecían servicios financieros integrados. Complementé esto con un análisis de contexto centrado en los factores ambientales y psicológicos del usuario: inversores de mayor edad, con poco tiempo disponible y niveles variables de manejo tecnológico. Definí cuatro hipótesis de investigación que guiaron las decisiones posteriores.
2-Definir — alinear problema y objetivos
Brief | POV | User persona
Construí un brief formal con las partes interesadas para alinear alcance, restricciones legales y metas de negocio. Elaboré un POV (Point of View) para enmarcar los problemas como oportunidades accionables, y diseñé un User Persona representativo del grupo principal de usuarios: inversores de perfil senior con necesidad de procesos rápidos y control claro sobre el estado de sus propiedades.
3-Idear — generar soluciones
HMWFODA | SWOT | Ideación estructurada
Utilicé la técnica How Might We para replantear los problemas como oportunidades de diseño, generando preguntas abiertas que estimularon la exploración de soluciones. Apoyé la ideación con un análisis FODA que permitió capitalizar las fortalezas de la plataforma y mitigar los riesgos identificados en la fase de investigación.
4-Prototipar — estructura antes que estética
Information architecture | Conceptual map | User flow | Lo-fi wireframes | Interactive prototype
Diseñé la arquitectura de la información completa, un mapa conceptual del producto y diagramas de flujo para los recorridos principales. Partí de wireframes de baja fidelidad para validar estructura y contenido antes de invertir tiempo en detalle visual. Evolucione hacia prototipos interactivos de alta fidelidad para las pruebas de usabilidad.
5-Testear — usability test con 4 usuarios reales
Conduje sesiones de usability testing con 4 inversores reales. Les asigné tareas específicas dentro del prototipo y observé dónde fallaban, dónde dudaban y qué comentaban en voz alta. Esto reveló tres problemas críticos que no eran visibles sin sesiones reales de usuario.
Hallazgos del usability test y decisiones tomadas
Hallazgo 01 · Login y registro
Los flujos de acceso eran insuficientes y confusos
Los usuarios no entendían qué información se les pedía ni en qué punto del proceso estaban. Varios abandonaban el flujo de registro antes de completarlo. El feedback de error era genérico y no orientaba la corrección.
Decisión: Rediseñé el flujo de login y registro paso a paso, con indicadores de progreso claros, mensajes de error contextuales y validación en tiempo real. El resultado fue un wireflow documentado y aprobado por el equipo técnico antes de la implementación.
Hallazgo 02 · Tabla de propiedades
Era muy difícil trabajar con los datos de cada propiedad
La tabla original presentaba demasiados datos sin jerarquía. Los usuarios no sabían dónde hacer clic para acceder al detalle de una propiedad, y los estados del proceso (en revisión, aprobada, financiada) no eran visualmente distinguibles.
Decisión: Reorganicé la tabla priorizando los datos más consultados, introduje estados visuales con etiquetas de color diferenciadas y añadí una vista de detalle accesible en un solo clic desde cualquier fila.
Hallazgo 03 · Flujo de datos por propiedad
Las iteraciones de datos por propiedad generaban fricción constante
Al trabajar con los datos financieros de una propiedad específica, los usuarios se perdían entre secciones, no encontraban cómo volver al estado anterior y repetían pasos innecesarios.
Decisión: Rediseñé la arquitectura de navegación interna de cada propiedad con breadcrumbs consistentes y un panel lateral de estado persistente que muestra en todo momento dónde está el inversor dentro del proceso.
Antes vs. después
Antes
- Interfaz sobrecargada sin jerarquía
- Navegación confusa entre secciones
- Estados de propiedades invisibles
- Login y registro sin guía al usuario
- Sin diseño responsivo
Después
- Diseño limpio con jerarquía visual clara
- Navegación simplificada con breadcrumbs
- Estados diferenciados por color y etiqueta
- Flujos de acceso guiados paso a paso
- Diseño responsivo consistente
UI y UIKit
Diseñé un UIKit basado en Angular Material complementado con la metodología Atomic Design, lo que permitió al equipo de desarrollo implementar los componentes de forma eficiente y consistente. El sistema cubre tipografía, colores, espaciado, estados de componentes y patrones de interacción reutilizables.
Angular Material | Atomic Design | Component library | Responsive design
Resultados
Al cierre del proyecto, los ~100 inversores activos de la plataforma recibieron el rediseño con feedback positivo directo al cliente. Los tres flujos críticos identificados en el usability test fueron corregidos antes de la implementación, eliminando los puntos de fricción más reportados. El cliente declaró satisfacción con el resultado y el equipo de desarrollo pudo implementar los componentes sin iteraciones adicionales gracias a la documentación del design system.
La meta de negocio definida en el brief — incrementar ventas un 30% — quedó establecida como métrica de seguimiento post-lanzamiento.
Lo que me llevé
Este proyecto me enseñó que el usability testing no es un trámite: los tres hallazgos más importantes del diseño no estaban en ningún análisis previo, solo aparecieron cuando puse a usuarios reales frente al prototipo. También reforcé la importancia de documentar bien las decisiones de diseño: un design system sólido fue lo que hizo posible que un equipo de tres personas entregara en tiempo. de pasar a la fase de implementación. Me entusiasmaría seguir perfeccionando este producto en el futuro.