01
L'overlay principal
Rosters complets des deux équipes, score, statut du match et timeline en bas d'écran. Toutes les infos d'un broadcast pro, repensées pour la lecture instantanée.
LIVE
Une couche d'interface live qui transforme une diffusion de hockey en cockpit interactif alimentée par XML et JSON.
L'énoncé du cours était simple et radical : prendre des données réelles, aux formats XML et JSON, et en faire un projet mécanique ou visuel qui exploite leur puissance.
Plutôt que de représenter passivement des chiffres, j'ai imaginé une couche d'interface diffusée en surimpression du flux TV. Le téléspectateur en devient pilote : il bascule entre sept modules, vote, parie, compare sans jamais quitter le match.
Rosters complets des deux équipes, score, statut du match et timeline en bas d'écran. Toutes les infos d'un broadcast pro, repensées pour la lecture instantanée.
Vue tactique en temps réel : la position de chaque joueur sur la patinoire, son numéro et son équipe, directement extraits du flux de tracking JSON.
Cartographie des zones chaudes et de la densité des tirs. Les patterns offensifs émergent visuellement, période après période.
Sélectionnez un joueur sur la patinoire pour obtenir ses stats avancées. Bonus : votez pour le MVP du match, en direct.
Comparatif visuel des deux équipes : tirs, tirs bloqués, temps en powerplay, pénalités, engagements remportés. Et un sondage interactif sur le gagnant final.
Coup d'œil sur toutes les rencontres en cours dans le championnat. Un clic pour basculer la diffusion d'un match à l'autre.
L'idée fun : une jauge gamifiée qui mesure l'intensité d'une bagarre en cours. Parce que c'est aussi pour ça qu'on regarde le hockey.
Le prototype Figma ci-dessous reproduit la navigation complète entre les sept modules. Cliquez pour interagir.