Une arène play-to-earn multijeu, spécifiée de bout en bout — de la recherche guidée par Octalysis aux wireframes de 16 sections — pas encore lancée.
Entreprise
Indépendant
Rôle
Designer produit et stratège
Période
2026
Type
Produit
Secteur
Gaming · play-to-earn
Équipe
Un product owner, un collaborateur pour la spécification jeu et communauté, et Sina comme lead design produit et stratégie
Statut
Pré-lancement
Outils
Figma
React
Le problème
Les jeux casual en HTML5 ont rarement une couche compétitive ou de monétisation durable — et les plateformes qui en ajoutent une ressemblent d’abord à des produits de casino.
Le rôle
Lead design produit et stratégie : la recherche sur la gamification, le périmètre du MVP et la spécification complète des wireframes sur 16 sections, aux côtés d’un product owner et d’un collaborateur à la spécification.
Le résultat
Un périmètre MVP entièrement tranché, un catalogue de build de 34 composants avec un ordre de build sur 3 semaines, et un outil Octalysis interactif réutilisable — avant le lancement, donc pas encore de métriques produit.
Figure 01
Figure 01Trois des 73 écrans exportés : un défi en duel, Today’s Spotlight et le classement Weekly Legend.
01Contexte
Beaucoup de petits jeux, une seule couche compétitive et économique.
RP1 — ReadyPlayerOne dans la documentation du projet — est une arène mobile-first qui regroupe des jeux d’arcade HTML5 légers — Flappy Bird, Snake, Temple Run, Subway Surf et d’autres — sous une seule couche compétitive et économique : des compétitions quotidiennes et hebdomadaires au classement, des duels en 1 contre 1 avec mise et des tournois accessibles par ticket, le tout réglé en USDT via un portefeuille on-chain (BNB Smart Chain, BEP-20).
Il n’est pas présenté comme un réseau social — la documentation du projet parle d’un « moteur de visibilité compétitive ». Les références citées tout au long de la recherche sont Skillz, MPL, WinZO, Kongregate et Plato.
Pas un réseau social : un moteur de visibilité compétitive.
02Problème
Compétitif et gratifiant sans devenir un casino.
Les jeux casual en HTML5 abondent, mais ont rarement une couche compétitive ou de monétisation durable — et les plateformes qui en ajoutent une, dans le crypto-gaming et le play-to-earn, ressemblent d’abord à des produits de casino et seulement ensuite à des jeux.
RP1 s’est donné pour but de concevoir un système réellement compétitif et gratifiant, sans basculer dans des mécaniques abusives : chaque mécanique a été évaluée selon l’équilibre White-Hat / Black-Hat du framework Octalysis.
L’appli ESPN, pas Stake.com — dire qu’un joueur a « mérité » un prix, jamais qu’il a « gagné gros » ou décroché le « jackpot ».
03Contraintes
Une économie en USDT uniquement, un canevas mobile-first, un jeu de composants lacunaire.
Règlement uniquement en USDT, sur BNB Smart Chain (BEP-20) — pas de token utilitaire.
Mobile-first : une seule app, une navigation verrouillée sur trois onglets.
Un jeu de composants existant avec une liste de 18 lacunes — pas de tokens de couleur ni de typographie, pas de spécification de motion, un système d’avatars non défini.
Un guide de ton qui excluait le vocabulaire du casino.
04Mon rôle
Recherche, périmètre et spécification — aux côtés d’un product owner.
Lead design produit et stratégie, aux côtés d’un product owner désigné et d’un collaborateur qui a rédigé la spécification jeu et communauté de la phase ultérieure du projet.
Responsable
↳Recherche sur la gamification : Octalysis sur l’ensemble des 8 core drives, transformé en outil de notation interactif en anglais et en persan
↳Cadrage du MVP : navigation à trois onglets, un seul club, une économie en USDT uniquement
↳Des arbitrages documentés dans le journal de résolution des conflits, dont la dénomination Duel / Tournament / Rumble
↳La spécification complète des wireframes sur les 16 sections, chacune avec son audit de copy écran par écran
Coresponsable
↳La direction produit, avec le product owner
Collaboration
↳La spécification de référence du jeu et de la communauté — rédigée par un collaborateur ; elle a remplacé mon premier brouillon sur la communauté
05Approche
D’abord la recherche, puis les mécaniques, puis un recadrage sans concession.
La recherche d’abord : un large tour de plus de 20 plateformes de jeu compétitif et casual — Skillz, MPL, WinZO, Kongregate, les mini-apps Telegram et d’autres —, puis une plongée dans Octalysis assez poussée pour devenir un outil de notation interactif : un audit sur 8 drives, un graphique radar octogonal, des constructeurs de phases de parcours et de boucles d’engagement, et une checklist éthique.
Ensuite, la conception des mécaniques : trois systèmes cartographiés — une boucle de création de valeur (comment un joueur au solde faible regagne sa place), une boucle d’engagement (tournoi, duel ou boutique du club pour un joueur disposant de fonds) et une boucle de rétention du club avec une machine à états formelle.
Vint ensuite le recadrage du MVP, suivi dans un journal daté de résolution des conflits plutôt que laissé en réécritures silencieuses. Un audit de réutilisation de 20 composants, classés par score de réutilisation, a alimenté une passe complète de wireframes sur les 16 sections — chacune avec son propre audit de copy écran par écran et un journal d’anomalies P1/P2/P3.
Six passes, dans l’ordre
01
Recherche sur les plateformesPlus de 20 plateformes de jeu compétitif et casual
02
Audit Octalysis8 core drives → un outil de notation interactif
La boucle de rétention du club
L1
Ouvrir le club
L2
Repérer une opportunité
06Décisions clés
Quatre décisions qui ont façonné le MVP
Consignées dans le journal daté de résolution des conflits du projet, pas tranchées en passant.
01
Limiter la navigation à trois onglets : Club, Game, Wallet.
Une vision antérieure, bien plus vaste — un utility token, des paris dans l’app, des clubs détenus par les joueurs et des boutiques de club —, a été ramenée à un produit uniquement en USDT, avec un seul club.
Alternatives
La vision antérieure : un utility token, des paris dans l’app, des clubs détenus par les joueurs et des boutiques de club.
Compromis
Une économie plus réduite — un club, pas de boutiques de club, pas de token — en échange d’un périmètre qui pouvait être entièrement tranché.
Preuves
Un périmètre MVP entièrement tranché et un catalogue de build de 34 composants (9 réutilisés, 25 entièrement nouveaux) avec un ordre de build sur 3 semaines.
07Solution
Une app, trois onglets, chaque section en wireframe.
La spécification couvre toute l’app : onboarding avec Google, Apple ou e-mail et vérification OTP ; un hub de jeux réunissant Solo Challenge, Duel, Team Battle et Tournaments ; Today Spotlight, une compétition quotidienne sur un seul jeu avec ticket d’entrée et classement en direct ; Weekly Legend, une compétition de 7 jours sur plusieurs jeux ; Lucky Wheel ; le chat ; des notifications sous forme de cartes transactionnelles enrichies ; un portefeuille uniquement en USDT avec la ventilation des gains ; un profil avec succès et une feuille de route façon XP ; et les réglages.
La navigation est limitée à trois onglets — Club, Game, Wallet —, et un unique motif réutilisable de Feed Card (annonce de victoire, tournoi qui commence, quasi-victoire, montée de niveau, résumé quotidien) porte l’onglet Club. Trois systèmes d’animation complètent la spécification : une séquence d’entrée dans le profil, une montée de niveau en six images clés et dix overlays déclenchés par des événements.
01Solde total en USDT — la seule devise de l’app
02Retrait et dépôt
03Gains ventilés par source : publicités, parrainage, dépôt, combat
04Le portefeuille on-chain et l’envoi d’argent
05Soldes disponible, en jeu et en attente
Figure 04Le portefeuille : une seule devise, chaque source de gains visible, et les fonds engagés en jeu affichés à part.
Figure 06Les notifications sont des cartes transactionnelles — dépôt, retrait, prix, résultats de duels et de Rumble —, chacune avec ses propres actions.
08Iconographie
Une famille de 150 icônes donne son allure à l’app.
J’ai créé les icônes de l’app par génération d’images avec l’IA et je les ai toutes tenues au même rendu : émail orange brillant, chrome brossé et verre noir, une seule lumière douce venue d’en haut, la même vue de trois quarts et une ombre douce sous chaque objet. L’or, l’argent et le bronze signalent le rang et la récompense — médailles, pièces, étoiles, couronnes, trophées —, pour qu’un prix ressemble à un prix sur chaque écran.
L’ensemble fonctionne comme une grammaire : un objet de base reçoit un petit badge selon son état. Un portefeuille reçoit une flèche entrante ou sortante, une coche, une alerte, un cadenas ou une corbeille ; un lien de défi reçoit une flèche pour le partager, des épées pour un duel, un sablier tant qu’il attend et une croix quand il échoue ; un engrenage transforme une cloche, un joueur ou un bouclier en ses réglages. L’ensemble a commencé par une planche de 53 icônes, puis s’est enrichi de 97 autres, environ sept à la fois, à mesure que chaque parcours en avait besoin — et les rangées plus tardives s’alignent sur les premières sans couture.
L’IA a dessiné chaque icône ; une seule direction artistique fait des 150 une famille.
Figure 07Ma diapositive Visual Assets : dix-huit des 150 icônes sur la scène de l’arène.
Ce qui fait de 150 icônes une seule famille
01
MatièresTrois surfaces pour presque tout ; le métal signale le rang et la récompense.
Émail orange brillant
Chrome brossé
Verre noir
Or, argent et bronze pour rang et récompense
02
FormeDes volumes doux et trapus, lisibles même à la taille de la barre d’onglets.
Arêtes arrondies et biseautées
Une silhouette nette par objet
Symboles en chrome en relief sur noir
03
Lumière et angleChaque objet est éclairé et vu de la même façon.
La coque de l’app : accueil, jeux, portefeuille, joueur et lecture — la rangée du haut redessine plus tard celle du dessous —, puis chat, un micro, alertes, réglages, recherche et les commandes entre les écrans.
Rangs et récompenses : paliers or, argent et bronze, étoiles, un diamant, trophées, couronnes, écussons de rang, badges de score, deux podiums et trois socles de présentation.
L’argent : un portefeuille pour chaque état, des billets, des pièces converties en USDT et les publicités qui rapportent.
09Tous les écrans
160 écrans, cas limites compris
Tous les écrans de la page App du fichier Figma, exportés le 26 septembre 2026 à une largeur de téléphone de 390 pixels et regroupés par parcours, de la connexion aux systèmes d’animation. Un écran que le fichier répète n’apparaît qu’une fois : Team Battle reprend vingt et un des écrans du duel, si bien que son onglet ne contient que les cinq qui lui sont propres. Les QR codes d’exemple et l’adresse e-mail de la connexion sont pixellisés.
Les cas limites sont dessinés, pas sous-entendus : un code e-mail erroné, un ami qui ne peut pas couvrir la mise, un lien de défi expiré, une liste de notifications vide, une confirmation avant de supprimer le compte. Les quatre modes à ticket — Solo Challenge, Tournaments, Today’s Spotlight et Weekly Legend — partagent une même entrée : acheter un ticket ou, faute de solde suffisant, regarder une publicité ou faire un dépôt. Les trois modes limités dans le temps partagent aussi un même dénouement, de la fin de partie au rang final.
10Résultats
Ce qui est sorti de cette phase
RP1 n’est pas encore lancé — il n’y a pas encore de métrique de produit livré à présenter, et cette étude de cas ne prétend pas le contraire.
Un périmètre MVP entièrement tranché
Navigation à trois onglets, un club unique et une économie uniquement en USDT.
Livrable · Périmètre MVP de RP1 et journal de résolution des conflits
Un catalogue de build de 34 composants
9 réutilisés, 25 entièrement nouveaux, ordonnés selon un ordre de build sur 3 semaines.
Livrable · Catalogue de build de RP1
Une spécification de wireframes couvrant les 16 sections
Chacune avec un audit des textes écran par écran et un journal des problèmes P1/P2/P3 ; 73 écrans exportés.
Livrable · Figma — fichier Game Design
Un outil Octalysis interactif et réutilisable
Audit des 8 drives, graphique radar, constructeurs de parcours et de boucles, checklist éthique — en anglais et en persan.
Livrable · html5-game-gamification-system (React)
Ce qui a été livré
↳Onboarding, hub de jeux, Today Spotlight, Weekly Legend, Duel, Lucky Wheel, chat, notifications, portefeuille, profil et réglages — en wireframes
↳Trois systèmes d’animation : entrée dans le profil, montée de niveau en six images clés, dix overlays d’événements
↳Un unique motif réutilisable de Feed Card qui porte l’onglet Club
11Ce que j’ai appris
Ce que j’ai appris
01
Un journal daté de résolution des conflits vaut mieux que des réécritures silencieuses
Renommer Duel, Tournament et Rumble, ou marquer formellement une ancienne spécification comme remplacée, a permis à toute l’équipe de travailler sur la même vérité à jour au lieu de débattre à partir de documents périmés.
02
Même un projet bien documenté dérive
Le parcours du portefeuille mentionne BNB Smart Chain (BEP-20) dans la documentation la plus récente, liée à Figma, alors qu’un brouillon antérieur indique TRC-20/ERC-20. Considérer comme canonique la source la plus récente et recoupée est la bonne décision — et un rappel que seule une relecture complète fait apparaître les petites dérives.
Boucles de mécaniquesCréation de valeur, engagement, rétention du club
04
Recadrage du MVPJournal daté de résolution des conflits
05
Audit de réutilisation des composants20 composants classés, une liste de 18 lacunes
06
Passe de wireframes16 sections, audit de copy, journal d’anomalies P1–P3
L3
Entrer en compétition
L4
Le résultat arrive dans le filVictoire, quasi-victoire, montée de niveau, résumé quotidien
revient à L1 · Ouvrir le club
↺revient à L1 · Ouvrir le club
02
Renommer les formats : Duel, Tournament, Rumble.
Trois noms simples ont remplacé l’ancien schéma, tranchés dans le journal daté de résolution des conflits plutôt que par une réécriture silencieuse, pour que toute l’équipe travaille avec une seule nomenclature à jour.
Alternatives
Conserver « PVP / Public Battle / Family & Friends Battle ».
Preuves
Consigné dans le journal de résolution des conflits du projet.
03
Faire de l’analyse Octalysis un instrument de notation vivant.
Plutôt que de rédiger l’analyse du framework sous forme de document, un petit outil React interactif en a fait un instrument de travail — un audit des 8 drives, un graphique radar octogonal, des constructeurs de phases de parcours et de boucles d’engagement et une checklist éthique —, en anglais et en persan.
Compromis
Du temps consacré à l’outillage plutôt qu’à davantage d’écrans ; l’outil est désormais un artefact réutilisable, indépendant de RP1.
Preuves
Chaque mécanique notée selon l’équilibre White-Hat / Black-Hat du framework.
04
Marquer l’ancienne spécification communautaire comme remplacée au lieu de la substituer en silence.
Marquer formellement l’ancien brouillon communautaire comme remplacé par la spécification canonique du jeu et de la communauté rédigée par le collaborateur a permis à toute l’équipe de travailler sur la même vérité à jour, au lieu de débattre à partir de documents périmés.
Compromis
Le brouillon remplacé était le mien.
Preuves
Consigné dans le journal de résolution des conflits.
Figure 02Le parcours du duel : choisir un adversaire — un ami ou un inconnu de niveau équivalent —, puis un joueur, un format (limité dans le temps ou course à l’objectif) et la mise.
Figure 03Today’s Spotlight après une partie : la feuille de quasi-victoire indique les points qui manquent pour le rang suivant tant que le ticket est encore actif ; la première place promet une notification si quelqu’un la prend ; à la fin du Spotlight, le rang final et l’heure de départ du lendemain.
Figure 05Trois des six images clés de l’animation de montée de niveau : l’avatar du profil laisse place au numéro du nouveau niveau.
Une lumière douce venue d’en haut
Vue de trois quarts, un peu en plongée
Une ombre douce sous chaque objet
04
GrammaireUn objet de base plus un petit badge pour son état.
Engrenage : ses réglages
Coche, alerte ou croix : le résultat
Sablier : en attente
Cadenas ou corbeille : verrouillé, supprimé
Plus : ajouter
05
LivraisonDes fichiers maîtres qui se posent sur n’importe quelle carte de l’app.
Maîtres de 1024 px
Fond transparent
Chaque objet, environ deux tiers du canevas
Joueurs et amis : un cadre de profil et son statut, amis et équipes, deux joueurs face à face, et un lien de défi dans chacun de ses états.
Figure 08Deux familles sur six : le même émail, le même chrome et la même lumière sur un bouton d’accueil et sur un lien de défi expiré.
Compétition : épées et badges de combat, tickets, la Lucky Wheel et ses tours, chronomètres, sabliers, cibles et tableaux de tournoi.
Figure 09L’or, l’argent et le bronze portent les rangs ; l’orange et le chrome portent le jeu.
Réglages et sécurité : un engrenage sur chaque chose qu’il règle, sécurité et confidentialité, aide, assistance, déconnexion et lieux.
Figure 10Objet de base plus badge : le portefeuille et l’engrenage font l’essentiel de ces deux familles.
Figure 11Tous les écrans de l’app, parcours par parcours, à la largeur d’un téléphone ; ouvrez un écran pour le voir en entier.
↳Une famille de 150 icônes 3D créées avec l’IA, qui donne à chaque écran la même allure
