NFT Loots. Digital wins, on-chain.
Services
UX Design
UI Design
Design System
AI Production
AI Avatar Design
Email & Newsletter Design
Illustration
Motion Design
Developer Handoff
Component Library
Design Tokens
Wireframing
Deliverables
Deployed Web App
Figma Source Files
High-Fidelity Mockups
Interactive Prototype
Design System
Component Library
Design Tokens
Technical Documentation
Engagement
NFT Loots is a decentralized gaming platform with provably fair, on-chain outcomes.
We designed it as a decentralized gaming platform, with UX and UI covering fairness proofs, on-chain minting, and gameplay states in one design system. Players needed to trust the mechanics without the product feeling unserious — and the result balances playful gaming with Web3 credibility.
Component Library for NFT Lootbox Casino
Reusable interface components built for a Web3 lootbox and NFT casino product. Covers the fortune wheel, prize cards, AI-generated NFT avatars, and wallet-linked profile states in one component library.
Landing Page for NFT Lootbox Gaming
The homepage opens NFT Loots as a Web3 lootbox game, leading straight into a live grid of NFT and cash prize boxes. A Top 10 NFTs leaderboard and a biggest-winnings table with Polygonscan links let new visitors verify wins before signing up.
Lootbox Catalog with Odds and Filters
The lootbox catalog lists every box a player can open, each tagged with its prize type – NFT or cash. Cards show win odds, a countdown timer, and cost per open, with search, sorting, and collection filters, plus a no-results state on mobile.
Spin Wheel Mechanic for Lootbox Odds
The spin screen is where a player spends USDT to open a chosen lootbox for a chance at NFTs or cash rewards. A weighted reel displays each outcome's exact odds, backed by a full prize list and an on-chain results log per wallet.
Mobile Spin Flow for Lootbox Openings
The same spin mechanic adapted for mobile, where the reel, prize list, and results log stack into a single scrollable screen. Players can open a lootbox, check odds, and review past results without switching between desktop-only panels.
Win Confirmation Modals for Prize Claims
Two claim states confirm what a player just won after a spin – an NFT or cash credited to their balance. Each modal separates NFT and cash outcomes with a dedicated Claim action tied to the on-chain result.
Wallet Confirmation States for Spins
Interim states cover what a player sees while a spin transaction is confirming on-chain. A loading state on the spin button pairs with an insufficient-balance toast, so pending or failed transactions are never left unclear.
Alternate Wheel Layout and Spin States
A second wheel layout and toggle set covers free spins, paid spins, and fast-spin speed for returning players. States include a claimed NFT win, a free-spin option, and a "maybe next round" loss screen, each with a distinct tone.
NFT Collection Tab in Player Profile
The profile's NFT tab lists every non-fungible item a wallet has won through gameplay. An empty state nudges new players toward their first spin instead of showing a blank grid, alongside balance and total-spins stats.
Wallet Transaction Log for Spin Activity
A chronological log ties every balance change to the wallet address that triggered it. Deposits, spin costs, and NFT wins appear in one table with pagination, plus a dedicated empty state for new accounts on mobile.
Account Settings for Wallet and Profile
Settings let a player manage identity details separately from wallet connection. Avatar, nickname, and optional email fields sit alongside a wallet address with a one-click Disconnect action.
Avatar Selection Modal for Player Identity
A dedicated modal lets a player pick a visual identity without revealing wallet or personal details. A grid of anonymous avatar options with a single selected state and one Change Avatar action keeps the flow to one step.
Wallet Connection Flow and Error States
Wallet connection is the entry point into this decentralized gaming platform, so every failure needed its own screen. Loading, unsupported-browser, and error states each pair a plain message with one action – retry, switch browser, or learn more.
Building a Web3 product where trust in the mechanics decides whether players stay? Show us what you're working on – we'll tell you where the interface earns that trust and where it loses it.
Ready to start your own project?
