Cómo Rediseñé la Tienda del Lobby con Ayuda de la IA (y por qué los frameworks marcaron la diferencia)

Cuando empezamos a construir la tienda del lobby, la idea era sencilla:
un practicante armó la primera versión para que los jugadores pudieran comprar unidades antes de entrar al juego. Y, para ser justos, funcionaba: comprabas algo y el dinero se descontaba.

Pero apenas la vi en funcionamiento, noté varias cosas que no se sentían bien:

  • ocupaba demasiado espacio,
  • no estaba pensada para móvil,
  • no comunicaba claramente “de qué trataba” la interfaz,
  • y visualmente era más un bloque enorme de funciones que una experiencia usable.

Funcionaba, sí, pero no se entendía.

La primera version de la Tienda
La Primera Versión de la Tienda

Cuando la IA no ayudaba (y por qué decidí pedirle algo distinto)

Mi primer impulso fue el típico:
“IA, qué puedo mejorar?”

Aplique una idea inicial que era ver laspropuedades de las unidades. Logramos sacar una idea inicial basica:

Y me devolvía cosas muy técnicas:
“optimiza layout”, “usa componentes más limpios”, “aplica grid”, etc.

No era lo que necesitaba.
Yo buscaba ideas nuevas, no tecnicismos.

Entonces cambié completamente el enfoque pensando en lo que hariamos si fuera un experto del tema, usar Frameworks para validar mi trabajo:

“No solo actúa como experto en UX.
Usa frameworks reales para validar cada sugerencia.”

Esa frase cambió toda la conversación.

La IA usando frameworks fue otra cosa

Cuando empezó a pasar la interfaz por frameworks como Gestalt, Hick, Nielsen, etc., el análisis se volvió útil de verdad.

La IA me sugirio varias ideas interesantes:

  • Mover la Tienda a un Tab ( entre otras sugerencias como usar Accordeones
  • Colocar la info de las unidades para saber de que trata la Unidad.
  • Añadir las Acciones tambien y el costo de las unidades.

Gestalt también ayudó mucho a ordenar espaciados y relaciones entre elementos.

Despues del resultado pedi otra iteración mas, ya no tanto en lo visual si no en la utilidad. Y vino con una idea grandiosa: Hacer comparativos de los Stats con respecto a las demas unidades. Esto permitira al jugador ver en que es bueno o malo la unidad actual, y fue genial, saco promedios, hizo sus calculos, todo basado en la data actual que trabajamos. Me envio esto:

Fue un gran inicio, aunque vi cosas que se podian mejorar:
la IA generaba espacios vacíos que no me convencían, o distribuciones que ocupaban mucho espacio horizontal.

Dónde intervino mi propio criterio

Aunque la IA ayudó muchísimo, hubo decisiones que solo podían venir de mí:

  • Optimizar el espacio vacio que dejaban ciertos bloques muy anchos.
  • Simplificar la paleta de colores para que sea mas sencillo de trabajar.
  • Mejorar la parte de los Stats de Combate, hay basicamente dos caminos que tenemos los stats de Fuerza y los stats de Psy. Los agrupamos mejor para que sean mas faciles de comprender como idea!.

La IA daba lineamientos, pero el diseño final necesitaba el toque humano:
recortar, simplificar, ajustar proporciones, encontrar armonía.

Qué tiene la tienda ahora que antes no tenía

La diferencia práctica es grande:

  • Cuando seleccionas una unidad, no solo ves sus stats:
    puedes compararlos con los demás inmediatamente.
  • Las animaciones ayudan a entender qué sube o baja visualmente.
  • El uso del espacio es más limpio.
  • Todo comunica mejor lo que está pasando.
  • La interfaz ya no es solo un “listado”: tiene intención.

La tienda ahora cumple su rol:
te ayuda a elegir mejor tu apertura de partida.

El mayor aprendizaje

Que no basta con decirle a la IA:

“piensa como experto”.

Eso es demasiado abierto.

Lo que realmente funciona es obligarla a validar sus ideas:

  • según frameworks,
  • según metodología,
  • comparando alternativas,
  • justificando por qué algo funciona mejor.

La comparación y la estructura le hacen bien a la IA,
y al final también nos hacen bien a nosotros como devs.