Brenda ContrerasEscalabilidad en Factoring: Atomic Design para Fondeo Directo
Lideré la creación de un sistema de diseño basado en componentes atómicos para una plataforma de factoraje financiero, permitiendo una transición fluida entre la arquitectura de información y la interfaz final con datos reales.
Contexto
En el mercado de factoring, la velocidad y la claridad en los datos de inversión son críticas. Necesitábamos una plataforma que conectara a empresas que requieren pagos inmediatos con inversionistas, pero el reto técnico era construir una interfaz que soportara operaciones complejas sin comprometer la consistencia visual.
El reto
El problema principal era la fragmentación en la construcción de la UI. Debíamos pasar de ver pantallas aisladas a entender la interfaz como un ecosistema de componentes reutilizables que permitiera a los inversionistas gestionar saldos de hasta $1,000,000.00 y visualizar rendimientos del 10% con total confianza.
Cómo lo abordé
- 1
Implementación de Atomic Design como metodología de trabajo núcleo.
- 2
Definición de una paleta cromática primaria y secundaria específica para el sector financiero.
- 3
Creación de moléculas funcionales para inputs de inversión con validaciones de mínimos y máximos.
- 4
Ensamble de organismos complejos para la gestión de oportunidades y operaciones pagadas.
Lo que me llevé
La metodología de Brad Frost no es solo para documentar, es para alinear al equipo. Al separar los átomos de los organismos, logramos que la discusión con desarrollo se centrara en la estructura del contenido y no solo en la estética, facilitando la integración de datos reales en las 'Pages'.
Metodología
- 01
Fundamentos (Atoms)
Establecimos los bloques básicos: paleta de colores, tipografía e iconografía como cimientos de la marca.
- 02
Unidades Funcionales (Molecules)
Diseñamos elementos combinados, como el selector de monto de fondeo con etiquetas de límites (Mín. $10,000 / Máx. $120,000).
- 03
Estructuras (Organisms)
Construimos secciones completas del Dashboard que agrupan moléculas para mostrar oportunidades y estados de cuenta.
- 04
Estructura de Contenido (Templates)
Definimos la arquitectura de información a nivel página para articular cómo vivirían los componentes en el layout.
- 05
Fidelidad Real (Pages)
Validamos el sistema aplicando contenido real y representativo para asegurar que la interfaz soportara la carga de datos del usuario.
Hallazgos de investigación
- La claridad en los límites de inversión (mínimos/máximos) reduce errores en el flujo de fondeo.
- La consistencia en la iconografía de operaciones pagadas vs. oportunidades mejora la navegabilidad.
- El uso de templates permite una iteración más rápida sobre la estructura sin romper la UI.
Entregables
- Sistema de Diseño Atómico
- Dashboard de Inversionista
- Guía de Estilos Financiera
- Flujo de Fondeo Directo
Evidencia del proyecto
Sigue leyendo
Gobernanza de Datos C-Level: 172 KPIs convertidos en una narrativa ejecutiva
Diseñé la torre de gestión directiva en Power BI de una farmacéutica líder en LATAM: un solo tablero donde el comité lee la estrategia y decide.
Product Design · FintechAutomatización Fintech: +75% de Productividad en Conciliación Contable
Lideré la transformación de la herramienta de conciliación de Enconta para pasar de un proceso manual en Excel a un flujo digital eficiente. Logramos aumentar la productividad de los contadores en un 75% mediante un diseño basado en evidencia y una alineación profunda con los stakeholders del negocio.
Product Design · FintechEvaluación Experta de Usabilidad para Infosel
Auditoría de usabilidad de la plataforma financiera Infosel para identificar fricciones críticas en el flujo de configuración de terminales y visualización de datos, fundamentada en psicología cognitiva y principios heurísticos.
Conversemos
¿Necesitas escalar,
alinear o automatizar decisiones de diseño?
Agenda una sesión exploratoria de 30 minutos. Sin formularios largos: conversamos, diagnostico tu contexto y te propongo el siguiente paso.