(01) — What is included
What a product engagement contains
- Discovery and user research Interviews, support tickets, the analytics nobody reads. I want the friction you have already paid for, not the friction we imagine in a room.
- Information architecture What content exists, how it groups and what it is called. Half of every "I can't find anything" problem is solved here, before anything is drawn.
- User flows Every path end to end, with its branches, its errors and its way back. Including the paths nobody wants to draw.
- Wireframes and prototypes Cheap, ugly and fast first, so the expensive decisions get made while they are still free. Then a prototype that actually clicks.
- Interface design (UI) Type scale, colour, grid, density, states. The final screen, and also the four unglamorous screens that come with it.
- Design systems Colour and type tokens, a component library with every state written down, and documentation a team of eight can use without asking me.
- Usability testing Five people, real tasks, a report with the fixes ordered by effort. No invented percentages.
- Accessibility, from day one WCAG 2.2 AA review: contrast, keyboard paths, screen readers. A requirement, not a final phase.
(02) — How it goes
Five steps, always in this order
No two projects are the same, but the sequence is. Skipping a step is where budgets go to die.
- 01
Listen
To whoever decides, to support, to the analytics. I come out with the list of frictions already costing you money.
- 02
Frame
One page: the problem, who has it, and what "solved" will look like. Everything after that points there.
- 03
Draw
Flows first, pixels after. Wireframes, prototype, and the expensive decisions taken while they are still free.
- 04
Build
Real HTML in a real browser with real data. A prototype that lies about performance is not a prototype.
- 05
Hand over
Tokens, components and the reasoning in writing. You should not need me to carry on.
(03) — The proof
Six product cases, opened up
See the whole discipline ↗Every case tells what it started from, what was decided and what came out — including the decisions I would take differently today.
(04) — The tools
What it gets made with
- Figma
- Wireframes, interface, clickable prototype, component library and variables. It is where the system lives and where your team reviews it.
- Adobe XD
- Legacy projects that still live there; I migrate them to Figma when it makes sense and maintain them where they are when it does not.
- HTML · CSS · JS
- Prototypes in the browser when motion, performance or real copy is what decides the design.
- Angular · React
- When the engagement runs all the way to implementation, I build it myself.
- AI
- Research synthesis, fast variants and code scaffolding, with my own judgement on top. How I use it.
(FAQ) — Frequently asked
What people ask before hiring me
Does this fit what you need?
Tell me what you are building and I will tell you plainly whether I am the right person for it. I reply within one working day, Madrid time.
Let's talkLet's talk ↗