← Tots els projectes

Del problema a la UI publicada

  • Procés
  • Sistemes de disseny

Com porto una funcionalitat d’una petició d’una línia a una UI polida i mesurable a Gameloft. El producte està sota NDA, així que aquesta pàgina mostra com treballo.

Resum il·lustratiu del meu procés de disseny de funcionalitats a Gameloft
01

Resum

A Gameloft m’encarrego de les funcionalitats de principi a fi, de l’onboarding i els menús a la UI principal del joc. Les peticions solen arribar en una línia de part dels stakeholders, així que la meva primera feina és convertir-les en un problema clar amb mètriques d’èxit acordades. Després, cada funcionalitat segueix el mateix camí: definir, explorar, decidir, dissenyar, mesurar. Així l’equip va alineat i cada decisió es vincula a un resultat.El producte està sota NDA, així que tots els exemples d’aquesta pàgina són il·lustratius.

Rol

Senior Product Designer

Plataformes

Mòbil, TV i escriptori

Responsabilitat

De la definició del problema a la UI final

Estat

En desenvolupament, sota NDA

02

En detall

Els mètodes i les eines que vaig triar per a aquest projecte. Canvien a cada projecte, segons el que necessiti el problema.

Definir el problema

Cada funcionalitat comença amb un brief d’una pàgina:

  1. Objectiu
  2. Problema
  3. Històries d’usuari
  4. Direcció proposada
  5. Mètriques d’èxit
  6. Tests de validació
  7. Preguntes obertes
  8. Benchmarks

Acordar què és l’èxit abans de dissenyar converteix «millora-ho» en un objectiu cap al qual pot treballar tot l’equip.

Brief il·lustratiu d’una pàgina per a una funcionalitat

Explorar els trade-offs

Exploro de dues a quatre direccions, cadascuna amb pros i contres, un mapa de jerarquia, el flux i les pantalles clau. Posar-les una al costat de l’altra fa aflorar aviat els trade-offs reals:

  • Valor per al jugador
  • Complexitat
  • Esforç de desenvolupament
  • Escalar a tàctil, comandament i teclat
Comparació il·lustrativa de direccions de disseny amb pros i contres

Decidir amb l’equip

Una o dues direccions passen a fluxos complets en wireframe, amb una taula que compara el que aconsegueix cadascuna davant dels objectius del brief.

Els stakeholders decideixen amb evidències, no per gust.

La decisió queda documentada per poder-la revisar quan arribin les dades.

Taula de decisió il·lustrativa que compara fluxos en wireframe amb els objectius

Dissenyar la UI final

Sobre el sistema de disseny

Les pantalles finals es construeixen sobre un sistema de disseny que estic fent créixer d’un kit de wireframes a una llibreria completa de components d’UI.

A punt per a desenvolupament

Els fluxos van numerats perquè cada pas correspongui a una tasca de desenvolupament, cosa que manté net el handoff i fa que el que es publica sigui fidel al disseny.

Pantalla final d’UI il·lustrativa amb passos numerats, al costat del seu full de components

Mesurar el que importa

Parteixo de la recerca sobre aprenentatge i atenció, i després valido les decisions en el producte amb mètriques de comportament. Per exemple, quan les estadístiques amenaçaven de saturar els jugadors, vaig proposar plegar-les darrere d’un interruptor i mesurar amb quina freqüència els jugadors les despleguen:

Els jugadors les obren
Es queden
Els jugadors les ignoren
El producte se simplifica
Mètrica de comportament il·lustrativa: taxa de desplegament de les estadístiques plegades

Més ràpid amb IA

Cada fase passa per una Claude Skill reutilitzable que recull la plantilla, les preguntes clau i el llistó de qualitat.

  1. BriefProblema i mètriques
  2. Ideació2–4 direccions
  3. DecisióFluxos vs. objectius
  4. UI finalSobre el sistema de disseny

Donar la llibreria de components a Claude em permet generar prototips dins del sistema en minuts, així que puc provar més idees sense sortir-me del sistema de disseny.

Procés il·lustratiu en quatre fases, cadascuna amb una Claude Skill
03

Aprenentatges

El més important que m’enduc del projecte.

  • La feina de disseny més valuosa passa abans de la primera pantalla: un problema ben plantejat estalvia més temps que un dissenyador ràpid.
  • Escriure les mètriques d’èxit al brief canvia la pregunta de «ens agrada?» a «això mourà el número?».
  • La simplicitat es pot testar. Mesurar la informació opcional converteix un debat de disseny en una decisió de producte.
  • La IA és més útil quan recull un mètode, no quan el substitueix.