Complete product mind map
The full system flow was mapped first: where the QR lives, how users arrive, how verification works, where rewards appear and what happens across alternate states.
CASE STUDY / 02 / MOBILE LOYALTY
Loyalty
Program.
A mobile web app for a QR-based loyalty program. A QR placed inside product packaging is scanned after purchase, the user completes verification, and an instant monetary reward is credited online. The full product flow, Figma prototype and frontend were built around the realities of installer and labour-class users.
PRODUCT BOXInside-pack
reward QR
reward QR
01 / SCANScan the QR
02 / VERIFYEnter OTP
714280
03 / REWARD₹ reward addedInstant confirmation
THE PROBLEM
A reward flow has to work in seconds, not ask users to learn a system.
The primary audience would often be using the experience quickly on a phone in a real working environment. That meant the product had to reduce reading, keep steps obvious, recover from input mistakes and make verification feel simple enough that the reward itself remained the focus.
AUDIENCEInstaller / labour users
SURFACEMobile web app
FLOWQR → OTP → reward
ROLEMind map → UI → frontend
WHAT I DESIGNED + BUILT
Audience-specific mobile UI
The interface was designed specifically for a practical, mobile-first audience with large actions, clear language and minimal interaction depth.
Interactive Figma prototype
A fully clickable mobile prototype was created so the business could experience the complete app flow before frontend implementation.
Full frontend implementation
After design approval, the mobile web app frontend was built with the interaction logic and UI states needed for backend integration.
OTP usability details
Six-digit OTP input was enhanced so pasting the complete code into one field automatically distributes each digit across all six boxes.
Frontend-led notification behavior
Useful interaction and notification states were implemented in JavaScript wherever possible to reduce unnecessary backend work and make the flow feel complete.
KEY PRODUCT DETAILS
Inside-pack QR
The reward entry point is protected inside the product box, connecting the physical purchase to the digital flow.
Instant monetary reward
The system communicates a direct reward outcome instead of an abstract points mechanic.
Low-reading interface
Primary actions and status feedback are visually obvious for fast comprehension.
Paste-friendly OTP
A small interaction detail removes a common source of frustration during verification.
Mobile-only thinking
Layouts and behavior were designed for the actual target surface rather than adapted down from desktop.
Backend-ready UI states
Frontend behavior anticipates verification, notification and response states so integration remains simpler.
INTERACTION DETAIL
Paste once.
Six boxes fill.
A small JavaScript enhancement removes an unnecessary manual step during OTP verification.
ENTER 6-DIGIT OTPTry pasting: 714280