← Back to work
Case study — iKhokha · 2026

Designing Prepaid with AI.

What AI-assisted design taught us shipping iKhokha’s Prepaid feature — and where we take it next.

RoleProduct Designer
SurfaceiKhokha · Panoramik
ToolsClaude · Figma
Year2026
01 — The problem

Big feature. Tight deadline.

Prepaid is core to Panoramik — complex flows, many edge cases, and a tight window to ship. The existing designs already lived in Figma, but reworking the whole surface by hand inside the deadline wasn’t realistic.

02 — The opportunity

HMW design Prepaid faster?

We had everything that usually slows a redesign down already in hand: existing screens, real context, and known pain points. The bet was simple —

What if AI could do the heavy lifting?

03 — How we started

Start from what exists.

We began with the screens already in production — feeding Claude the real designs and the friction we knew users hit, then having it draft wireframes back into Figma.

Existing Prepaid home screen
Prepaid Home
Existing providers screen
Providers
Existing money transfers screen
Money Transfers
Known friction
  • Hard to find providers
  • Too many steps to buy
  • No quick repeat purchase

Claude turned that context into low-fidelity wireframes — a starting point in minutes, not days.

AI-generated wireframe in Figma
Wireframe → Figma
04 — Going high fidelity

Context is everything.

Generic prompts give generic output. So we built guardrails — structured files that teach Claude how iKhokha designs. The quality jumped immediately.

design-system.mdSystem

Full index of iKhokha components, tokens & usage rules.

wireframe-skill.mdSkill

Generates low-fidelity wireframes from flow descriptions.

describe("flow") → render(wireframe)
panoramik-hifi-skill.mdSkill

Hierarchy, component pairing, card treatment & spacing.

Continuously evolving — every new flow sharpens the guardrails.

05 — Where we are now

Closing the gap.

Each iteration brought better context — not just for the AI, but for how our users experience the product.

V1
Prepaid home, version 1
First pass. AI-generated layout — functional, but generic.
V2
Prepaid home, version 2
Richer context. Quick actions, favourites and balance up front — closer to how merchants actually use the app.
V3
Prepaid home, version 3
Streamlined & smart. Compact nav, product grid, recent transactions — clean and production-ready.
  • Better information hierarchy
  • More contextual AI prompts
  • Closer to production quality
06 — What we learned

Three things stuck.

01

AI does 70%. You finish the rest.

AI handles structure, layout and the first pass — you bring the final 30%. Sometimes that means opening Figma yourself for a tweak or two. That’s the collaboration.

02

Humans still validate.

Documents and guidelines get you far, but humans are still the best way to gather context beyond what’s written — and to judge whether the output is on track.

03

Start small.

Don’t ask AI to build everything at once. Start with one screen, see how it does, iterate. Smaller scope, faster feedback, better results.

07 — What’s next

From foundation to default.

  1. Phase 1 · Now You are here

    Foundation

    Setting up skills, learning what works, generating Prepaid screens. Building the baseline for AI-assisted design.

    In progress
  2. Phase 2 · Next

    Scale

    Bring other teams in. Define AI principles and governance not tied to one tool. Upskill design and product.

    Coming up
  3. Phase 3 · Vision

    Enablement

    AI becomes the default. Designers and PMs spin up ideas in hours. Exploration is cheap. Shipping is fast.

    The goal

Early days. Big signal.

What we know

AI has a clear place in how we design.

What we’re figuring out

The optimal workflow — we’re still finding it.

What’s clear

The results are promising.