← cd ../services
02 / design/system● 12 systems shippedFigma · WCAG AA

UI/UX that earns clicks.

User research, journey mapping, hi-fi prototypes. Interfaces people actually want to use — not ones that need a tutorial.

FigmaWCAG AADesign SystemsTokens
Frame 01 · Home
Frame 02 · Mobile
▶ ananya
▶ design-lead
$ what we ship

Six things a design engagement produces.

Every deliverable is something a developer can build against, or a stakeholder can approve. No mood boards, no "explorations" that disappear into a Figma graveyard.

01
User research & audit5–8 user interviews, competitor teardown, heuristic review of the current product. Findings in a shared FigJam, not a 40-page PDF.
02
Wireframes & flowsLow-fi wireframes for every screen. User-flow diagrams that show every branch — happy path, empty state, error state.
03
Hi-fi mockupsPixel-perfect Figma designs against real content and real data. Two rounds of revisions on the pattern, then applied across the product.
04
Interactive prototypesClickable Figma prototypes that stakeholders can test on their phone. Great for board sign-off and quick user testing.
05
Design systemsTokens, components, variants, documentation. Ships to Storybook or the codebase, not just Figma pages.
06
Developer handoffSpecs, redlines, and 30 minutes with the engineering team per screen. No "figure it out from the mockup".
$ our process

Six phases, research to handoff.

Design work fails when it starts on the canvas. Ours starts with real users and real content. Fixed scope, fixed timeline, agreed before Figma opens.

  1. 01

    Research & discovery

    Week 1 – 2

    Talk to real users. Audit the current product. Read your support tickets and analytics. Come out with a written point of view on what to fix and in what order.

    • 5–8 user interviews (remote or in Brisbane / Sydney studios)
    • Heuristic review of the current experience
    • GA4 + Hotjar review of top drop-off points
    • Research readout in FigJam, walked through live
  2. 02

    Information architecture

    Week 2

    Sitemap, navigation model, content taxonomy. The invisible skeleton. Get it wrong and every visual decision downstream is compromised.

    • Sitemap + primary/secondary navigation
    • Content taxonomy for CMS-driven areas
    • Tree-testing on the proposed IA (Maze)
    • Sign-off gate before we move to wireframes
  3. 03

    Wireframes

    Week 2 – 4

    Grey-box wireframes for every template. Every state — loading, empty, error, populated — accounted for. Reviewed together, not emailed cold.

    • Desktop + mobile wireframes for every unique template
    • All four states — empty, loading, populated, error
    • Copy placeholders replaced with real content early
    • Weekly review calls, recorded
  4. 04

    Visual design

    Week 4 – 7

    Hi-fi Figma mockups. Two revisions on the core patterns, then rolled across the product. Every colour, spacing, and type decision comes from a token — not a one-off value.

    • Design tokens — colour, type, spacing, radius, shadow
    • Core component library — buttons, forms, cards, nav
    • Every screen composed from library components
    • Contrast + focus audit against WCAG 2.2 AA
  5. 05

    Prototype & validate

    Week 7 – 8

    Interactive Figma prototype. Optional 5-user usability test through Maze. Real feedback loop before a single line of code ships.

    • Clickable prototype covering core flows
    • Optional Maze test with 5 target users
    • Findings → revisions → sign-off
    • Stakeholder demo, recorded for the wider team
  6. 06

    Developer handoff

    Week 8 – 10

    Figma tidy, Dev Mode enabled, tokens exported to code. Live handoff session with the engineering team — every screen walked, every question answered.

    • Design tokens exported to Style Dictionary or Tailwind config
    • Storybook stubs for the component library
    • 30-min handoff call per template with engineering
    • Available in Slack for build-time questions for 60 days
$ what you own

What lands in your hands.

Every file, every asset, every research artefact — transferred to your workspace on final payment. Nothing held hostage, nothing hidden.

Figma workspace

Wireframes, hi-fi designs, prototype, component library — all editable in your Figma org.

Research readout

Interview recordings, transcripts, affinity map, and the written point-of-view report.

Design system doc

Tokens, components, dos-and-don'ts, contribution guide. Ready to hand to a new hire.

Token exports

JSON tokens ready for Style Dictionary, Tailwind config, or your existing design-tokens setup.

Prototype URL

Public Figma prototype link plus a mirror hosted on your domain for stakeholder shares.

Handoff recordings

Every dev-handoff call recorded and stored — for the engineer who joins next month.

$ tools we use

The kit we design with.

All industry-standard. Anything we build handovers cleanly to any Figma-fluent designer in Sydney, Melbourne or Auckland.

Design
  • Figma
  • Figma Dev Mode
  • FigJam
  • Framer
Research
  • Maze
  • Dovetail
  • Hotjar
  • Lookback
Prototyping
  • Figma Prototypes
  • ProtoPie
  • Framer
Design systems
  • Storybook
  • Style Dictionary
  • Tokens Studio
  • Zeroheight
Analytics
  • GA4
  • Hotjar
  • PostHog
  • Mixpanel
Accessibility
  • axe DevTools
  • Stark
  • WCAG 2.2 checklist
  • Contrast
$ timeline & investment

Rough shape of a design engagement.

Real numbers from the last twelve design-only engagements. Actual quotes land after the free discovery — this is the sensible band.

Typical timeline
00 weeks
Single-flow redesign: 3–4 weeks. Product design system: 6–8 weeks. Full app redesign: 8–10 weeks.
Investment (AUD)
$0k – $0k
Fixed price. Three milestone payments — research, design, handoff. Ongoing design retainer from $2.5k/mo.
0
Products designed in 2025
0%
WCAG 2.2 AA at launch
0%
Avg conversion lift
0
Design revisions included
$ questions

Things clients ask on discovery calls.

Straight answers, no pitch. If your question isn't below, we'll cover it live.

Do I need research if I already know my users?
Usually, yes — even five short interviews surface something the founding team can't see anymore. That said, if you've done recent research (last 6 months) and can share the artefacts, we can trim the research phase to a one-week validation sprint and pass the savings on.
Can you work with our existing brand?
Yes, and it usually saves time and money. Bring your logo, colour palette, and any type decisions — we'll extend them into a full product design system rather than starting a rebrand.
What if we already have engineers — how does handoff work?
We enable Figma Dev Mode, export tokens to Tailwind or Style Dictionary, stub Storybook components, and run a 30-minute handoff call per template with your team. We stay reachable in Slack for build-time questions for 60 days.
Who owns the Figma files?
You do. On final payment we transfer the Figma project to your workspace. All source files, all assets, all research artefacts — editable, exportable, and yours to modify with any Figma-fluent designer forever.
How many rounds of revisions are included?
Two rounds on core patterns (home + one inside + one detail), then applied across the product. Additional heavy revisions get scoped and quoted as change orders — small tweaks are always free.
Do you build the site too, or just design it?
Both, but you're not obligated to bundle. Some clients bring their own dev team — we happily hand off with no strings. Others build with us end-to-end; we quote a combined design + build package after design sign-off.
Do you work in-person or remote?
Remote by default from our Brisbane and Auckland studios, with day-visits available for kickoff, mid-project reviews, and final presentation. We've never met about half our clients in person — the work doesn't suffer.

Ready to design?

Free 30-minute discovery call. We'll reply within 1 business day.