Process & tools
How I work
I move from understanding a problem, to writing it down, to a system, to something people can use. I can design it and build it, so I tend to carry work further than a handoff. These examples are anonymized.
01 · The process
Six stages, and why each one is there
Understand the domain and the people
I learn how the work really happens before I draw anything. For an AI-first construction platform, that meant researching the industry first, so the design rested on how the work is done on the ground.
WhyScreens that look right but ignore how people work get abandoned.
Write it down
I draft product requirements and tickets so an idea becomes something a team can build, with the goal, the constraints and what done looks like.
WhyA shared written version stops the same conversation happening three times.
Decide the system early
Color, type, spacing, components and voice get decided before individual screens, and recorded in one reference that every new screen is built against.
WhyDecisions made once are cheaper than decisions remade on every screen.
Wireframe and prototype
I sketch structure in Figma and prototype the flows that carry the most risk, using AI tools to move faster and keeping the judgment myself.
WhyThe cheapest time to be wrong is before anyone builds it.
Build, or build alongside
I come from front-end work in React, so I can build what I design, or work closely with developers and with another designer when it is a team effort.
WhyDesign and code each change the other. Knowing both keeps the handoff honest.
Test, review, refine
Every change gets used before it ships. On my own app that means a physical phone and a manual checklist, and when a bug turns up I look for the whole class of it, not just the one case.
WhyFixing a category once beats fixing the same mistake five times.
02 · In practice
Where this shows up
Past employer work. Most is shared as text only and kept anonymous.
03 · Design systems
How I build and document them
Tokens first
Named values for color, type, spacing and radius, so a change in one place changes everywhere. This site is built that way.
Components with rules
Each component has a job and a short rule for when to use it and when not to. The rule matters as much as the component.
A living reference
One document that stays current: colors, type, icons, motion and voice. New screens are built against it, not improvised and reconciled later.
See it for real: this site’s own style guide →
04 · AI in my workflow
Faster, with the judgment still mine
I use Gemini and Claude, whichever the team or project calls for, to produce branding guides, wireframes and prototypes, draft requirements and research a domain. They make me faster.
The judgment stays with me. I decide what to build, what to cut and what ships, and I read and use what comes back before it goes anywhere. Speed from AI only helps if the decisions behind it are good.
05 · Tools
What I work with
- Design
- Figma, wireframing, prototyping, branding guides, product requirements, Jira
- AI
- Gemini, Claude, Claude Code
- Front-end
- HTML, CSS, React, TypeScript
- Web & media
- Wix, WordPress, Canva