← Todos los proyectos

Del problema a la UI publicada

  • Proceso
  • Sistemas de diseño

Cómo llevo una funcionalidad de una petición de una línea a una UI pulida y medible en Gameloft. El producto está bajo NDA, así que esta página muestra cómo trabajo.

Resumen ilustrativo de mi proceso de diseño de funcionalidades en Gameloft
01

Resumen

En Gameloft me encargo de las funcionalidades de principio a fin, del onboarding y los menús a la UI principal del juego. Las peticiones suelen llegar en una línea de parte de los stakeholders, así que mi primer trabajo es convertirlas en un problema claro con métricas de éxito acordadas. Después, cada funcionalidad sigue el mismo camino: definir, explorar, decidir, diseñar, medir. Así el equipo va alineado y cada decisión se vincula a un resultado.El producto está bajo NDA, así que todos los ejemplos de esta página son ilustrativos.

Rol

Senior Product Designer

Plataformas

Móvil, TV y escritorio

Responsabilidad

De la definición del problema a la UI final

Estado

En desarrollo, bajo NDA

02

En detalle

Los métodos y herramientas que elegí para este proyecto. Cambian en cada proyecto, según lo que necesite el problema.

Definir el problema

Cada funcionalidad empieza con un brief de una página:

  1. Objetivo
  2. Problema
  3. Historias de usuario
  4. Dirección propuesta
  5. Métricas de éxito
  6. Tests de validación
  7. Preguntas abiertas
  8. Benchmarks

Acordar qué es el éxito antes de diseñar convierte «mejóralo» en un objetivo hacia el que puede trabajar todo el equipo.

Brief ilustrativo de una página para una funcionalidad

Explorar los trade-offs

Exploro de dos a cuatro direcciones, cada una con pros y contras, un mapa de jerarquía, el flujo y las pantallas clave. Ponerlas una al lado de otra saca a la luz pronto los trade-offs reales:

  • Valor para el jugador
  • Complejidad
  • Esfuerzo de desarrollo
  • Escalar a táctil, mando y teclado
Comparación ilustrativa de direcciones de diseño con pros y contras

Decidir con el equipo

Una o dos direcciones pasan a flujos completos en wireframe, con una tabla que compara lo que consigue cada una frente a los objetivos del brief.

Los stakeholders deciden con evidencias, no por gusto.

La decisión queda documentada para poder revisarla cuando lleguen los datos.

Tabla de decisión ilustrativa que compara flujos en wireframe con los objetivos

Diseñar la UI final

Sobre el sistema de diseño

Las pantallas finales se construyen sobre un sistema de diseño que estoy haciendo crecer de un kit de wireframes a una librería completa de componentes de UI.

Listo para desarrollo

Los flujos van numerados para que cada paso corresponda a una tarea de desarrollo, lo que mantiene limpio el handoff y hace que lo que se publica sea fiel al diseño.

Pantalla final de UI ilustrativa con pasos numerados, junto a su hoja de componentes

Medir lo que importa

Parto de la investigación sobre aprendizaje y atención, y después valido las decisiones en el producto con métricas de comportamiento. Por ejemplo, cuando las estadísticas amenazaban con saturar a los jugadores, propuse plegarlas tras un interruptor y medir con qué frecuencia los jugadores las despliegan:

Los jugadores las abren
Se quedan
Los jugadores las ignoran
El producto se simplifica
Métrica de comportamiento ilustrativa: tasa de despliegue de las estadísticas plegadas

Más rápido con IA

Cada fase pasa por una Claude Skill reutilizable que recoge la plantilla, las preguntas clave y el listón de calidad.

  1. BriefProblema y métricas
  2. Ideación2–4 direcciones
  3. DecisiónFlujos vs. objetivos
  4. UI finalSobre el sistema de diseño

Darle la librería de componentes a Claude me permite generar prototipos dentro del sistema en minutos, así que puedo probar más ideas sin salirme del sistema de diseño.

Proceso ilustrativo en cuatro fases, cada una con una Claude Skill
03

Aprendizajes

Lo más importante que me llevo del proyecto.

  • El trabajo de diseño más valioso ocurre antes de la primera pantalla: un problema bien planteado ahorra más tiempo que un diseñador rápido.
  • Escribir las métricas de éxito en el brief cambia la pregunta de «¿nos gusta?» a «¿esto moverá el número?».
  • La simplicidad se puede testear. Medir la información opcional convierte un debate de diseño en una decisión de producto.
  • La IA es más útil cuando recoge un método, no cuando lo sustituye.