Caso
LaLiga Hub de Clubes
Una plataforma multirol para convertir intercambios documentales complejos en procesos gobernados, trazables y comprensibles.
Caso en evolución
Documentación gobernada, identidad adaptable y decisiones trazables.
- 3 espacios
- club, infraestructuras y marca
- Multi-tenant
- aislamiento y permisos del servidor
- 4 modos
- desktop, mobile, claro y oscuro
Colaboración: Claude: Figma y sistema visual · Codex: arquitectura, implementación, datos y pruebas
Caso en evolución con datos sintéticos. No representa un despliegue oficial ni una adopción pública por LaLiga. Marcas y escudos pertenecen a sus respectivos titulares.
El proyecto, por capas
Pequeñas decisiones construyen el sistema.
La portada convierte permisos, actividad y accesos frecuentes en una agenda operativa comprensible para cada club.
La misma arquitectura cambia de escala para coordinar expedientes entre organizaciones sin perder responsables ni trazabilidad.
El modo oscuro conserva jerarquía, estados y contraste; no es una inversión automática de colores.
En móvil se priorizan las decisiones urgentes y los accesos más frecuentes, manteniendo el contexto del club.
Problema
La dificultad no era diseñar otro panel de indicadores. Era ordenar una relación documental con muchos clubes, departamentos y responsabilidades sin perder quién debe actuar, sobre qué versión y con qué evidencia.
El encuadre separó tres superficies —club, infraestructuras y marca— y convirtió permisos, estados y organización en parte del diseño. La interfaz debía ayudar a decidir sin ocultar la complejidad que protege el proceso.
Métodos: Necesidades por rol · Estados del expediente · Aislamiento por organización · Supervisión por excepción.
Sistema
El sistema visual se planteó como una estructura gobernada: tokens compartidos, temas de club acotados y componentes capaces de cambiar de identidad sin alterar la jerarquía funcional.
Desktop, mobile, claro y oscuro no son cuatro diseños independientes. Comparten navegación, estados, permisos y reglas de contraste; solo cambia aquello que pertenece realmente al contexto de cada organización.
IA en el proceso
La experiencia reúne expedientes, adjuntos, notificaciones, auditoría y un asistente que responde con evidencia. La IA no sustituye el circuito de aprobación: trabaja dentro de permisos, fuentes y estados visibles.
La home se deriva del rol autenticado y combina accesos operativos con los indicadores que requieren atención. El objetivo es reducir navegación sin convertir el panel en una colección de métricas decorativas.
- Herramienta
- Claude · Codex · Coordination Hub
- Fase
- Diseño, implementación, revisión cruzada y verificación
- Input humano
- Dirección de producto, prioridades, criterios de aceptación y decisiones L3
- Output
- Sistema visual en Figma, arquitectura ejecutable, pruebas y evidencia de paridad
- Criterio de selección
- Trazabilidad, seguridad, claridad por rol, coherencia visual y posibilidad de evolución
- Límites detectados
- Sin datos reales, publicación privada y ninguna afirmación de adopción oficial
- Decisión final
- Humana en decisiones externas, irreversibles o de posicionamiento
Implementación
El proyecto se construyó con una separación estricta entre núcleo y contenido: autorización server-side, aislamiento multi-tenant, puertos y adaptadores, temas gobernados y contratos verificables.
Claude desarrolló el sistema visual y los contratos de Figma; Codex tradujo la arquitectura a código, datos y pruebas. Mi responsabilidad fue dirigir prioridades, resolver decisiones L3 y revisar que producto, diseño e implementación convergieran.
Evidencia
La validación incluye comparaciones Figma-código, recorridos de navegador, controles de autorización y aislamiento, pruebas de recuperación y auditorías visuales en desktop y mobile.
El caso se publica como evolución, no como cierre: el producto funciona localmente con datos sintéticos, pero la convergencia del menú principal y algunos refinamientos de interfaz siguen abiertos.
Del prototipo al componente
Figma · sistema atomizado
- foundations / color gobernado · tipografía · spacing · temas claro/oscuro
- components / navbar · section tabs · tiles · KPI cards · estados
- patterns / club · infraestructuras · marca · desktop · mobile
- handoff / nodeIds · contratos · comparación visual Figma-código
Aprendizajes
Un tema de marca solo es seguro cuando modifica tokens permitidos y conserva jerarquía, contraste y comportamiento.
Los permisos deben derivarse del servidor; una pestaña visible no es un modelo de autorización.
La revisión Figma-código gana valor cuando produce evidencia comparable y no una impresión subjetiva de parecido.
Pregunta abierta: ¿Cómo puede una interfaz multirol hacer visible la gobernanza sin añadir carga cognitiva a quienes solo necesitan completar una tarea?
Contacto
Hablemos.
Si tienes un producto difícil de ordenar, una investigación que necesita forma o una idea que todavía no sabes cómo probar, cuéntame el contexto. Leo y respondo yo, sin automatismos.
También puedes encontrarme en LinkedIn