← All work

From problem to shipped UI

  • Process
  • Design systems

How I take a feature from a one-line request to polished, measurable UI at Gameloft. The product is under NDA, so this page shows how I work.

Illustrative overview of my feature design process at Gameloft
01

Overview

At Gameloft I own features end to end, from onboarding and menus to core gameplay UI. Requests often arrive as one line from stakeholders, so my first job is turning them into a clear problem with agreed success metrics. Then every feature follows the same path: frame, explore, decide, design, measure. It keeps the team aligned and ties each decision to an outcome.The product is under NDA, so all examples on this page are illustrative.

Role

Senior Product Designer

Platforms

Mobile, TV and desktop

Ownership

Problem framing to final UI

Status

In development, under NDA

02

In depth

The methods and tools I chose for this project. They change with every project, depending on what the problem needs.

Framing the problem

Every feature starts with a one-page brief:

  1. Objective
  2. Problem
  3. User stories
  4. Proposed direction
  5. Success metrics
  6. Validation tests
  7. Open questions
  8. Benchmarks

Agreeing on what success looks like before designing turns “make it better” into a target the whole team can work toward.

Illustrative one-page feature brief

Exploring trade-offs

I explore two to four directions, each with pros and cons, a hierarchy map, the flow and key screens. Putting options side by side surfaces the real trade-offs early:

  • Player value
  • Complexity
  • Engineering effort
  • Scaling across touch, controller and keyboard
Illustrative comparison of design directions with pros and cons

Deciding with the team

One or two directions go to full wireframed flows, with a table comparing what each one achieves against the brief's objectives.

Stakeholders decide on evidence instead of taste.

The decision is documented so it can be revisited when data comes in.

Illustrative decision table comparing wireframed flows against objectives

Designing the final UI

On the design system

Final screens are built on a design system I’m growing from a wireframe kit into a full UI component library.

Ready for engineering

Flows are numbered so each step maps directly to an engineering task, which keeps the handoff clean and what ships faithful to the design.

Illustrative final UI screen with numbered steps, next to its component sheet

Measuring what matters

I start from research on learning and attention, then validate decisions in the product with behavioral metrics. For example, when stats risked overloading players, I proposed collapsing them behind a toggle and tracking how often players expand them:

Players open them
They stay
Players ignore them
The product gets simpler
Illustrative behavioral metric: expand rate of collapsed stats

Moving faster with AI

Each stage runs through a reusable Claude Skill that encodes the template, the key questions and the quality bar.

  1. BriefProblem and metrics
  2. Ideation2–4 directions
  3. DecisionFlows vs objectives
  4. Final UIOn the design system

Feeding the component library to Claude lets me generate on-system prototypes in minutes, so I can test more ideas without drifting from the design system.

Illustrative four-stage process, each stage run through a Claude Skill
03

Insights

Key takeaways from the project.

  • The most valuable design work happens before the first screen: a well-framed problem saves more time than a fast designer.
  • Writing success metrics into the brief changes the question from “do we like it?” to “will this move the number?”
  • Simplicity can be tested. Instrumenting optional information turns a design debate into a product decision.
  • AI is most useful when it encodes a method, not when it replaces one.