Kaabil · AI Job Agent
Kaabil · AI Job Agent
From a sales prototype to a shipped native job agent: rebuilt a PM-and-sales PMF prototype into a React Native app in 100 days, on one design system, in seven languages, with in-app purchases live.
From a sales prototype to a shipped native job agent: rebuilt a PM-and-sales PMF prototype into a React Native app in 100 days, on one design system, in seven languages, with in-app purchases live.
My direct contribution
Design system and tokens, UX rules for fit, score and paywall, the Kaabil palette migration, screen design (Home, Plans, Wallet, Settings), shipping UI in code through PRs
Teams
2 designers, PM and sales, 10 contributors across mobile and backend
My Role
Lead UI/UX Designer · design engineering on mobile
Timeline
45 days
Whole story in a nutshell
PM and sales had a persuasive web prototype for an AI job agent. It proved the pitch, but it was dark-only, had about 35 font sizes and one accessibility label with lot of broken flow, and its Hinglish copy was hardcoded. View PMF prototype
Turn it into a native app real job seekers could trust, in seven languages, that a team of ten could build fast without the UI drifting.
Kept the voice, rebuilt the scaffolding: one token system, product rules encoded once in code, a dictionary layer for languages, a brandbook re-skin, and designers shipping UI changes directly in pull requests.
Shipped in 45 days to in-app purchases, in seven languages, with accessibility labels going from 1 to 119 and every open design debt written down with its number.
Whole story in a nutshell
PM and sales had a persuasive web prototype for an AI job agent. It proved the pitch, but it was dark-only, had about 35 font sizes and one accessibility label with lot of broken flow, and its Hinglish copy was hardcoded. View PMF prototype
Turn it into a native app real job seekers could trust, in seven languages, that a team of ten could build fast without the UI drifting.
Kept the voice, rebuilt the scaffolding: one token system, product rules encoded once in code, a dictionary layer for languages, a brandbook re-skin, and designers shipping UI changes directly in pull requests.
Shipped in 45 days to in-app purchases, in seven languages, with accessibility labels going from 1 to 119 and every open design debt written down with its number.
Owning the system between design and code
While PM and sales owned the bet, I owned how it would hold together as a product: the foundations, the rules behind the core screens, and getting design changes into the app without a handoff gap.
01
Audit the prototype
02
Token foundations (Skill)
03
Component layers
04
Rules for fit, score, paywall
05
Seven-language layer
06
Brandbook re-skin
07
Ship in PRs
08
Design QA
Owning the system between design and code
While PM and sales owned the bet, I owned how it would hold together as a product: the foundations, the rules behind the core screens, and getting design changes into the app without a handoff gap.
01
Audit the prototype
02
Token foundations (Skill)
03
Component layers
04
Rules for fit, score, paywall
05
Seven-language layer
06
Brandbook re-skin
07
Ship in PRs
08
Design QA
Some context about Kaabil and Kaabil agent
Kaabil is Redrob's AI job agent for early-career job seekers in India. Before engineering began, PM and sales built a web prototype to put in front of users, recruiters and colleges. It tested a three-part bet:
An agent that reaches recruiters daily
“While you slept, your agent worked.” Home is a morning report, not a feed.
Two-minute proofs that move your match
A micro skill test beside each job turns “am I good enough?” into one short action.
Plans priced on outreach
Free trial, then Student ₹99 to Max ₹499 a month, priced on agent outreaches per day.
Whole story in a nutshell
PM and sales had a persuasive web prototype for an AI job agent. It proved the pitch, but it was dark-only, had about 35 font sizes and one accessibility label with lot of broken flow, and its Hinglish copy was hardcoded. View PMF prototype
Turn it into a native app real job seekers could trust, in seven languages, that a team of ten could build fast without the UI drifting.
Kept the voice, rebuilt the scaffolding: one token system, product rules encoded once in code, a dictionary layer for languages, a brandbook re-skin, and designers shipping UI changes directly in pull requests.
Shipped in 45 days to in-app purchases, in seven languages, with accessibility labels going from 1 to 119 and every open design debt written down with its number.
In summary
The Problem:
The prototype was persuasive but not shippable: off-scale, untranslated, inaccessible.
The Market Need:
Early-career job seekers who need to prove they're capable, in multilingual support.
The Gap:
A web demo running on mock data, versus a native app real users would trust with their career.
The Decision:
Keep the voice, rebuild the scaffolding.
The Challenge:
Ship native in about 45 days with ten contributors, without the UI drifting.
Some context about Kaabil and Kaabil agent
Kaabil is Redrob's AI job agent for early-career job seekers in India. Before engineering began, PM and sales built a web prototype to put in front of users, recruiters and colleges. It tested a three-part bet:
An agent that reaches recruiters daily
“While you slept, your agent worked.” Home is a morning report, not a feed.
Two-minute proofs that move your match
A micro skill test beside each job turns “am I good enough?” into one short action.
Plans priced on outreach
Free trial, then Student ₹99 to Max ₹499 a month, priced on agent outreaches per day.
Whole story in a nutshell
PM and sales had a persuasive web prototype for an AI job agent. It proved the pitch, but it was dark-only, had about 35 font sizes and one accessibility label with lot of broken flow, and its Hinglish copy was hardcoded. View PMF prototype
Turn it into a native app real job seekers could trust, in seven languages, that a team of ten could build fast without the UI drifting.
Kept the voice, rebuilt the scaffolding: one token system, product rules encoded once in code, a dictionary layer for languages, a brandbook re-skin, and designers shipping UI changes directly in pull requests.
Shipped in 45 days to in-app purchases, in seven languages, with accessibility labels going from 1 to 119 and every open design debt written down with its number.
In summary
The Problem:
The prototype was persuasive but not shippable: off-scale, untranslated, inaccessible.
The Market Need:
Early-career job seekers who need to prove they're capable, in multilingual support.
The Gap:
A web demo running on mock data, versus a native app real users would trust with their career.
The Decision:
Keep the voice, rebuild the scaffolding.
The Challenge:
Ship native in about 45 days with ten contributors, without the UI drifting.
Make the prototype shippable without losing what made it work
Turn a PM-and-sales web prototype into a native Expo / React Native app with one design system, seven languages and its own brandbook palette, so ten people could build against it in parallel.
Make the prototype shippable without losing what made it work
Turn a PM-and-sales web prototype into a native Expo / React Native app with one design system, seven languages and its own brandbook palette, so ten people could build against it in parallel.
HOW WE APPROACHED THE PROBLEM?
Audit first: what earned its place, and what couldn't ship
I audited the prototype's shipped bundle and every screen, and sorted what we found into two piles.
What earned its place
Hinglish, identity-led voice: “Kaabil ho. Sirf dikhana baaki hai.”
A morning report as the home screen, not a feed
A fit % that explains itself: “Why this match”
Six tabs: Home, Jobs, Learn, Wallet, Inbox, You
Skill micro-tests next to the job they unlock
What could not ship as-is
Hinglish hardcoded inline, no i18n layer
Dark-only, neon blue→purple brand, weight 800 everywhere
Web habits: hover states, cursor, CSS-hidden scrollbars
Almost no empty states and no error states
Here are the key insights we collected:
As I dug deep on audit I found the generic issue every vibe coded app has now-a-days, inconsistent font sizes, Padding/Breathing issue, No error handling state, No data dependent screen flow, Orphan values mismatch.
Principles we set
Setup the voice
The Hinglish, the morning report and the self-explaining fit were the product.
Encode, don't review
A rule lives in one function or one token, so a reviewer can't miss a second copy.
No arbitrary values
“A literal #hex in a component is a bug.” Off-scale sizes are the same bug.
Write debts down
Every trade-off sits in the code next to its measured number.
HOW WE APPROACHED THE PROBLEM?
Audit first: what earned its place, and what couldn't ship
I audited the prototype's shipped bundle and every screen, and sorted what we found into two piles.
What earned its place
Hinglish, identity-led voice: “Kaabil ho. Sirf dikhana baaki hai.”
A morning report as the home screen, not a feed
A fit % that explains itself: “Why this match”
Six tabs: Home, Jobs, Learn, Wallet, Inbox, You
Skill micro-tests next to the job they unlock
What could not ship as-is
Hinglish hardcoded inline, no i18n layer
Dark-only, neon blue→purple brand, weight 800 everywhere
Web habits: hover states, cursor, CSS-hidden scrollbars
Almost no empty states and no error states
Here are the key insights we collected:
As I dug deep on audit I found the generic issue every vibe coded app has now-a-days, inconsistent font sizes, Padding/Breathing issue, No error handling state, No data dependent screen flow, Orphan values mismatch.
Principles we set
Setup the voice
The Hinglish, the morning report and the self-explaining fit were the product.
Encode, don't review
A rule lives in one function or one token, so a reviewer can't miss a second copy.
No arbitrary values
“A literal #hex in a component is a bug.” Off-scale sizes are the same bug.
Write debts down
Every trade-off sits in the code next to its measured number.
A STRONG SYSTEM STARTS WITH A STRONG FOUNDATION
From thirty-five font sizes to one scale
Before any screen, I collapsed the prototype's ad-hoc values into a token system that every atom, module and screen reads from. One styling system only: inline styles with tokens.
Also as there is tight deadline and we have no time to go for Figma so I take up the task to build everything on code itself.
A STRONG SYSTEM STARTS WITH A STRONG FOUNDATION
From thirty-five font sizes to one scale
Before any screen, I collapsed the prototype's ad-hoc values into a token system that every atom, module and screen reads from. One styling system only: inline styles with tokens.
Also as there is tight deadline and we have no time to go for Figma so I take up the task to build everything on code itself.
SOLUTION AND DESIGN DECISIONS I MADE
Every rule encoded once, in code
1 · Onboarding that ends with the agent switched on
Resume in, skill proved, targeting set, agent on. Three ways in (build with AI chat, LinkedIn, or upload). The skill check is optional, and running out of time is never scored as a fail: it is its own state, so a candidate who didn't get to answer is never told they failed.
2 · Home is a morning report, not a feed
The prototype's best idea, kept: what your agent did while you slept, the replies that need you, and the one next step. Jobs lead with fit, and fit is three bands owned by one function, so a badge and the bar beneath it can never disagree.
3 · A score that doesn't judge you on day one
The Kaabil Score runs 0-1000 in six bands. Below 250 it is withheld: “a two-digit number reads as a verdict on the person.” The Excellent cut at 740 lines up with the resume ceiling, so above it only proof moves the score, and the bands tell you what to do next: take a test.
4 · A paywall with manners
The prototype opened its plan sheet at the first recruiter reply, the moment a user most wants to read, not buy. I retired that, along with automatic trial-expiry popups, and the policy that shipped on 24 Sep is short:
01
At most one dismissible upgrade nudge a day, per account, on India time. Never for Max.
02
One nudge per paid feature per trial account. Closing it never grants access.
03
Only offer higher tiers the user can actually buy; Max sees top-ups, never a plan list.
04
A billing failure gets retry feedback, never an upsell.
05
Silent during verification, force-update, checkout and purchase confirmation.
5 · Seven languages, one voice
The prototype's Hinglish was hardcoded. I moved it into a dictionary layer where English is both the key and the fallback, so a missing string never shows blank, and t(en, hi) keeps Hinglish inline where the voice is written. About 2,000 keys per Indic dictionary.
6 · The Kaabil re-skin, without a rewrite
The neon blue→purple prototype brand moved to the Kaabil brandbook: Terra, Haldi, Peepal, Indigo, Ink and Chai. I trialled it on one route behind a single wrapper, and it went app-wide on 18 Sep. Legacy token names map to the new palette, so about 450 call sites didn't need renaming. Fix the role, not the hex.
Brand palette was finalised by strategy team
7 · An agent that feels like someone, not something
A job hunt is lonely, and most "AI agents" make it lonelier: the same screen, the same tone, at 8 AM and at 2 AM. Kaabil's agent works for you around the clock, so I wanted it to feel like it shares your day, not like a static bot waiting for input.
So I create a Four hand-illustrated skies (morning, afternoon, evening and night) sit behind a greeting that speaks to you by name. It's a small thing, but opening the app at night and seeing a night sky tells you the agent knows what time it is for you.
8 · Designers ship in the PR (My new favourite flow)
The pull request is the handoff. A development build on the phone, Metro on the laptop: save a file and the screen reloads, with no Android Studio. Designers branch off develop, the hooks lint and typecheck, and a developer reviews before squash-merge.
SOLUTION AND DESIGN DECISIONS I MADE
Every rule encoded once, in code
1 · Onboarding that ends with the agent switched on
Resume in, skill proved, targeting set, agent on. Three ways in (build with AI chat, LinkedIn, or upload). The skill check is optional, and running out of time is never scored as a fail: it is its own state, so a candidate who didn't get to answer is never told they failed.
2 · Home is a morning report, not a feed
The prototype's best idea, kept: what your agent did while you slept, the replies that need you, and the one next step. Jobs lead with fit, and fit is three bands owned by one function, so a badge and the bar beneath it can never disagree.
3 · A score that doesn't judge you on day one
The Kaabil Score runs 0-1000 in six bands. Below 250 it is withheld: “a two-digit number reads as a verdict on the person.” The Excellent cut at 740 lines up with the resume ceiling, so above it only proof moves the score, and the bands tell you what to do next: take a test.
4 · A paywall with manners
The prototype opened its plan sheet at the first recruiter reply, the moment a user most wants to read, not buy. I retired that, along with automatic trial-expiry popups, and the policy that shipped on 24 Sep is short:
01
At most one dismissible upgrade nudge a day, per account, on India time. Never for Max.
02
One nudge per paid feature per trial account. Closing it never grants access.
03
Only offer higher tiers the user can actually buy; Max sees top-ups, never a plan list.
04
A billing failure gets retry feedback, never an upsell.
05
Silent during verification, force-update, checkout and purchase confirmation.
5 · Seven languages, one voice
The prototype's Hinglish was hardcoded. I moved it into a dictionary layer where English is both the key and the fallback, so a missing string never shows blank, and t(en, hi) keeps Hinglish inline where the voice is written. About 2,000 keys per Indic dictionary.
6 · The Kaabil re-skin, without a rewrite
The neon blue→purple prototype brand moved to the Kaabil brandbook: Terra, Haldi, Peepal, Indigo, Ink and Chai. I trialled it on one route behind a single wrapper, and it went app-wide on 18 Sep. Legacy token names map to the new palette, so about 450 call sites didn't need renaming. Fix the role, not the hex.
Brand palette was finalised by strategy team
7 · An agent that feels like someone, not something
A job hunt is lonely, and most "AI agents" make it lonelier: the same screen, the same tone, at 8 AM and at 2 AM. Kaabil's agent works for you around the clock, so I wanted it to feel like it shares your day, not like a static bot waiting for input.
So I create a Four hand-illustrated skies (morning, afternoon, evening and night) sit behind a greeting that speaks to you by name. It's a small thing, but opening the app at night and seeing a night sky tells you the agent knows what time it is for you.
8 · Designers ship in the PR (My new favourite flow)
The pull request is the handoff. A development build on the phone, Metro on the laptop: save a file and the screen reloads, with no Android Studio. Designers branch off develop, the hooks lint and typecheck, and a developer reviews before squash-merge.
LEARNING
Explored the AI workflow from interaction to campaign initiatives.
As this project's sprint is on tight deadline and we moved our design process fully on AI from design to development. I explored lot of vertical using claude code here are some things I shipped.
Playstore/Appstore visuals
App heptics and interactions
Trailer videos
Social ads
LEARNING
Explored the AI workflow from interaction to campaign initiatives.
As this project's sprint is on tight deadline and we moved our design process fully on AI from design to development. I explored lot of vertical using claude code here are some things I shipped.
Playstore/Appstore visuals
App heptics and interactions
Trailer videos
Social ads
Curios about this..
Connect with me @ prakashlibagunbk@gmail.com, for more discussion or
Curios about this..
Connect with me @ prakashlibagunbk@gmail.com, for more discussion or