A modernised registration flow, designed to stop duplicate players.

The current KCA web form lets the same person register many times — Aadhaar, email and mobile can all be reused. This redesign re-architects registration around a selfie + Aadhaar OCR identity step, then re-uses the extracted data to pre-fill the form. Cricket-specific fields stay, but the experience is restructured into a guided 6-step wizard tuned for first-time players.

Selfie capture Aadhaar OCR (front + back) Firebase email & SMS OTP Pre-filled fields Submits to /savenew with CSRF token

Design principles

Heraldic, not gimmicky. The navy + gold honors the KCA crest without turning into a sports-fan app.
Identity first. Selfie + Aadhaar OCR happens before forms — once we have one biometric anchor, the rest of the data is just confirmation.
One thing per screen. No 1200px scrolls on mobile; each step asks for a coherent chunk and validates before moving on.
Pre-fill aggressively. Name, DOB, address and Aadhaar number come from OCR; the player edits, not retypes.
Required vs optional, made obvious. Only photo + Aadhaar are mandatory documents. Birth certificate, academic and employment documents are clearly tagged optional.

The visual system

Navy 900#04132b · base

Navy 800#0a1f44 · primary

Navy 700#122a52 · surface

Gold 500#d4af37 · accent

Cream#f7f3e8 · canvas

Ink#0a2540 · text

Typography

Cormorant Garamond · headings, splash, logo type

Inter · UI, body, form fields, captions

Aa Bb Cc Aa Bb Cc 123

Components

Buttons:

Primary Gold CTA Ghost

Input: 12px radius · 1px hairline · gold focus ring

Card: 14–18px radius · cream surface inside white screen

02 · Sign in

For players already registered with KCA

Both /login and /password/reset use the same CSRF _token pattern as /savenew. The app GETs the page, scrapes the hidden token, then POSTs the credentials (or email) with the token attached. Sessions persist with a secure HTTP-only cookie stored via react-native-cookies.

9:38●●●●○ ▮

Welcome back

Username *

arjun.k.nair

Password *

•••••••• 👁

Remember me Forgot password?

New to KCA? Register here →

← Back to home

Username + password

Matches the existing /login form fields exactly — username, password, remember-me toggle, forgot-password link.

9:39●●●●○ ▮

Forgot password?

No worries. Enter your registered email and we'll send you a reset link.

E-mail address

arjun.k.nair@gmail.com

The link is valid for 60 minutes. Check your spam folder if you don't see it.

Remembered it? Back to sign in

← Back to home

Just an email field

Mirrors /password/reset. POSTs email + scraped _token; server emails a Laravel reset link.

9:39●●●●○ ▮

Reset link sent

We've emailed a password reset link to
arjun.k.nair@gmail.com.
Tap the link in the email to set a new password.

Link expires in 60 minutes. Didn't get it? Resend or try a different email.

Back to sign in

"Open mail app" deep-link

Skips the user back to their inbox instead of leaving them stranded on the app. Resend link is rate-limited to once every 60 seconds.

03 · Identity

The duplicate-killer: selfie + Aadhaar OCR

KERALA CRICKET ASSOCIATION

Member · BCCI

2024 · 25 Season

01 · Splash

Rays spin, crest fades in

~1.5s. The gold sun-rays rotate on a continuous loop; the inner emblem fades in over them.

9:41●●●●○ ▮

Player Registration

Welcome. Before you fill the form, we'll verify your identity using a selfie and your Aadhaar. Takes about 4 minutes.

①Identity
Selfie + Aadhaar OCR
②Contact
Verify email & mobile
③Details
Cricket, career, club & docs

Already registered? Sign in →

By continuing you agree to share your selfie and Aadhaar with KCA for the sole purpose of registration.

02 · Welcome

Set expectations, ask consent

3-step roadmap so the user knows what's coming. Gold CTA, navy background — most premium screen in the flow.

9:41●●●●○ ▮

Take a clear selfie

Centre your face inside the oval. Good lighting, no sunglasses, no caps.

Flip ⤿

● Face detected · hold still

03 · Selfie

The biometric anchor

This is the duplication defence. The selfie is stored against the player; future registrations attempting the same face are flagged.

9:41●●●●○ ▮

We never store your Aadhaar with KCA. It's used once to read your name, DOB & address, then discarded.

Aadhaar — front

FRONT

aadhaar-front.jpg284 KB · captured 9:41 AM

✓ Uploaded

Aadhaar — back

BACK

Tap to upload back sideJPG or PNG · < 300 KB

＋

04 · Aadhaar

Front & back, single screen

Two slots, each capped at 300KB to match the existing form constraint. Continue stays disabled until both are present.

9:41●●●●○ ▮

Reading your Aadhaar

Detecting name, date of birth, Aadhaar number and address. This takes a few seconds.

✓Front side scanned

✓Back side scanned

3Extracting text…

4Matching with selfie

05 · OCR running

Pre-loader uses the crest

The conic gold ring sweeps the crest. Doubles as the global pre-loader pattern used wherever the app is busy.

9:41●●●●○ ▮

We read this from your Aadhaar. Tap any field to correct.

Full name FROM AADHAAR

Arjun Krishnakumar Nair ✎

DOB

14 Mar 2002

Gender

Male

Aadhaar no.

XXXX XXXX 4821 ✓ VALID

Address (permanent)

42, Maitri Lane, Pattom,
Thiruvananthapuram, Kerala
695004

06 · OCR review

Edit, don't retype

Fields are pre-populated with a cream "filled-from-OCR" tint. The user only fixes what's wrong.

04 · Contact

Verify email & mobile via Firebase

9:42●●●●○ ▮

Identity verified2 / 4

Where can we reach you?

We'll send a 6-digit code to confirm this is yours.

Email address

arjun.k.nair@gmail.com

Code sent. Check your inbox.

Enter 6-digit code

Didn't get it? Resend in 0:24

07 · Email OTP

Firebase email link / OTP

Single screen: enter email, request code, type 6 digits. Doubles up — no separate "request" page.

9:43●●●●○ ▮

Email verified3 / 4

Your mobile number

We'll send a one-time SMS code via Firebase.

Mobile

🇮🇳 +91 98472 14201 ✓

Enter SMS code

Didn't get it? Resend in 0:38

08 · Mobile OTP

+91 prefix locked, India

Country code is fixed; only the 10-digit number is editable. Firebase Phone Auth provides the code.

05 · Wizard

Six guided steps with a single progress bar

9:44●●●●○ ▮

Step 1 of 6 · Personal17%

Full name FROM AADHAAR

Arjun Krishnakumar Nair

Known as *

e.g. Arjun

Father's name

Optional

Date of birth

14 March 2002

Gender

Male

Female

Blood group *

Select ▾

Place of birth *

Thiruvananthapuram ▾

Identification marks (optional)

e.g. Mole on left cheek

Step 1 / 6

Personal details

Name and DOB carry over from OCR. Gender becomes a segmented control. Pan/Aadhaar already handled upstream.

9:45●●●●○ ▮

Step 2 of 6 · Address33%

● Permanent

Present

Street *

42, Maitri Lane,
Pattom

City *

Thiruvananthapuram

District *

TVM ▾

State *

Kerala

Pincode *

695004

Present same as permanent

Use the address above

Step 2 / 6

Address — same-as toggle

Permanent pre-fills from OCR. Toggling "same as permanent" collapses the Present section away — keeps the screen short.

9:46●●●●○ ▮

Step 3 of 6 · Cricketing50%

Batting style *

Right-hand

Left-hand

Bowling style *

Right-arm fast

Left-arm fast

Right-arm spin

Left-arm spin

Wicket keeper

Toggle on if you keep wickets

Season

2024 / 25

District *

TVM

Club *

Trivandrum Cricket Club ▾

Step 3 / 6

Cricket-specific fields

Bowling style turns into a 4-option grid. District is pre-set from URL (/district/TVM) and locked.

9:47●●●●○ ▮

Step 4 of 6 · Career67%

Education

School

College

Post-grad

Institution

University College, Thiruvananthapuram

Employment

Optional

Company

Leave empty if not working

Designation

e.g. Associate

Step 4 / 6

Career — employment is optional

Education becomes a 3-option segment. Employment block is visibly tagged optional so school-age players don't get blocked.

9:48●●●●○ ▮

Step 5 of 6 · Previous club83%

If this is your first season, leave it as New Player.

Search clubs

trivan⌕

Previous district

Select ▾

Step 5 / 6

Previous club — searchable dropdown

"New Player" is the default and always pinned at the top. Other options use slug values (lowercase, dash-separated) per the spec.

9:49●●●●○ ▮

Step 6 of 6 · Achievements100%

Optional. Add any representations you've earned — under-19, state, district, college, etc.

State · Under-19 Season 2022/23 · Kerala

⋯

District · Senior Season 2023/24 · TVM

⋯

Step 6 / 6

Achievements

Each achievement is a card so multiple entries don't crowd the screen. Add-flow is a bottom-sheet modal in the live app.

06 · Submit

Documents, review, send

9:50●●●●○ ▮

Almost doneReview next

Already attached

SelfieFrom Step 03 · 312 KB

✓ Locked

Aadhaar (front + back)From Step 04 · 268 KB

✓ Locked

Optional documents

Birth certificateJPG / PDF · < 300 KB

Optional

Academic documentsAdd multiple files

Optional

Employment documentsAdd multiple files

Optional

Submit · Documents

Two locked, three optional

Selfie + Aadhaar are already attached and locked. Only birth cert, academic and employment are optional uploads here.

9:51●●●●○ ▮

Last look. Tap any section to edit before submitting.

Personal Edit

NameArjun Krishnakumar Nair

DOB14 Mar 2002 · Male

AadhaarXXXX XXXX 4821

Blood groupB+

Cricketing Edit

Batting / BowlingRight-hand · Right-arm fast

ClubTrivandrum Cricket Club

District / SeasonTVM · 2024/25

Documents

Selfie✓ Attached

Aadhaar✓ Attached

OptionalNone added

I solemnly affirm that all the information stated above is true and correct to the best of my knowledge and belief.

Submit · Review

Summary cards with inline edit

Affirmation moves here, right before submit. Gold CTA marks the only destructive-irreversible action in the flow.

9:52●●●●○ ▮

You're registered

Your application has been submitted to KCA. You'll receive a confirmation email shortly.

Player IDKCA-TVM-25-04812

Season2024 / 25

ClubTrivandrum Cricket Club

Submitted20 May 2026, 9:52 AM

Submit · Success

Player ID issued

Cream success surface. The player gets a printable card with their KCA ID and the ability to download a PDF receipt.