I just shipped a complete frontend redesign of Hive Lotto. The lottery mechanics haven't changed (everything is still provably fair, on-chain, and transparent) but the experience of using the site is now a whole lot better.
Here's what changed and why.
Why Redesign?
Let's be real. The old design was a quick and shitty UI I knocked together to get the thing live. It worked, but it looked like what it was: a developer slapping some dark CSS on a page and calling it done. Flat cards, a row of unstyled tab buttons, emoji icons everywhere, error messages using browser alert() dialogs. It had "I'll fix this later" written all over it.
The lottery mechanics under the hood are solid: provably fair, cryptographically verified, fully on-chain. The frontend just didn't reflect that. If I'm asking people to trust a decentralized lottery with their HIVE, the interface should at least look like someone gave a damn.
What's New
Modern Design System
I moved to a proper design system with the Inter typeface, Material Symbols icons, and a glassmorphism card style (subtle frosted-glass backgrounds with soft borders) that gives depth without being distracting.
The old emoji-heavy UI (the key emoji for Keychain, the rocket for Hivesigner, dice for draws) has been replaced with proper icons throughout. It's a small detail but it makes a big difference in how polished everything feels.
Proper Navigation
The old tab bar was a row of plain buttons. Now there's a fixed navbar at the top with the Hive Lotto logo, navigation links, and your login status always visible. On mobile, it collapses into a hamburger menu. You can always see where you are and get where you need to go.
Home & Landing Page
There's now an actual landing page with a hero section, a "How It Works" three-step breakdown, and trust badges highlighting that the system is provably fair, fully on-chain, supports instant payouts, and is open source. First-time visitors get context before being dropped into a list of active lotteries.
Dashboard
Logged-in users now have a Dashboard tab showing their profile, creator metrics, and a quick summary of active lotteries. It's a central place to see your lottery activity at a glance without jumping between tabs.
Redesigned Lottery Cards
Active lottery cards got the biggest overhaul. Each card now features:
- A highlighted prize pool section with an icon and clear asset denomination
- A three-column stats row for entry fee, current entries, and your odds
- A proper progress bar showing how full the lottery is
- A compact timer with color-coded urgency: green for plenty of time, yellow for getting close, red and pulsing for under an hour
- Collapsible manual entry instructions so the card stays clean
The entry buttons use proper styling. A prominent green CTA for logged-in users, or side-by-side Keychain/Hivesigner buttons for those who need to connect first.
Result Cards
Completed lottery results now have a gradient header and a gold-accented winner section front and center. The key stats (entries, fee, pool, winning number) are in a clean four-column grid. You can see who won and the details at a glance.
Verification Tool
The verification page was restructured with numbered steps, a cleaner input form, and when results come back, they're displayed with a clear status banner (green for valid, red for invalid), collapsible sections for seed verification and winner selection details, and expandable transaction ID and entry lists.
Rules as Accordions
The rules page moved from a wall of cards to an accordion pattern. Each topic (How It Works, Fees & Prizes, Entry Limits, Security, etc.) is a collapsible section. You can scan the topics quickly and expand only what you need. The important disclaimers section has an amber accent to make sure it stands out.
Toast Notifications
Error messages no longer use browser alert() dialogs. Both success and error messages now appear as styled toast notifications in the top-right corner. Green for success, red for errors, each with an appropriate icon. They auto-dismiss after a few seconds.
Create Lottery Form
The custom lottery creation form keeps all its functionality but now has properly labeled sections with numbered badges, better spacing, and consistent styling on the picker buttons and range sliders.
What Didn't Change
All the important stuff:
- Provably fair mechanics are identical. Same SHA-256 seed generation, same winner selection algorithm, same verification process.
- Keychain and Hivesigner integration works the same way. Connect your wallet, enter lotteries, create custom lotteries. Same flow, better looking.
- The backend didn't change at all. API endpoints are untouched.
- All existing frontend tests pass.
What's Next
This redesign is the foundation. With a proper design system in place, it's much easier to iterate on individual components, add new features, and keep things consistent.
If you haven't checked it out yet, head over to hive-lotto.app and take a look. Same fair lotteries, much better experience.
See you on-chain.