UI/UX Design
I design interfaces that work — not just visually, but functionally. That means
understanding what the user is trying to accomplish, what friction stands between
them and that goal, and how layout, hierarchy, motion, and copy can remove it.
Design is not decoration applied after the engineering is done. I treat it as a
thinking tool from the very first session and carry it all the way to
implementation, because I am also the person who builds what I design.
That end-to-end ownership changes the quality of the output. There is no
translation loss between design and development. The component I draw in Figma
is the component I build in React — same spacing, same states, same edge cases
accounted for.
What's included
Discovery and user research
Understanding the user before drawing anything. Defining user flows, mapping
jobs-to-be-done, identifying where the current experience breaks down, and
establishing what success looks like before a single frame is designed.
Wireframing and information architecture
Low-fidelity wireframes that focus on structure and flow before committing to
visual detail. Navigation hierarchies, content prioritisation, interaction
models — worked out on paper (or lo-fi Figma) so that changes are cheap.
High-fidelity UI design in Figma
Pixel-precise, production-ready screens. Responsive layouts that work across
mobile, tablet, and desktop. Consistent spacing, type scales, and colour systems
applied systematically — not case by case. Every screen designed with its
interactive states: default, hover, focus, loading, empty, error. Not just the
happy path.
Design systems and component libraries
Design tokens — colour, typography, spacing, border radius, shadow — defined once
and referenced everywhere. Reusable Figma components that mirror the React
component library. Style guides, usage documentation, and variant management so
the system scales as the product grows and multiple contributors stay aligned.
Responsive and mobile-first layouts
I design mobile-first and test at every breakpoint. Fluid grids, adaptive
components, touch targets sized for real fingers, tap areas that do not overlap.
Interfaces that feel native on a phone and generous on a wide monitor.
Accessibility-first design
WCAG 2.1 AA as a baseline, not a checkbox. Colour contrast ratios verified,
focus states visible, semantic heading structures defined, interactive elements
labelled for screen readers. I have shipped WCAG-aligned interfaces in production
and know how to make accessibility a design decision rather than a remediation
task.
Motion and micro-interaction design
Transitions, loading states, hover effects, and micro-interactions specified with
intent — not added as decoration. Easing curves, duration, and sequencing
documented for implementation. I use GSAP in production and know how to design
motion that enhances comprehension rather than distracting from it.
Developer handoff
Figma files structured for engineering handoff — named layers, organised frames,
exported assets, annotated specs. Spacing, typography, and colour values
documented. Component logic described in plain language. A handoff that
developers can actually use, not one they have to reverse-engineer.
Good fit if you need
A new interface designed from zero. A redesign of something that looks dated or
converts poorly. A design system for an engineering team that needs consistency
at scale. A Figma-first prototype to validate an idea before committing
engineering resources. A second opinion on a UI that is not working.
What makes this different
I am a designer who codes. That means I will never design something that cannot
be built in the given timeline, never specify a layout that breaks on a real
device, and never hand off a file that leaves the engineer guessing. The design
and the implementation are continuous, not sequential.