Refonte v3 LeBlindtestFrançais
- Rôle
- Product design, UI/UX, branding
- Durée
- +52 semaines (temps partiel)
- Outils
- Figma ; Node.JS, Socket.io ; HTML, CSS, JavaScript
- Contexte
- Refonte v3 d'un produit existant
Brief : Refondre l'interface d'une application de blindtest multijoueur dont le design et les fonctions étaient limités : une seule session à la fois, pas de scores en temps réel.
Objectif : Réduire la charge cognitive des joueurs en partie et rendre le jeu plus dynamique.
Livrables : Refonte UI/UX de l'espace de jeu synchronisé, nouveau logo et branding, design system.
Point de départ
La version précédente n'autorisait qu'une session de jeu à la fois et ne gérait pas les scores en temps réel. L'interface était datée. L'enjeu : une plateforme capable de supporter le jeu multi-synchronisé, avec une interface plus dynamique.
Tests et écran de jeu
Les sessions de test ont montré trois problèmes : les joueurs se perdaient dans l'interface, suivaient mal leurs scores et ressentaient peu de tension. Réponses retenues : scores pondérés par le temps, événements aléatoires, bonus stratégiques. L'écran de jeu doit afficher ensemble la question musicale, le chronomètre et les bonus actifs.
Branding
L'ancienne charte était terne et statique. J'ai retenu des teintes saturées et des typographies à fort caractère, et redessiné le logo (comparaison ci-dessus). Le design system et l'UI Kit ont été reconstruits autour de ces choix.
Écran de jeu, menu, connexion
Sur l'écran de jeu, la réponse et le chronomètre sont mis en avant et le reste de l'interface s'efface. Le menu principal et l'écran de connexion ont été simplifiés : 2 clics pour lancer une partie.
Ce que j'en retiens
Un jeu temps réel impose de dessiner chaque état de l'interface : attente des joueurs, chronomètre, activation d'un bonus, révélation de fin de manche. J'ai dû composer avec Socket.io et la latence réseau, et valider chaque maquette avec ces contraintes back-end.
