digiyatra

Contactless air travel · Redesign

Rebuilding DigiYatra into a calmer, more trustworthy travel companion.

A ground-up redesign of India's face-recognition airport flow — taking a dense, low-contrast legacy app and rebuilding it on the UX4G design system for clarity, accessibility and trust.

Role

Product & UX design

Platform

iOS · Android

Design system

UX4G Web Kit 2.0

Screens redesigned

15 end-to-end

BEFORE

redesigned

AFTER

9:41

digiyatra

Log in or sign up

Enter your mobile number. We'll send a one-time code to verify it's you.

Mobile number

+91

98765 43210

By continuing you agree to DigiYatra's Terms and Privacy Policy.

The brief

DigiYatra lets travellers walk through airport checkpoints using just their face — no boarding pass, no ID checks. The technology is excellent. The app around it was not.

The legacy app leaned on heavy gradients, saturated low-contrast input fields, and screens that jumped straight into a form with little heading or context. Onboarding, boarding-pass storage and the airport scan were spread across disconnected, visually inconsistent screens. The goal: rebuild every screen on UX4G — government-grade, accessible, and bilingual-ready — without losing the speed travellers love.

The starting point

The app we inherited

These are real screenshots of the screens travellers used most, with names, numbers, faces and codes redacted. The flow works — but the visual language drifts from screen to screen, and contrast and hierarchy make it hard to scan in a bright, busy terminal.

Splash

Mobile login

OTP

Device lock

Home & pass

Airport services

Real screenshots · DigiYatra iOS v4.2.15 · scroll to see all seven

Auditing the old app

Five problems we kept running into

The two screens travellers see first set the tone — and both worked against trust and legibility.

Legacy login screen

Low-contrast filled fields

White text on a saturated dark-blue input fails WCAG contrast and reads as already-filled or disabled.

No context before you act

The screen opens straight to a phone field — no heading, and no hint that a one-time code is on the way. First-time users are left guessing what happens next.

Inconsistent visual language

Each screen mixed its own gradients, blues and corner radii — nothing felt like one connected product.

No reassurance about privacy

A face-recognition app never told travellers where their biometric data goes — a critical trust gap.

Cramped tap targets

Dense tile grids and small links sat well below the 44px minimum target — hard to hit in a busy terminal.

Design principles

Four rules we held every screen to

Legible by default

High-contrast ink on white, real labels, and AA-rated colour pairings — readable in bright terminal light.

Trust, made visible

Say where data lives at every step — “stored only on your device”, a biometric Privacy Lock, and granular consent screens with clear data, purpose and duration.

One connected flow

A single home, a clear next-trip card, and three ways to add a booking living together in one place.

Built on UX4G

Government-grade components, 44px targets, a visible focus halo and bilingual-ready Noto Sans type.

Before & after

The same screens, rebuilt

Three of the highest-traffic surfaces, legacy on the left and the live redesign on the right.

BEFORE

01 · Sign in

AFTER · LIVE

01 · Sign in

9:41

digiyatra

Log in or sign up

Enter your mobile number. We'll send a one-time code to verify it's you.

Mobile number

+91

98765 43210

By continuing you agree to DigiYatra's Terms and Privacy Policy.

Outlined field replaces the dark fill — text and placeholder pass AA contrast.

Solid navy-blue CTA reads as tappable, with a clear hover and focus state.

A real heading and helper text explain what happens next.

BEFORE

02 · Home

The old DigiYatra home screen, with the boarding pass in a carousel

AFTER · LIVE

02 · Home

9:41

digiyatra

Travellers

Gate passes

Pass 1 of 2 · swipe to switch

Quick actions

Recent

DEL → BLR

02 Jun 2026 · 6E 511

Completed

The boarding pass leads the screen as a clean, scannable card — the survey banners and clutter are gone.

Create ID and Add boarding pass sit up front as quick actions — the two tasks travellers came for.

A calm header drops the “welcome back” greeting; a traveller filter keeps each person's pass one tap away.

BEFORE

03 · Boarding pass

The old DigiYatra app — the boarding pass lived inside the home carousel

AFTER · LIVE

03 · Boarding pass

9:41

Boarding pass

IndiGo · 6E 2043

Boarding 05:55

On time

AMD

Ahmedabad

06:25

18 Jun

2h 05m · Non-stop

DEL

New Delhi

08:30

18 Jun

Gate

A12

Seat

14C

Zone

PNR

KJ7X2P

Asha Rao

Face linked · Show this QR or just look at the camera.

A dedicated pass — in the old app it was a card buried in the home carousel, with no screen of its own (so the legacy shot here is the home screen).

A real ticket shape with a perforation feels familiar and scannable.

A live QR and Face linked badge tie the pass to the traveller's face credential.

Rebuilt end to end

Familiar flows, rebuilt to feel effortless

ID setup, the face selfie and the gate QR all existed in the old app — just scattered across clunky, low-contrast screens. The redesign brings them together into one guided, on-device flow. Every phone below is the live prototype.

9:41

Step 3 of 3

Add your face

Center your face in the circle. This stays encrypted on your device.

Tap to capture

On-device face capture

9:41

Step 1 of 3

Set up your DigiYatra ID

A one-time setup that lets you breeze through airport checkpoints with your face.

Verify your identity

Aadhaar e-KYC via DigiLocker

Add your face

A quick selfie, stored only on your device

You're ready to fly

Add a boarding pass and go

Your data stays with you. DigiYatra uses Aadhaar only to verify identity. Nothing is stored on a central server.

Guided ID setup

9:41

Gate pass

6E 2043 · Asha Rao

AMDDEL

Gate

A12

Seat

14C

Zone

The e-gate camera matches your face automatically. If it doesn't recognise you, show this QR to the staff at the gate.

Stored only on this device

Gate QR — the fallback

Beyond the brief

Four things the old app buried

Privacy Lock, family travellers and granular consent were all in the old app too — buried in menus and pop-ups. We pulled them into the open and made each one clear.

The QR, one tap from anywhere

Face matching happens at the airport's e-gate, not in the app — so the app's real job is the fallback. The home screen now leads with each traveller's live boarding QR, reachable in a single tap when the camera doesn't recognise someone. No digging through menus at the gate.

9:41

digiyatra

DigiYatra is locked

Privacy Lock is on. Your boarding passes and ID are hidden until you unlock with your face or fingerprint.

Nothing leaves this device

Biometric Privacy Lock

Face or fingerprint to open the app.

9:41

Wallet

Every DigiYatra ID saved on this phone. Switch between them, or add a family member or minor.

Stored only on this device

Asha Rao

Primary · you · Aadhaar •••• 4827

Active

1 boarding pass

Adding an account needs that person's Aadhaar verification and consent.

One wallet, many travellers

Family & minors, each verified on-device.

9:41

User consent

Verified Credential creation

I give my consent to the Digi Yatra Foundation to obtain the data below from UIDAI (Aadhaar).

Data consumer

Digi Yatra Foundation

Data

Name, Date of birth, Gender, Masked Aadhaar number, Facial image

Purpose

Only to match your Aadhaar photo with your selfie and create your Digi Yatra Verifiable Credential (VC) on a successful match.

Duration

Your Digi Yatra VC is saved locally on your phone until you delete it or uninstall the app.

No data is stored centrally on Digi Yatra servers.

Granular, on-device consent

Clear data, purpose & duration per action.

Accessibility first

Built to GIGW & WCAG 2.2 AA

As a government service, DigiYatra has to work for everyone. The redesign bakes accessibility into the tokens, not as an afterthought.

AA contrast on every text and UI pairing.

44px minimum targets — easy to hit in a moving queue.

Bilingual-ready Noto Sans for Hindi + regional scripts.

In-app text size & contrast controls in the menu.

screens rebuilt end-to-end

WCAG 2.2 contrast across the board

ways to add a booking, in one place

connected home, not a tile grid

Walk through it yourself

Every “after” screen above is the real prototype. Open the interactive version and move through all 15 screens — login to gate QR.

digiyatra

A concept redesign built on the UX4G design system. Unofficial — not affiliated with, endorsed by, or connected to the Government of India, NeGD or MeitY. Legacy screenshots are redacted to protect personal data.