Étude de cas | UX/UI
Winalia.gg
Refonte de l’interface d’une plateforme où des joueurs misent de l’argent réel sur leurs matchs Fortnite.
Le problème
Une interface qui demandait une carte bancaire sans inspirer confiance.
Winalia a deux modes : Ranked, gratuit, qui sert de produit d’appel, et WinaMatch, où l’on mise des W-Coins pour remporter un prize pool. C’est là qu’est le chiffre d’affaires, et donc là que l’interface doit être irréprochable.
J’ai audité le produit page par page. Navigation confuse, boutons d’action peu visibles sur les écrans qui rapportent, dashboard sans point focal, aucun retour visuel après une action, responsive cassé sur mobile.
Ses joueurs passent leurs journées sur Fortnite, Discord et Twitch. Face à ça, l’approximation ne pardonne pas.
Avant / après
Le Dashboard
Avant la refonte
Deux bannières décoratives qui occupent le haut de page, un message d’accueil isolé, le Battle Pass relégué. Rien n’indique où cliquer.
Après refonte
Accueil et progression fusionnés, les deux modes de jeu au même niveau et cliquables, Battle Pass repositionné comme levier de rétention.
La démarche
Quatre temps, sans accès aux utilisateurs.
Pas de tests utilisateurs possibles sur ce projet. J’ai donc appuyé chaque arbitrage sur ce que je pouvais documenter : l’existant, la concurrence, et des profils validés par les fondateurs qui connaissent leur communauté mieux que personne.
Audit
18 problèmes relevés page par page et classés par sévérité.
Benchmark
8 plateformes concurrentes analysées.
Personas
4 profils de joueurs construits avec les fondateurs.
Design
3 à 5 versions par écran avant validation.
Les décisions
Trois arbitrages qui ont porté la refonte.
L’historique des matchs se lit comme un relevé bancaire.
Sur une plateforme où l’on dépose de l’argent, la liste des parties ne peut pas ressembler à un fil d’actualité. Mêmes lignes, mêmes dates, mêmes montants entrants et sortants qu’un compte. Le vocabulaire visuel de la banque fait le travail de crédibilité que le design de jeu ne peut pas faire.
Un Shop qui montre peu, et bien.
L’existant déversait tout le catalogue d’un bloc. J’ai repris la logique de Discord : une sélection mise en avant, puis des catégories limitées. On ne vend pas plus en montrant tout.
Une navigation pensée pour deux façons de tenir l’écran.
Sidebar de 72 px qui s’élargit au survol sur desktop, barre fixe en bas sur mobile. Sur WinaMatch, la mise d’entrée et le prize pool sont visibles sur chaque carte : l’information qui décide de l’action ne doit jamais demander un clic.
Livré
Cinq écrans et un système qui tient au-delà.
Fond très sombre, une seule couleur d’action sans dégradé, une couleur réservée aux W-Coins, Inter en plusieurs graisses, aucune majuscule forcée. Le système a été pensé dès le départ pour couvrir plus que les cinq écrans initiaux.
Les allers-retours
Trois versions du Dashboard, deux corrections venues du client.
Je livrais un écran en PDF, je recevais les retours sous 24 h, j’itérais. En V1, j’avais séparé le hero du message d’accueil, retour de Tom : « fusionne les deux ». En V2, j’avais placé les statistiques avant les favoris, « inverse l’ordre ». La V3 a été validée.
Ce que j’en retire
Mes deux premières versions raisonnaient en designer. Tom raisonnait en usage.
Ce qu’un joueur veut voir en ouvrant l’app, c’est où rejouer, pas ses statistiques. Il avait raison les deux fois.
Ce que je referais autrement : poser ces questions avant de dessiner, pas après la première maquette. Trois tours sur un écran ne sont pas un problème en soi, mais deux d’entre eux auraient pu être une conversation de dix minutes en amont.
Les maquettes sont aujourd’hui en cours d’implémentation. Projet mené dans un cadre confidentiel ; certains éléments ont été simplifiés.