Lottogram
A Betting & Lottery Platform - Designed for Both Desktop and Mobile
A betting and lottery platform is one of the densest products to design - odds, slips, wallets, live events, loyalty and promotions all fighting for attention. Lottogram tames that complexity into a bold, confident experience that feels consistent and trustworthy across desktop and mobile alike.
Context & The Problem
Betting platforms live and die on clarity and trust. Users move fast across games, live events and their wallet - often switching between a desktop session and their phone mid-bet. Most platforms feel cluttered and inconsistent between the two, eroding confidence right where money is on the line.
"In betting, the interface is the trust - it has to feel as confident on a phone in your hand as on a desktop at home."
Problem Statement
A data-dense product - odds, bet history, wallets, live events - was hard to make scannable and trustworthy, and even harder to keep consistent across desktop and mobile.
The Goal
Design a bold, cohesive platform with a single design system that scales seamlessly from a wide desktop layout to a focused mobile experience.
Target Audience
Casual players chasing promotions and games, and serious bettors who track odds, bet history and their wallet closely - on whichever device they're on.
Discovery & Research
The research centred on two truths: betting users are impatient and detail-hungry at the same time, and they expect total parity between desktop and mobile. Designing one without the other was never an option.
Typical Betting Apps vs. The Opportunity
- Cluttered screens that bury odds and the bet slip
- Desktop and mobile that feel like different products
- Wallet and history that are hard to trust at a glance
- A bold red-and-gold system that guides the eye to what matters
- One design language scaled across desktop & mobile
- Clear wallet, bet history & loyalty built for confidence
User Personas
"Show me what's hot, let me grab a bonus, and make placing a bet feel effortless."
"I live in my bet history and wallet - I need detail, accuracy and fast switching."
"When an event is live, every second counts - the odds and slip have to keep up."
Cross-Persona Insights
Ideation & Structure
User Flow: From Browse to Bet
The same information architecture was designed twice in parallel - a wide desktop layout (with a foldable sidebar) and a focused mobile layout - sharing one component system so nothing felt out of place between them.
Information Architecture
Play
Home · Games · Live Events
Engage
Promotions · Affiliate · Messages
My Wallet
Balance · Loyalty · Bonuses
History
Bet · BetBuilder · My Info
Visual Design & Style Guide
The identity leans into the energy of the lottery - a bold red core lit with gold for wins and value, grounded by deep navy and clean neutrals. Everything sits on a strict, documented system (a Lexend type scale, plus consistent gaps of 4-80 and paddings of 20-80) so the design stays tight and consistent across every screen and both devices.
Lexend - a clean, friendly sans designed for reading proficiency, keeping a data-heavy betting interface legible at every size.
A bold red-and-gold core for energy and value, balanced with deep navies, a fresh green and clean neutrals.
High-Fidelity Screens
The same platform, designed end-to-end for both devices. Switch between the desktop and mobile views below, and click any screen to open it in high resolution.
Interaction Design & Emotional Intent
The feeling to evoke is the buzz of the game - energetic and exciting, but never reckless. Bold reds and golds create momentum, while clear structure around money keeps it trustworthy.
Foldable Desktop Sidebar
On desktop, a foldable navigation sidebar lets power users reclaim space for dense odds and history, or expand for easy browsing.
Wallet & Loyalty
Balance, bonuses, loyalty and bet/betbuilder history are organised into a clear, confidence-building wallet - the same logic on both devices.
Desktop ↔ Mobile Parity
A shared component system means a user who starts on desktop and finishes on mobile never feels lost - same language, re-tuned for each screen.
Outcome & Impact
Key Outcomes
"A dense betting product made bold, clear and genuinely consistent - from a wide desktop layout right down to a phone in your hand."
📈 Outcome
A complete iGaming design system: Home, Games, Live Events, Promotions, Wallet, Bet & BetBuilder history, Loyalty, Messages and Affiliate - designed end-to-end for both desktop and mobile.
🧗 Challenge
Keeping a data-dense product feeling bold yet trustworthy, and holding perfect parity between two very different layouts from a single component system.
💡 What I Learned
Designing desktop and mobile in parallel - not one then the other - is what keeps a system honest. A strict spacing and type scale is the glue that holds parity together.
🚀 Next Steps
Hand off to engineering, prototype the live in-play interactions, and extend the system to tablet and additional game verticals.