Skip to work

I design and build products people rely on when it matters.

Senior product designer in Lagos. Six years across fintech, SaaS and AI products, from money apps to tools teams use together. I start with the people and the problem, design the whole journey, and build working prototypes to test ideas early.

Say helloSee the work

Before I pick a tool

  1. 1. who is this for?
  2. 2. watch them try it today
  3. 3. sketch a few ways out
  4. 4. make one real: paper, code, AI, whatever's fastest
  5. 5. put it in their hands
in

I write about designing, building, and what I learn along the way.

Read on LinkedIn
John, smiling, in a white jonmidas T-shirt

prototype

/ˈprəʊ.tə.taɪp/ [noun]

(1) The quickest way to find out if an idea works. (2) For me, often real code: Reel and Roomy both started as one.

See Snuget

Selected work

A money app for a client, a product I designed and built myself, and two products I led at Fixa.

Snuget receipt result: Shoprite Lekki, minus 12,400 naira
Snuget home: 84,250 naira left this month, with Kobo in a Lagos street
Snuget budgets as pastel pots

Snuget Client work · Fintech

One honest naira picture of where the money goes.

Who it's for
Young earners in Lagos and Abuja whose money leaves through two banks, a wallet, POS, transfers to family and cash.
The hard part
Every channel leaves a different trace, and the AI reading them is sometimes wrong.
What I designed
One capture button for receipts, bank SMS, statements and cash, with every AI guess marked by how sure it is, in English or Pidgin.
Case study →

// design system for engineering · Figma, no code

library
published figma library · ~40 component sets · light and dark as one variable mode
confidence
every AI guess tagged high / medium / low · low waits in Review, never counted silently
capture
receipt photo · bank SMS · statement PDF · cash or voice, behind one capture button
money
naira amounts in tabular figures · Plus Jakarta Sans for its ₦ glyph
scope
106 screens across 10 flows · English and Pidgin
Reel's editor reviewing a demo step, with personal details blurred

Describe it

Show how to turn on SSOMake demo

● Building step 3 of 6…

Reel Designed and built · Pre-launch

Product demos people can watch or click through.

Who it's for
Teammates closest to customers, who need a release demo but don’t know the tooling.
The hard part
Letting an AI click through your real product without it doing something you’d regret.
What I designed
Describe it: type the task, watch Reel record it step by step, then review every AI-written line and every blur before it’s shared.
Case study →

// built with Claude · live at reeldemo.app

stack
next.js 16 · react 19 · typescript · tailwind v4 · supabase (postgres, storage, auth)
rules
access, plan limits and AI credits enforced in postgres with row-level security, not in the UI
agent
claude api drives a steel cloud browser one checked action at a time; never sees passwords
privacy
blur runs on the maker's machine: tesseract.js OCR, mediapipe faces, luhn-checked card numbers
media
elevenlabs voice cached by hash · hand-written TUS resumable uploads · clip edits stored as data
billing
lemon squeezy webhooks: HMAC-verified, idempotent, safe out of order · atomic credit spend
tests
46 database test files · 31 playwright e2e × desktop + phone · 61 migrations · chrome extension
Fixa's dashboard: payments, attendance and leave at a glance
Confirm and pay 1,250 employees, with the wallet balance left after payment

Fixa Web Design lead · PM for Payments

Paying a thousand workers, calmly.

Who it's for
HR and payroll admins who approve time from many sites and pay a thousand people in a single run.
The hard part
Paying people is the riskiest thing in the product, and it looked like every other screen.
What I designed
A payroll flow that checks names and wallet balance before money moves, and says exactly what failed, and why, when some transfers don’t land.
Case study →

// design spec for engineering · Figma, no code

tokens
figma variables bound to fixa's brand · DM Sans · radius 8 / 12 / 16
status
4 colours, one meaning each: paid, waiting, failed, count
payouts
account and name check before money moves · 6-digit OTP · balance shown after debit
imports
rows sorted into ready / needs fixing / duplicate; good rows import now
scope
54 screens across 10 modules · empty, error and edge states drawn
Supervisor home with records waiting to sync
Face scan: match found, confirm and clock in
Clocking in a crew of four in one go

Fixa Mobile Design lead · Offline-first, face recognition

Clocking in a crew, with or without signal.

Who it's for
Site supervisors clocking in crews of up to 200 on Rwandan tea estates and building sites, one-handed and often with no signal.
The hard part
A face match that’s nearly sure can still put a day’s pay on the wrong worker.
What I designed
Clock-in that saves to the phone first, and a face scan with 12 states that hands every close call to the supervisor.
Case study →

// design spec for engineering · Figma, no code

offline
offline-first: clock-ins queue on the phone and sync when signal returns
match
scan below 0.82 → unrecognised · lookalikes never auto-picked · blink check always on
enrol
similarity 0.85–0.88 → supervisor confirms · above 0.88 → blocked as a duplicate
states
12 states on one shared scan screen, each with its own colour and message
scope
50+ screens · 25 for face recognition

On the side

A Roomy board with sticky notes from a product retro
Tidy

Roomy Designed and built · Side project

A shared whiteboard that turns messy sessions into clear next steps.

Who it's for
Teams running workshops and retros who leave with a wall of sticky notes and no summary.
The hard part
Sorting a hundred notes into themes is the boring hour after the meeting, and nobody wants an AI rearranging their work unasked.
What I designed
Tidy, which proposes themes as a private preview, and only changes the board when you accept.

Six days, start to working board. I designed it in Figma and directed Claude through the build.

Case study →

// built with Claude · in progress

stack
next.js 16 · react 19 · typescript · own canvas 2D renderer, no whiteboard SDK
perf
500 objects: 0.5 ms median render of a 16.7 ms frame · 0 of 300 frames dropped
sync
yjs CRDT · partyserver on cloudflare durable objects · y-indexeddb offline copy
undo
Y.UndoManager tracks only your own edits; repairs ride with the edit that caused them
tidy
claude haiku with a JSON-schema answer · spring flight (stiffness 260, damping 26)
accounts
cloudflare d1 · passwordless email links + google · only SHA-256 hashes stored
presence
cursors via yjs awareness, ~30 updates/s, never written to the document

What I'm trusted with

  • Problem framing

    Turning a vague brief into the problem worth solving, and what solving it is worth.

  • End-to-end flows

    Onboarding, payments and setup, empty and error states included.

  • Design systems

    Tokens, components and usage rules that teams actually follow.

  • Research and testing

    Talking to users where they work, and testing before anything ships.

How I work

  1. 1// research

    Find the real problem

    The brief is usually a symptom. I talk to users, sit in on support calls and read the data, then come back with the problem worth solving and what it's worth to the business.

  2. 2// states

    Design the whole journey

    The happy path is the easy part. Empty states, errors, permissions, first-time users and power users: I design these up front, because that's where products lose people's trust.

  3. 3// prototype

    Test early, with something real

    I get ideas in front of users while they're still cheap to change, often as a working prototype I build myself. Watching someone use it tells me more than asking what they'd want.

  4. 4// ship

    Ship it and stay on it

    I work alongside engineers through the build, catch the details in QA, and watch what happens after launch. The work isn't done when the file is handed over.

About

I’m John, a product designer in Lagos. For six years I’ve worked across fintech, SaaS and AI: payments at OurPass, payroll and workforce tools at Fixa as design lead (where I also ran the Payments module like its product manager), and Snuget, a money app for young earners, as client work.

I like starting with people rather than the brief: watching how they do the thing today, testing rough ideas with them early, and designing the whole journey, including the parts where things go wrong. I reach for whatever answers the question fastest: a paper sketch, a design file, a coded prototype or an AI agent.

Now I’m at Zerohuman, doing design engineering on the platform. I move between sketches, design tools, code and AI agents, so I can take an idea all the way to something people can use, which is how Reel and Roomy happened. I’m looking for a senior product design role, remote or on site, and I’m happy to travel.

John in a white jonmidas T-shirt, smiling

  1. Where I've worked · git log --oneline

  2. ZerohumanDesign engineerNow
  3. FixaDesign lead · PM for Payments
  4. OurPassProduct designer

Working on something people find hard to use?

Let's talkjonmidas27@gmail.com

Replies within a day.