After we rebuilt India’s e-Visa portal on UX4G for React, we wanted to test the kit on a different kind of problem. The e-Visa work was a desktop-first web service. This time we wanted a phone.
So we picked DigiYatra, the app that lets travellers clear airport checkpoints using just their face, with no boarding pass and no ID check at each gate. The technology is genuinely good. The app around it was the weak link.
What was wrong with the original
The legacy app fought its own users. Input fields were white text on saturated dark blue, which fails contrast and reads as already filled or disabled. Screens opened straight into a form, with no heading and no hint of what came next. The visual language drifted from screen to screen, so nothing felt like one product. Tap targets sat below the 44px minimum, hard to hit in a moving queue. And for an app built entirely on face recognition, nothing ever said where your biometric data goes. The flows worked, but it was hard to scan in a bright terminal and harder to trust.
To be clear up front: this is an unofficial concept, an expert review rather than field research, and we are not affiliated with the Government of India, NeGD or MeitY. The legacy screenshots in the case study are redacted. We rebuilt it to learn something about our own tools.
What we built
Three things, all live on the docs site:
- A redesigned app: 15 screens rebuilt end to end, from sign-in to the gate QR, on a calm, legible, government-grade layout that says where your data lives at every step.
- An interactive prototype you can move through. Every “after” screen is the real component rendered live, not a flat mockup, so it can’t drift from the design.
- A case study walking through the problems, the principles, the before-and-afters, and the accessibility work.
Read the full case study, or open the prototype and move through all fifteen screens yourself.
The insight that reshaped the app
One small decision changed everything. Face matching happens at the airport’s e-gate, not inside the app, so the app’s real job is the fallback: the boarding QR for the moment the camera doesn’t recognise someone. The old app buried that QR inside a home carousel, several taps deep. We put each traveller’s live QR one tap from anywhere and let the home screen lead with it. Once the app knows what it’s actually for, the rest of the layout falls into place.
What the kit made easy
This is the part we care about, because it’s the test we set.
Trust became something we could show, not just say. The components let us surface where data lives: a “stored only on your device” line at each step, a biometric Privacy Lock to open the app, and consent screens with clear data, purpose and duration. For a face-recognition service, that reassurance is the product, not a footnote.
Accessibility came built in. AA contrast on every pairing, 44px targets, a visible focus halo, bilingual-ready Noto Sans for Hindi and regional scripts, and the GIGW and RPwD universal-access widget were already in the kit. For a government service, where access is an obligation rather than a nice-to-have, that’s the whole point.
The screens are real components, not hand-rolled markup. Cards, inputs, the stepper and badges did the heavy lifting. The flow, the QR-first home and the privacy story are our design judgement; the controls and their states are the kit’s.
One honest note on the build: this is rendered with @hopline/ux4g-react, the web kit, as a
clickable prototype of a mobile app. Now that
UX4G ships for React Native too, the same components and
tokens could back the real thing on a phone, with no redesign in between.
The honest part
It’s a concept, not the live app. There’s no backend behind it, and the insights come from expert review rather than testing with real travellers. The flows already existed in the old app; we rebuilt them to feel effortless, we didn’t invent them. The next step, if this went live, would be moderated usability sessions, including people using screen readers and magnification, in the noise of a real airport.
What we came away with is the answer the e-Visa rebuild gave us, now on a second and very different surface: the kit holds up, and most of the work was design judgement rather than fighting the tools.
The code is on GitHub, every component is on the showcase, and if you’re building something for citizens and want a hand, say hello. A real person replies, usually within a day.