HireSense · UX Case Study

00 The brief

Make a sceptic trust a number they didn't calculate. I designed the product, the system underneath it, and the rules that let an AI build the rest without breaking either.

My role: AI ProductDesignerDrove design + AI build
Timeline: 10weeksMar to Jun 2026
Team: SolodesignerAI under a written brief
Platform: WebappNext.js 16 · React 19
Users: 3leadersCHRO · HM · Talent Mgr
Deliverables: 37componentsIntake to report
Redesign: 8 tabsto 3 tabsevery heading a question

01 Context & problem

Data everywhere. A decision nowhere.

One question:

Can we hire a Sr. Java Backend Engineer, in Bengaluru,at ₹18 lakhs?

Product

Talent Intelligence 2.0

One intake → an analyst-grade report across three views, guidance woven into every section.

Model

Freemium → Subscription

Free preview earns trust, then the user subscribes for full reports. Designed end to end, with publish as the conversion point.

Market

India-first

Salaries read as ₹ CTC, not base pay, and the benchmarks come from GCC hiring across these four cities.

Today it takes three to four days and ends in a number nobody can explain

Business problem

Trust broke twice.

The free report had to earn the subscription, and even when it did, the flow ended with no next move.

User problem

Three roles, all flying blind.

A CHRO, a hiring manager and a talent manager each hand-assemble fragmented data to answer one sharp question.

Both problems have the same fix

answer the question, show the working, then tell them what to do about it.

02 Who signs off

Credibility is not abstract. It is three specific people, and each doubts something different. They come from the v1.0 UX brief, so the bars below start at assume.

Market Benchmarking

CHRO

board-level · scans

How do we compare to competitors?A benchmark built for the board deck.
Are our comp bands defensible?Comp bands vs market, source cited.
Will this hold up to the board?Every number traces to a source.

Trusts a benchmark they can carry into a leadership meeting.

assumevalid

Talent Availability

Hiring Manager

close to the ground

How big is the pool, really?Live pool size, no middleman.
What skills does it actually have?Real skill breakdown of supply.
Am I narrowing it myself?Filters show their own impact.

Trusts concrete supply data, no recruiter middleman.

assumevalid

Hiring Demand

Talent Manager

the power user

Is demand growing, and how fast?Demand trend plus rate of change.
What skills aren't we hiring yet?Emerging skills flagged early.
Ahead of the curve, or chasing?Sources shown on every trend.

Trusts trend lines, and scrutinises sources before believing them.

assumevalid

How the brief shaped the design

What I learned

Experts don't trust what they can't check.

How I knowThe v1.0 brief has every persona asking where a number came from, and the India data has enough real gaps to justify the question.

So the design

Every number opens to show the inputs behind it.

What I learned

One product answers three different questions.

How I knowThe brief maps one view per persona; the questions repeat.

So the design

Organised by question: three role-based views, one per persona.

What I learned

Leaders decide fast, then defend the call later.

How I knowThe CHRO decides at board level: "carry it into a meeting."

So the design

Every section leads with the answer, plus a pinned action to take away.

03 Metrics

Metrics were set before designing, so success was never a matter of taste.

Targets I set, and what they measured

Report trust

7/10

not yet measured

Time to a decision

<5h

not yet measured

Acts on the answer

70-75%

not yet measured

Reaches the end

90%

not yet measured

Business numbers · what leadership will track

Preview → subscription

≥8%

targetConversion

Reports finished

≥70%

targetCompletion

2nd role in 2 wks

≥40%

targetRetention

Clean generation

≥98%

targetReliability

04 Strategy & trade-offs

Chat window A chat window makes verification harder.

Autonomous agent An agent that acts on its own hides its reasoning.

Dashboard A dashboard answers nobody's specific question.

A report An expert needs an artifact they can forward and defend.

Directions built

Blueprint

Rich evidence; earns trust by showing everything
Buries the decision under scrolling

Decision-First

Answer up top; fast to act
Hides the working these experts demand

Shipped hybrid

Answer + evidence together; pinned action per tab
Question-led tabs scale across personas

One task flow, gated on trust

The gate is an opportunity, not a wall.

free

Describe the role

One guided intake. Known roles auto-populate.

free

Submit

Processing shows every source by name as it arrives.

gate

The gate

Your report is ready. Create a free account to view it.

subscription

Unlock report

Credits deducted with clear confirmation.

subscription

Act on the Playbook

Hire, pass, or reshape the ask.

05 Decisions & exploration

What I tried, killed, and shipped, and the one reason that settled it.

0 variants built across 5 decisions

Decision

0built → 0shipped

Explored

Dark header Outlined grid Progress meter Soft zebra Stacked rows Gradient Bordered Pill rows Aurora Glass (Solid)

The only one that stayed readable at density and quiet by default.

Explored

Plain label …9 other treatments Depth Deck

Carries the section's question as well as its name, so the report's logic reads at a glance.

Explored

Soft Cards Activity Timeline Quiet List

Stays out of the way until you need it; owner-approved as the calmest.

One ratio

Two bars

Explored

Single deficit-ratio bar Dual bars

Multi-column

Single column

Explored

Multi-column Single column

27 built, 5 kept

Exploration was cheap; decisions were expensive.

06 Solution evolution

v1.0 was the analyst's wall: eight dense tabs, with the feasibility score buried as one card among many. What shipped is three tabs, and every section heading is the question it answers.

v1 8-section report

shipped 3 tabs, question-led sections

More rebuilds

v3

v4

v5

v6

v7

The reduction

8sections → 8tabs

Every section heading is the question it answers

07 The product · live

Here is what those decisions built. Read the real report below, then move a lever and watch the verdict recompute.

Sr. Java Backend Engineer

See live

Talent Availability report: addressable pool 4,550, source employers, skill funnel

Hiring Demand report: 1,225 open roles, competitor aggression, rising skills

Market Benchmarking report: 3.5:1 ratio, city arbitrage, market median CTC

Tabs switch as you scroll · click a tab to jump

More screen designs

New Intelligence Sprint intake form

Account settings

The human-override lever

0/100

Challenging

Skill requirement

Sourcing city

Notice period

Max budget (CTC)₹18L

Load a real dashboard sprint

Preset scores are authored demo states. No provenance was recorded for them.

08 Design system · accessibility · handoff

A product this size needed a system an AI could extend without drifting. 37 components, every value bound to a token, nowhere to hardcode.

One source of truth, four hops

Follow one value the whole way down #2D5BFF

01Figma variable color/brand/500 1place

02tokens.json color.brand.500: #2D5BFF 270tokens

03app/globals.css --color-brand-500: #2D5BFF 335variables

04Tailwind v4 Run reportbg-brand-500 0raw hex

Component library

0 of 37, all named

What keeps it from drifting

7 states, honestly

Default 1 / 7

Interactive Shortlist

Display N/A

Interactive components ship all seven. Display cards keep the three that can happen and mark the rest N/A, with a reason in the spec.

Accessibility is a rule

Every component clears an AA contrast floor and takes its ARIA from the spec. Nothing is signalled by colour alone.

Spec is the contract

No Code Connect on the Pro plan, so a plugin and a naming rule tie each frame to its .tsx + .md + .stories. Parity 36/37 as of 1 Aug 2026.

Branch discipline

AI works, then stops uncommitted; I review, commit, and open the PR. Nothing touches main directly.

The guardrail: repaint the brand yourself

Try a brand colour

One colour change updates 6 tokens at once. Not every colour gets through.

Click a colour to repaint the system

Label on primary fill 5.23:1Passes AA

Token propagation

#2D5BFF color.primitive.blue.500

colour check agent

Button Generate report

Chip High growth

Field · focus

What I can prove built, shipped, open to inspection

What I can't yet no sign-off, no real traffic

0 components

0→0 tokens → CSS vars

0 raw hex / px

0 commits · 100% mine

0 runaway edit stopped

Measured · think-aloud, n=5

Report trust

target 7/10

0

not yet measured

Time to a decision

target <5 h

0

not yet measured

Acts on the answer

target 70-75%

0

not yet measured

Reaches the end

target 90%

0

not yet measured

Four numbers, four blanks. Every one of them waits on real traffic.

After launch · what moves each number off zero

Preview → subscription

0

Conversion

01

Publish, with the funnel instrumented from day one: preview → subscribe → generate.

Reports finished

0

Completion

02

Take the three under-target metrics back into the design, then re-measure on real traffic.

2nd role in 2 wks

0

Retention

03

Rework the report on what only real usage shows: activation, conversion, repeat visits.

Clean generation

0

Reliability

—

No step of mine fills this one. It waits on the other three landing first.

09 Results · reflection · next

The craft is verifiable today, and the usability targets now have numbers. The business ones still wait for real traffic.

Three things a model still cannot decide for you.

System
Holding 335 variables coherent while the surface keeps growing.
Taste
Spending colour on the one thing in the frame that has to be read first.
Governance
Catching a runaway edit before it reaches a hiring decision.

Three tabs.Countless trade-offs.

Data everywhere. A decision nowhere.

Today it takes three to four days and ends in a number nobody can explain

Both problems have the same fix

Three people can kill this hire.

CHRO

Hiring Manager

Talent Manager

How the brief shaped the design

The bar, set before designing.

Why a report, not a chatbot?

Directions built

Blueprint

Decision-First

Shipped hybrid

The gate is an opportunity, not a wall.

Describe the role

Submit

The gate

Unlock report

Act on the Playbook

I built every option before I picked one.

Eight tabs down to three.

v1 8-section report

shipped 3 tabs, question-led sections

The reduction

Every section answers a question a user asked.

More screen designs

The human-override lever

Built so an AI can extend it without a designer checking every frame.

One source of truth, four hops

Component library

What keeps it from drifting

The guardrail: repaint the brand yourself

Try a brand colour

Here is what I can prove, and what I can't.

AI made production cheap. The expensive part is judgment