JUST LAUNCHED • LIVE IN PRODUCTION
Designing a High-Trust, Friction-Free Digital Lottery Platform for West Bengal
How I ran testing sessions with 4 target users to transform a high-anxiety purchasing flow into a secure, localized mobile experience that turns skeptical buyers into confident players
Visit official Website
The Friction
Traditional lottery buyers in West Bengal are highly accustomed to physical, paper-based tickets and carry a deep-seated distrust of digital platforms. To understand their anxiety, I ran qualitative user testing sessions with 4 target players
The insights were eye-opening:
Trust indicators significantly influence purchase decisions in online lottery platforms.
The Trust Gap: 4 out of 4 players expressed instant skepticism about "online scams" and wanted clear, immediate proof of official legality
The Mobile Barrier: 3 out of 4 users struggled with cluttered, text-heavy purchase interfaces on their phones, leading to instant cognitive fatigue and cart abandonment
I realized my design couldn't just be a passive wrapper—it had to actively build psychological safety and simplify checkout mechanics under slow 4G mobile networks
Decision Story 1 :
The Ticket Selection Matrix
Traditional lottery buyers in West Bengal are highly accustomed to physical, paper-based tickets and carry a deep-seated distrust of digital platforms. To understand their anxiety, I ran qualitative user testing sessions with 4 target players
LOW FIDELITY WIREFRAME
Homepage
Introducing the product value and key actions.
Refined Layout
Clear value proposition, better hierarchy and focused CTAs.
01
The Setup:
Offline lottery buyers in West Bengal have a highly ritualistic, tactile relationship with paper tickets. They love physically holding the booklets, scanning the layout, and manually picking their 'lucky' numbers. My initial low-fidelity wireframes used standard e-commerce dropdown lists and text inputs to search for ticket numbers
02
The Pivot:
However, during user testing, 3 out of 4 players found this text-entry system sterile, abstract, and slow. They missed the visual thrill of scanning a physical page. I realized that to build digital trust, the mobile UI had to replicate the visual layout of a physical ticket booklet
03
The Solution:
I iterated and designed an interactive, responsive grid of digital tickets. Each ticket is structured as a distinct high-contrast card displaying the state name, draw date, and ticket price (₹150.00). I also engineered a high-performance 'Quick Pick' selection toggle to instantly generate random numbers. This solved checkout hesitation by blending familiar physical patterns with zero-latency mobile interactions.”
Decision Story 2 :
Engineering Trust: Designing an Edge-Case Resilient Onboarding Flow
State lotteries in India are bound by strict regional laws, meaning online purchases are legally restricted to players who are over 18 and physically located within the borders of West Bengal. To satisfy these non-negotiable compliance boundaries, I had to build a mandatory gate verifying both age and real-time GPS coordinates. However, sudden browser-level location prompts often look suspicious to skeptical buyers. Early tests showed that forcing a tracking request without context triggered instant 'scam anxiety,' causing users to immediately abandon the site. I realized that rather than treating compliance as an intrusive system blocker, I needed to design a seamless, highly informative onboarding experience that framed legal rules as proof of the platform’s absolute legitimacy.
ITERATION ARCHIVE: ONBOARDING GATE EVOLUTION
LOW FIDELITY INITIAL PROCESS SKELETALS
The Flow:
During the early brainstorming phase, my goal was simply to map out the foundational logic required to satisfy strict Indian state lottery compliance. These skeletal wireframes focused on the mechanics of age verification and GPS tracking. While structurally correct, testing these raw concepts revealed they were too sterile, lacked local context, and relied heavily on standard, abrupt system prompts that triggered user hesitation
HIGH FIDELITY INTERACTIVE FLOW
The final high-fidelity evolution delivers a bilingually accessible onboarding sequence engineered to handle real-world edge cases—such as disabled device GPS or slow network timeouts on weak 4G connections—by wrapping rigid regulatory hurdles in secure, highly supportive retry states that prevent user drop-off
Decision Story 3 :
Optimizing the Funnel: Designing a High-Speed, Low-Friction Checkout
For users transitioning from physical, paper-based lotteries to an online platform, the payment screen is the ultimate point of friction. Our qualitative research showed that transaction hesitation was incredibly high—players demanded complete transparency over what they were buying . Furthermore, because many target users in West Bengal browse on the move via unstable local 4G connections, heavy, multi-page checkouts frequently timed out, leading to massive cart abandonment. To maximize conversion, I had to completely re-engineer the checkout loop to be visually reassuring, fast, and optimized for poor connectivity
HIGH FIDELITY TRANSACTIONAL FLOW
The final high-fidelity evolution delivers a bilingually accessible onboarding sequence engineered to handle real-world edge cases—such as disabled device GPS or slow network timeouts on weak 4G connections—by wrapping rigid regulatory hurdles in secure, highly supportive retry states that prevent user drop-off
DESIGN DECISIONS UNDER SCRUTINY
Eradicating Form Fatigue
During our initial design iteration, the checkout process was bloated with irrelevant inputs and lengthy form fields that overwhelmed users. Our user testing sessions highlighted that these excessive fields created immediate friction and led to drop-offs. To minimize transaction fatigue, I stripped the checkout form down to request only essential information—name, email, and mobile number—which significantly reduced cognitive load and minimized cart abandonment.
Bridging the Language Barrier
Our qualitative user research with active lottery players in West Bengal revealed a significant linguistic friction point: an exclusively English transaction interface triggered deep buying hesitation and scam anxiety. To build instant credibility and bridge this trust gap, I implemented a bilingually optimized interface featuring a prominent English/বাংলা toggle. This allows local users to review their ticket details, chosen quantities, and pricing in their native language.
Secure, Localized UPI Checkout
Transitioning cash-reliant lottery buyers to a digital screen requires a high level of reassurance, especially at the point of transaction. To overcome this trust barrier, I integrated prominent trust indicators ("Safe, Simple & Secure!") and strategic security badges alongside familiar, one-tap mobile payment shortcuts like GPay, PhonePe, and Paytm UPI. This localized payment funnel avoids complex forms, ensuring fast, confident checkouts even on unstable local networks.
Design System
Systemizing Trust: A Scalable, Mobile-First Design System
To transition the Vira Agency platform seamlessly from static Figma layouts to live, responsive production code, I established a rigorous, mobile-first design system built on atomic tokens. Operating as a solo designer and front-end developer, I needed to ensure that every visual component—from color roles to interactive button states—was fully standardized to guarantee absolute consistency across all viewport sizes. This system was engineered not merely as a visual style guide, but as a functional framework optimized for real-world constraints: it enforced a bilingual typographic scale to handle English and Bengali script heights without breaking container rules, while utilizing lightweight vector assets and semantic CSS to minimize page weight. This systematic approach guaranteed that the live, deployed platform achieves rapid load times and renders flawlessly, even on weak, regional mobile networks
TYPOGRAPHY SCALE & TOKENS
Inter for Headings and body
H1 Heading
Inter • 48/54 • Bold
H2 Heading
Inter • 32/40 • Bold
H3 Heading
Inter • 24/28 • SemiBold
H4 Heading
Inter • 18/24 • SemiBold
H5 Heading
Inter • 12/14 • SemiBold
B-1 (Body Large)
Inter • 18/24 • Regular
B-2 (Body Base)
Inter • 16/18 • Regular
B-2 Bold
Inter • 16/18 • Bold
B-2 SemiBold
Inter • 16/18 • Semibold
B-3 (Body Small)
Inter • 13/16 • Regular
Button Text
Inter • 16/18 • SemiBold
TOKENIZED COLOR SYSTEM
Primary
Primary
#3B2E7E
Red
#D9362B
Dark Red
#B91C1C
Green
#1F9D55
BG Tint
#F2F1FA
Dark
#032D1A
Neutrals
White
#FFFFFF
Text
#2B2B2B
Muted Text
#7A7A7A
Border
#DFDFDF
Symantics
Alert
#DC2F33
Warning
#C98A1C
Info
#1E67B9
Alert BG
#FCF1F0
Buttons
Primary
Secondary
Alternate
Primary
Secondary
Alternate
Primary
Secondary
Alternate
COMPONENTS
Inter for Headings and body
DESIGN DECISIONS UNDER SCRUTINY
Semantic Color Hierarchy
To establish instant credibility and ease transaction anxiety for first-time digital lottery buyers, I curated a highly authoritative, semantic color system. Deep Vira Purple (#3B2E7E) serves as our dominant brand color to convey institutional security and state-backed legitimacy, while the soft BG Tint (#F2F1FA) keeps the overall interface feeling clean, light, and accessible. For interactive elements, high-contrast Red (#D9362B) is deployed strategically to command attention toward primary conversion pathways. This is balanced by a trust-focused Green (#1F9D55) reserved exclusively for success states, ticket availability badges, and legal compliance markers, ensuring a balanced visual hierarchy that seamlessly guides players without causing cognitive fatigue .
Typography Scaling
Our qualitative user research highlighted the critical need for simultaneous English and Bengali translations. To handle the complex spacing, greater vertical density, and unique line-height requirements of Bengali scripts without bloating the platform with multiple heavy font files, I utilised Inter as the sole typeface across the entire design system. Enforcing generous, responsive line-height variables and weight scales natively within Inter ensures that toggling languages renders flawlessly. This completely prevents vertical text clipping, eliminates container overlaps, and keeps the typographic system extremely lightweight and clean on mobile devices.
Performance & Developer Handoff
Operating as both the UI/UX designer and front-end developer for the platform, I engineered the entire component library with a strict, performance-first mindset to combat slow regional mobile networks. All buttons, responsive ticket grids, and input fields were structured using clean CSS flexbox rules and lightweight vector assets rather than heavy, custom graphics. Furthermore, by utilizing Inter as a single variable typeface, I eliminated the need to load multiple heavy, external font files, dramatically reducing browser HTTP requests. This technical discipline minimized data overhead and prevented code bloat, guaranteeing that the live, deployed platform achieves rapid load times and functions smoothly on low-end mobile devices
Section 7
Beyond the Pixels: Designing for Real-World Deployment
Taking the Vira Agency platform from a blank canvas to a live, production-ready product was a masterclass in balancing rigid regulatory compliance, technical constraints, and human behavior. Operating as a solo designer and front-end developer forced me to look beyond aesthetic perfection and design for real-world execution. By designing active fallbacks for weak mobile networks, crafting bilingual typographic systems, and embedding trust markers at high-anxiety decision points, I transformed what could have been a standard lottery site into a highly secure, high-conversion, and authoritative digital gateway. This project proved that great product design is not about presenting a sterile, linear process—it is about navigating real ambiguity and engineering solutions that deliver measurable business and human value
Key Takeaways
Insights
The project established a secure, streamlined purchasing funnel designed to reduce cart abandonment. By introducing native localization (English/Bengali toggle) and prominent trust indicators, the platform now provides a highly accessible, frictionless, and credible experience tailored to the local demographic.
What I learned
The biggest learning was understanding the psychology of designing for a real-money platform. I discovered how balancing high-contrast primary CTAs with minimal form fields and strategic security badges directly reduces user anxiety and builds the confidence needed to complete a transaction.