Una arena play-to-earn multijuego, especificada de principio a fin —de la investigación con Octalysis a wireframes de 16 secciones—, aún sin lanzar.
Empresa
Independiente
Rol
Diseñador de producto y estratega
Período
2026
Tipo
Producto
Sector
Gaming · play-to-earn
Equipo
Un product owner, un colaborador en la especificación del juego y la comunidad, y Sina como líder de diseño de producto y estrategia
Estado
Prelanzamiento
Herramientas
Figma
React
El problema
Los juegos casuales en HTML5 rara vez tienen una capa competitiva o de monetización duradera, y las plataformas que la añaden suelen parecer ante todo productos de casino.
El rol
Líder de diseño de producto y estrategia: la investigación de gamificación, el alcance del MVP y la especificación completa de wireframes en 16 secciones, junto a un product owner y un colaborador de especificación.
El resultado
Un alcance del MVP totalmente resuelto, un catálogo de construcción de 34 componentes con un orden de construcción de 3 semanas y una herramienta interactiva de Octalysis reutilizable; aún sin lanzar, así que todavía no hay métricas de producto.
Figura 01
Figura 01Tres de las 73 pantallas exportadas: un desafío a duelo, Today’s Spotlight y la clasificación Weekly Legend.
01Contexto
Muchos juegos pequeños, una sola capa competitiva y económica.
RP1 —ReadyPlayerOne en la documentación del propio proyecto— es una arena mobile-first que reúne juegos arcade ligeros en HTML5 —Flappy Bird, Snake, Temple Run, Subway Surf y otros— bajo una sola capa competitiva y económica: competiciones diarias y semanales por clasificación, duelos 1 contra 1 con apuesta y torneos con acceso por ticket, todo liquidado en USDT a través de un monedero on-chain (BNB Smart Chain, BEP-20).
No se presenta como una red social: la propia documentación del proyecto lo llama un «motor de visibilidad competitiva». Los referentes que aparecen a lo largo de la investigación son Skillz, MPL, WinZO, Kongregate y Plato.
No una red social: un motor de visibilidad competitiva.
02Problema
Competitivo y gratificante sin convertirse en un casino.
Los juegos casuales en HTML5 abundan, pero rara vez tienen una capa competitiva o de monetización duradera, y las plataformas que sí la añaden, en el crypto-gaming y el play-to-earn, suelen parecer primero productos de casino y después juegos.
RP1 se propuso diseñar un sistema que se sintiera de verdad competitivo y gratificante sin caer en mecánicas abusivas: cada mecánica se puntuó según el equilibrio White-Hat / Black-Hat del framework Octalysis.
La app de ESPN, no Stake.com: di que un jugador «obtuvo» un premio, nunca que «ganó a lo grande» o que se llevó el «jackpot».
03Restricciones
Una economía solo en USDT, un lienzo mobile-first y un conjunto de componentes con huecos.
Liquidación solo en USDT, en BNB Smart Chain (BEP-20), sin token de utilidad.
Mobile-first: una sola app, con la navegación fijada en tres pestañas.
Un conjunto de componentes existente con una lista de 18 carencias: sin tokens de color ni de tipografía, sin especificación de movimiento y con un sistema de avatares sin definir.
Una guía de tono que descartaba el lenguaje de casino.
04Mi rol
Investigación, alcance y la especificación, junto a un product owner.
Líder de diseño de producto y estrategia, junto a un product owner designado y a un colaborador que redactó la especificación de juego y comunidad de la etapa posterior del proyecto.
Responsable
↳Investigación de gamificación: Octalysis en sus 8 core drives, convertido en una herramienta de puntuación interactiva en inglés y persa
↳Definición del alcance del MVP: navegación de tres pestañas, un solo club y una economía solo en USDT
↳Decisiones documentadas en el registro de resolución de conflictos, incluida la nomenclatura Duel / Tournament / Rumble
↳La especificación completa de wireframes en las 16 secciones, cada una con su auditoría de copy por pantalla
Corresponsable
↳La dirección de producto, con el product owner
Colaboración
↳La especificación canónica de juego y comunidad, escrita por un colaborador; sustituyó mi borrador anterior de comunidad
05Enfoque
Primero la investigación, luego las mecánicas y después un recorte implacable.
Primero vino la investigación: un repaso amplio de más de 20 plataformas de juego competitivo y casual —Skillz, MPL, WinZO, Kongregate, mini-apps de Telegram y otras—, y después una inmersión en Octalysis lo bastante detallada como para convertirse en una herramienta de puntuación interactiva: una auditoría de 8 drives, un gráfico de radar octogonal, constructores de fases del recorrido y de bucles de engagement, y una lista de verificación ética.
A partir de ahí llegó el diseño de mecánicas, con tres sistemas mapeados: un bucle de creación de valor (cómo un jugador con poco saldo se gana la vuelta), un bucle de engagement (torneo, duelo o tienda del club como opciones para un jugador con fondos) y un bucle de retención del club con una máquina de estados formal.
Después llegó el recorte del MVP, registrado en un registro fechado de resolución de conflictos en lugar de quedar como reescrituras silenciosas. Una auditoría de reutilización de 20 componentes, ordenada por puntuación de reutilización, alimentó una pasada completa de wireframes por las 16 secciones, cada una con su propia auditoría de copy por pantalla y un registro de incidencias P1/P2/P3.
Seis pasadas, en orden
01
Investigación de plataformasMás de 20 plataformas de juego competitivo y casual
02
Auditoría Octalysis8 core drives → una herramienta de puntuación interactiva
El bucle de retención del club
L1
Abrir el club
L2
Ver una oportunidad
06Decisiones clave
Cuatro decisiones que dieron forma al MVP
Anotadas en el registro fechado de resolución de conflictos del proyecto, no decididas de pasada.
01
Fijar la navegación en tres pestañas: Club, Game, Wallet.
Una visión anterior, mucho más amplia —un token de utilidad, apuestas dentro de la app, clubes propiedad de los jugadores y tiendas de club—, se redujo a un producto solo en USDT y con un único club.
Alternativas
La visión anterior: un token de utilidad, apuestas dentro de la app, clubes propiedad de los jugadores y tiendas de club.
Compromiso
Una economía más pequeña —un club, sin tiendas de club, sin token— a cambio de un alcance que pudiera resolverse por completo.
Evidencia
Un alcance del MVP totalmente resuelto y un catálogo de construcción de 34 componentes (9 reutilizados, 25 nuevos) con un orden de construcción de 3 semanas.
07Solución
Una app, tres pestañas, cada sección en wireframe.
La especificación cubre toda la app: onboarding con Google, Apple o correo electrónico y verificación OTP; un hub de juegos que reúne Solo Challenge, Duel, Team Battle y Tournaments; Today Spotlight, una competición diaria de un solo juego con entrada por ticket y clasificación en directo; Weekly Legend, una competición de 7 días entre juegos; Lucky Wheel; chat; notificaciones como tarjetas transaccionales enriquecidas; una billetera solo en USDT con desglose de ganancias; un perfil con logros y una hoja de ruta al estilo XP; y ajustes.
La navegación queda fijada en tres pestañas —Club, Game, Wallet— y un único patrón reutilizable de Feed Card (anuncio de victoria, torneo que empieza, casi victoria, subida de nivel, resumen diario) sostiene la pestaña Club. Tres sistemas de animación completan la especificación: una secuencia de entrada al perfil, una subida de nivel en seis fotogramas clave y diez overlays basados en eventos.
01Saldo total en USDT — la única moneda de la app
02Retirar y depositar
03Ganancias desglosadas por origen: anuncios, referidos, depósito, batalla
04La billetera on-chain y el envío de dinero
05Saldos disponible, en juego y pendiente
Figura 04La billetera: una sola moneda, todas las fuentes de ganancias a la vista y los fondos bloqueados en juego mostrados aparte.
Figura 06Las notificaciones son tarjetas transaccionales —depósito, retiro, premio, resultados de duelos y de Rumble—, cada una con sus propias acciones.
08Iconografía
Una familia de 150 iconos le da a la app su aspecto.
Hice los iconos de la app con generación de imágenes por IA y mantuve cada uno en el mismo aspecto: esmalte naranja brillante, cromo cepillado y cristal negro, una sola luz suave desde arriba, la misma vista de tres cuartos y una sombra suave bajo cada objeto. El oro, la plata y el bronce marcan el rango y la recompensa —medallas, monedas, estrellas, coronas, trofeos— para que un premio parezca un premio en cualquier pantalla.
El conjunto funciona como una gramática: un objeto base lleva una pequeña insignia según su estado. Una billetera lleva una flecha de entrada o de salida, un visto, una advertencia, un candado o una papelera; un enlace de desafío lleva una flecha para compartirlo, espadas para un duelo, un reloj de arena mientras espera y una cruz cuando falla; un engranaje convierte una campana, un jugador o un escudo en sus ajustes. Empezó como una sola hoja de 53 iconos y creció con 97 más, unos siete cada vez, a medida que cada flujo necesitaba los suyos, y las filas posteriores encajan junto a las primeras sin costuras.
La IA dibujó cada icono; una sola dirección de arte hace de los 150 una familia.
Figura 07Mi diapositiva de Visual Assets: dieciocho de los 150 iconos sobre el escenario de la arena.
Lo que mantiene a 150 iconos como una familia
01
MaterialesTres superficies para casi todo; el metal marca el rango y la recompensa.
Esmalte naranja brillante
Cromo cepillado
Cristal negro
Oro, plata y bronce para rango y premio
02
FormaVolúmenes suaves y robustos que se leen incluso a tamaño de barra de pestañas.
Bordes redondeados y biselados
Una silueta clara por objeto
Símbolos en relieve de cromo sobre negro
03
Luz y vistaCada objeto se ilumina y se ve de la misma manera.
La estructura de la app: inicio, juegos, billetera, jugador y reproducir —la fila superior es un redibujo posterior de la de abajo—, y después chat, un micrófono, avisos, ajustes, búsqueda y los controles entre pantallas.
Rangos y recompensas: niveles de oro, plata y bronce, estrellas, un diamante, trofeos, coronas, escudos de rango, insignias de puntuación, dos podios y tres pedestales de exhibición.
Dinero: una billetera para cada estado, efectivo, monedas que se convierten en USDT y los anuncios que pagan.
09Todas las pantallas
160 pantallas, casos límite incluidos
Todas las pantallas de la página App del archivo de Figma, exportadas el 26 de septiembre de 2026 a un ancho de teléfono de 390 píxeles y agrupadas por flujo, desde el inicio de sesión hasta los sistemas de animación. Una pantalla que el archivo repite aparece una sola vez: Team Battle repite veintiuna de las pantallas del duelo, así que su pestaña reúne las cinco que son propias. Los códigos QR de ejemplo y la dirección de correo del inicio de sesión están pixelados.
Los casos límite están dibujados, no se dan por supuestos: un código de correo incorrecto, un amigo que no puede cubrir la apuesta, un enlace de reto caducado, una lista de notificaciones vacía, una confirmación antes de eliminar la cuenta. Los cuatro modos con ticket —Solo Challenge, Tournaments, Today’s Spotlight y Weekly Legend— comparten una misma entrada: comprar un ticket o, si falta saldo, ver un anuncio o depositar. Los tres con tiempo comparten además un mismo final, del fin de la partida a la clasificación final.
10Resultados
Lo que salió de esta fase
RP1 aún no se ha lanzado — todavía no hay ninguna métrica de producto publicado que reportar, y este caso de estudio no finge lo contrario.
Un alcance del MVP totalmente resuelto
Navegación de tres pestañas, un único club y una economía solo en USDT.
Entregable · Alcance del MVP de RP1 y registro de resolución de conflictos
Un catálogo de construcción de 34 componentes
9 reutilizados, 25 nuevos, ordenados en un plan de construcción de 3 semanas.
Entregable · Catálogo de construcción de RP1
Una especificación de wireframes para las 16 secciones
Cada una con una auditoría de textos por pantalla y un registro de incidencias P1/P2/P3; 73 pantallas exportadas.
Entregable · Figma — archivo Game Design
Una herramienta interactiva y reutilizable de Octalysis
Auditoría de 8 drives, gráfico de radar, constructores de recorridos y bucles, checklist ética — en inglés y persa.
↳Onboarding, hub de juegos, Today Spotlight, Weekly Legend, Duel, Lucky Wheel, chat, notificaciones, billetera, perfil y ajustes — en wireframe
↳Tres sistemas de animación: entrada al perfil, subida de nivel en seis fotogramas clave, diez overlays de eventos
↳Un único patrón reutilizable de Feed Card que sostiene la pestaña Club
11Lo que aprendí
Lo que aprendí
01
Un registro fechado de resolución de conflictos vale más que las reescrituras silenciosas
Renombrar Duel, Tournament y Rumble, o marcar formalmente una especificación anterior como sustituida, mantuvo a todo el equipo trabajando sobre la misma verdad vigente en lugar de discutir a partir de documentos desfasados.
02
Incluso un proyecto bien documentado se desvía
El flujo de la billetera cita BNB Smart Chain (BEP-20) en la documentación más reciente, vinculada a Figma, mientras que un borrador anterior dice TRC-20/ERC-20. Tratar como canónica la fuente más reciente y con referencias cruzadas es lo correcto — y un recordatorio de que solo una relectura completa saca a la luz las pequeñas desviaciones.
Bucles de mecánicasCreación de valor, engagement, retención del club
04
Recorte del MVPRegistro fechado de resolución de conflictos
05
Auditoría de reutilización de componentes20 componentes clasificados, una lista de 18 carencias
06
Pasada de wireframes16 secciones, auditoría de copy, registro de incidencias P1–P3
L3
Competir
L4
El resultado llega al feedVictoria, casi victoria, subida de nivel, resumen diario
vuelve a L1 · Abrir el club
↺vuelve a L1 · Abrir el club
02
Renombrar los formatos: Duel, Tournament, Rumble.
Tres nombres sencillos sustituyeron al esquema anterior, algo que se resolvió en el registro fechado de resolución de conflictos y no con una reescritura silenciosa, para que todo el equipo trabajara con una única nomenclatura vigente.
Alternativas
Mantener «PVP / Public Battle / Family & Friends Battle».
Evidencia
Consignado en el registro de resolución de conflictos del proyecto.
03
Convertir el análisis Octalysis en un instrumento de puntuación vivo.
En lugar de redactar el análisis del framework como un documento, una pequeña herramienta interactiva en React lo convirtió en un instrumento de trabajo —una auditoría de 8 drives, un gráfico de radar octogonal, constructores de fases del recorrido y de bucles de engagement y una checklist ética—, en inglés y persa.
Compromiso
Tiempo dedicado a herramientas en lugar de a más pantallas; la herramienta es hoy un artefacto reutilizable, independiente de RP1.
Evidencia
Cada mecánica puntuada según el equilibrio White-Hat / Black-Hat del framework.
04
Marcar la especificación de comunidad anterior como sustituida en lugar de reemplazarla en silencio.
Marcar formalmente el borrador de comunidad anterior como sustituido por la especificación canónica de juego y comunidad del colaborador mantuvo a todo el equipo trabajando sobre la misma verdad vigente, en lugar de discutir a partir de documentos desfasados.
Compromiso
El borrador sustituido era mío.
Evidencia
Consignado en el registro de resolución de conflictos.
Figura 02El flujo del duelo: elegir un rival —un amigo o un desconocido emparejado por nivel— y después un jugador, un formato (con límite de tiempo o carrera hasta un objetivo) y la apuesta.
Figura 03Today’s Spotlight tras una partida: la hoja de casi victoria muestra los puntos que faltan para el siguiente puesto mientras el ticket sigue activo; quien ocupa el primer puesto recibe la promesa de un aviso si alguien se lo arrebata; cuando termina el Spotlight, el puesto final y la hora de inicio de mañana.
Figura 05Tres de los seis fotogramas clave de la animación de subida de nivel: el avatar del perfil da paso al número del nuevo nivel.
Una luz suave desde arriba
Vista de tres cuartos, algo desde arriba
Una sombra suave bajo cada objeto
04
GramáticaUn objeto base más una pequeña insignia para su estado.
Engranaje: sus ajustes
Visto, advertencia o cruz: el resultado
Reloj de arena: en espera
Candado o papelera: bloqueado o borrado
Más: añadir
05
EntregaArchivos maestros que encajan en cualquier tarjeta de la app.
Maestros de 1024 px
Fondo transparente
Cada objeto, unos dos tercios del lienzo
Jugadores y amigos: un marco de perfil y su estado, amigos y equipos, dos jugadores frente a frente y un enlace de desafío en cada estado.
Figura 08Dos de seis familias: el mismo esmalte, cromo y luz en un botón de inicio y en un enlace de desafío caducado.
Competición: espadas e insignias de batalla, tickets, la Lucky Wheel y sus giros, cronómetros, relojes de arena, dianas y cuadros de torneo.
Figura 09El oro, la plata y el bronce llevan los rangos; el naranja y el cromo llevan el juego.
Ajustes y seguridad: un engranaje en cada cosa que ajusta, seguridad y privacidad, ayuda, soporte, cierre de sesión y lugares.
Figura 10Objeto base más insignia: la billetera y el engranaje sostienen casi todas estas dos familias.
Figura 11Todas las pantallas de la app, flujo a flujo, en ancho de teléfono; abra cualquiera para verla completa.
↳Una familia de 150 iconos 3D hechos con IA que da a cada pantalla un mismo aspecto
