Caso
LaLiga Hub de Clubes
Estoy explorando cómo una plataforma multirol puede hacer legibles intercambios documentales complejos sin perder su gobernanza.
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 reúne actividad y accesos frecuentes para cada club. Captura real del desarrollo, a doble resolución y con datos de demostración.
La vista de infraestructuras permite explorar la coordinación entre organizaciones. Esta captura muestra la evolución actual del desarrollo, con datos sintéticos.
Reviso la jerarquía y los estados también en modo oscuro. Es una captura del modo implementado, no una inversión de colores de la imagen.
En móvil priorizo los accesos frecuentes y mantengo el contexto del club. Captura real a triple resolución; puede ampliarse para revisar el detalle.
Problema
Partí de una pregunta: ¿cómo ordenar una relación documental entre clubes, departamentos y responsabilidades sin perder quién debe actuar, sobre qué versión y con qué evidencia? No me interesaba sumar otro panel de indicadores.
Separé club, infraestructuras y marca para analizar qué cambia con cada responsabilidad. Permisos, estados y organización pasan a ser parte del diseño: la interfaz tiene que ayudar a decidir sin esconder la complejidad que protege el proceso.
Métodos: Necesidades por rol · Estados del expediente · Aislamiento por organización · Supervisión por excepción.
Sistema
Planteé el sistema visual como una estructura gobernada: tokens compartidos, temas de club acotados y componentes que pueden cambiar de identidad sin alterar la jerarquía funcional.
No traté desktop, mobile, claro y oscuro como cuatro diseños independientes. Comparten navegación, estados, permisos y reglas de contraste; solo cambia lo que pertenece al contexto de cada organización.
IA en el proceso
La propuesta reúne expedientes, adjuntos, notificaciones, auditoría y un asistente que responde con evidencia. No planteo la IA como sustituto del circuito de aprobación: debe trabajar 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. Busco 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
- Aportación humana
- Dirección de producto, prioridades, criterios de aceptación y decisiones L3
- Resultado de la IA
- 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 trabajo se articula con una separación 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 mantuvieran el mismo criterio.
Evidencia
La evidencia reúne 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.
Lo presento como una evolución, no como un cierre: el producto se trabaja localmente con datos sintéticos y todavía quedan abiertas la convergencia del menú principal y algunos refinamientos de interfaz.
Del prototipo al componente
Organización del sistema
- 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
He comprobado que un tema de marca necesita limitar qué tokens modifica y conservar jerarquía, contraste y comportamiento.
Una pestaña visible no es un modelo de autorización: los permisos tienen que derivarse del servidor.
La revisión Figma-código me resulta útil cuando deja evidencia comparable, no solo una impresión 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 crees que mi forma de trabajar encaja en tu equipo, o tienes un producto o una investigación que quieras desarrollar, me gustaría conocerlo. Cuéntame qué necesitas y en qué punto estás. Leeré tu mensaje personalmente.
También puedes encontrarme en LinkedIn