Built to
repeat.
I took a lot from my time at Flutter Entertainment. One thing that stuck was how a team with a shared process moves differently to one without. When I joined JD Sports, that structure wasn’t there.
I built this framework from scratch and introduced it to the team. Over three years, more than ten designers worked to it across every major project.
It isn’t unique to JD Sports. It travels.
Free Figma file. Duplicate it and make it yours.
Designers used it
In use at JD Sports
Stages, with a check at each
Five stages.
Pick a stage to see how it works.
Start with the right problem
Every project starts with a structured kickoff. Not a brief review, but a deliberate alignment exercise. The template opens with questions the team works through together: what problem are we actually solving, who owns what, what does success look like, and which constraints are non-negotiable from the start.
The goal is to surface misalignment before it gets expensive. Assumptions that go unchecked at kickoff tend to become blockers mid-sprint. A good kickoff removes the friction that would have slowed things down later.
Ground it in reality
Before any UX work starts, the template requires a research gate. That doesn’t always mean commissioning new research. It means making a deliberate decision about what evidence the design will rest on.
- CommissionNew research is needed. The problem is poorly understood, user behaviour is assumed, or the stakes are high enough to warrant it.
- ParticipateResearch is already running. The designer joins sessions, reviews findings and feeds insights straight into the design.
- ValidateExisting research is available. Review it, challenge it, and find the gaps before moving on.
Skipping this stage doesn’t save time. It moves the risk into later phases, where changing course costs more.
The thinking layer
The UX stage is where the thinking happens, before visuals. The template covers journey mapping, user flows, information architecture and competitive analysis. This is the layer that decides whether a design solves the right problem, not just whether it looks like it does.
Jumping to UI before the UX is solid is one of the most common sources of rework in product design. The template makes the order explicit, so the team isn’t pressured into skipping it.
Make it real
Visual design and prototyping follow once the UX direction is validated. Every JD Sports project was built on a shared design system, and this is the stage where that system gets applied, extended or stress-tested against new use cases.
Prototypes are built to the fidelity the decision needs, no higher. High fidelity for stakeholder alignment. Lower fidelity for early directional feedback. The template makes that choice explicit rather than leaving it to instinct.
The reasoning is the work
The final stage covers testing, handoff and documentation. Testing is scoped to the decisions still open: not a full usability pass on everything, but a targeted look at the parts of the design that carry the most risk.
Design reasoning is documented alongside the output. Not a description of what was built, but why: what was considered, what was rejected, and what the design is built for. It protects decisions in review, and gives engineering and product the context they need when edge cases appear.
Accessibility is a thread, not a checkpoint.
Accessibility wasn’t part of the original template. I noticed designs were regularly failing accessibility standards at review, too late to fix without significant rework. So I added checks at every stage, catching issues as the work progressed rather than at the end.
JD Sports has since hired a dedicated accessibility specialist. The checks are still there. They now sit alongside specialist review rather than standing in for it.
Use it with AI.
The prompts and Claude skills in my Designing with AI book follow these same five stages, from a kickoff brief to a handover spec. Use the file for the structure and the prompts to move through it faster.
Consistent process isn’t a constraint on creative work. It’s what makes creative work defensible.
Built to Repeat
The Figma source file. Duplicate it, adapt it, make it yours.