MoodyMadness · Chapter 02 · Web platform · 2025
A game's front door, built around what is live
The web platform is where MoodyMadness players start: what is live this week, the wallet that lets them in, the reward for coming back, and where they stand.
These are the design file's 2025 frames, from the closed beta on the Abstract chain.
- Role
- Designer — web platform and game UI
- Screens
- Homepage ×2 and phone, wallet, rewards, leaderboard, game dialog
- Chain
- Abstract — wallet sign-in
- Status
- Live in closed beta, 2025
01 · The project
The project
MoodyMadness races eight players at a time on karts built from NFT parts, on the Abstract chain, for the team behind the Moody Mights NFT collection. Around the game sits a website that has to do a platform's work: announce what is running, let people in with a wallet, pay them for coming back and show them their rank.
The file holds two versions of the homepage and its phone layout, the wallet gate and the connect page, Reward Week locked and open, the leaderboard, and the dialog the game shows before it goes fullscreen.
02 · Design decisions
Design decisions
- 01
The homepage leads with what is live
The first screen is whatever is running now: a LIVE NOW tag over Closed Beta, one orange Play Now button, the teaser, and the partners in a single row. Under it, the creators' karts sit in a strip of cards, each in its own colour.
Every event after that gets a full-width band with its own scene — Ranks of Ra Season 3 in the desert, the Halloween event under a moon — and a tag that says whether it is live now or coming soon. On a phone the first screen keeps the same order: the tag, the title, the button.
The event bands 
First screen · 375 Design file · The event bands, and the first screen at 375. The desktop first screen is at the top of this page.
- 02
The season, drawn as a path
The second version of the homepage turns the season into a path down the page: Closed Beta, Diamond Rush and Meme Wars, each a node on one vertical line with its own character and a short text, and Diamond Rush ending in a Join Waitlist button.
Meme Wars carries the top five of the leaderboard inside it, so the competition is on the homepage before anyone opens the leaderboard.
Design file · The path, from Closed Beta to Meme Wars. The paragraphs are placeholders.
- 03
One wallet between a visitor and the game
Until a wallet is connected, the platform asks for one thing — connect your wallet and sign in to access the game — over the game's own scene. The connect page says the same in a sentence, link your wallet and start playing, with one orange button.
The same button waits in the top bar on every page, beside the player's diamonds and MXP balance, so the way in never moves.
The gate on the homepage 
Connect wallet 
Connect wallet · 375 Design file · The gate on the homepage, and the connect page on desktop and phone.
- 04
A reward for each day you come back
Reward Week lays out seven days as cards, each with its diamond reward, and marks the ones already claimed and the ones missed as expired; one button claims today's. A banner above it offers 500 diamonds for an upvote on the Abstract Portal.
Without early access, the same page keeps the rewards in view but points the player to the team, or to the drops from the top Abstract streamers.
Without early access 
With early access Design file · Reward Week without early access, and with it.
- 05
The leaderboard ends on a clock
The leaderboard puts the top three on a podium, then the table, with daily and monthly tabs and a countdown to the end of the period — 10 days, 23 hours and 59 minutes in the file.
The player's own position has a row of its own between the podium and the table, so nobody has to scroll to find themselves.
Design file · The leaderboard, with sample players.
- 06
The game says how to make it run
Fullscreen in a browser can cost frames, so before it goes fullscreen the game opens a dialog that says why — WebGL and the internal graphics card — and how to fix it: step by step for Windows, and for Macs with an external GPU. The player can cancel, or enter fullscreen anyway.
Design file · The dialog shown before fullscreen.
03 · What I delivered
What I delivered
The homepage in two versions and at 375, the wallet gate and the connect page on desktop and phone, Reward Week in its locked and open states, the leaderboard with its podium and countdown, and the game's fullscreen performance dialog — under one top bar with the player's balances.
04 · What I would revisit
What I would revisit
Every main button sets white on orange or green: Play Now, Connect and Join Waitlist read 2.12:1, Claim Reward and Vote 2.03:1 — under even the 3:1 a large label needs. Navy text on the same orange reads 8.79:1, so I would keep the colours and change the labels to the game's night blue.
I would also never hand over a homepage with another game's placeholder under its sections: the paragraphs under Closed Beta, Ranks of Ra and Halloween are borrowed from another title, and a page whose job is to announce events should carry the events' own words.
Project note
The pictures are the design file's frames. The short paragraphs under the homepage's sections are placeholder text borrowed from another game. The karts, characters and scenes are the art team's, and some imagery in the layouts is AI-generated or stock.
05 · Explore the system
Explore the system
A night-blue game sky, one violet for the interface, orange for the way in, and green for what is live or can be claimed.
- Display
- Catfiles
- Labels
- Rajdhani, Archivo Black
- Text
- Poppins
Colour and typography4 colours
- Violet
- #4E4AFFBalances, active tabs and the interface's accents. White on it reads 5.60:1.
- Orange
- #FF9A17The way in: Connect, Play Now, Join Waitlist. White on it is 2.12:1; see What I would revisit.
- Green
- #08D171LIVE NOW tags, Claim Reward and Vote. White on it is 2.03:1.
- Night#10093BThe ground under every page. White on it reads 18.68:1.
Hex values and type styles read from the design file's frames; ratios measured against the ground named beside them.
Full page designsthe homepage, end to end
Design file · The live-events homepage end to end, 2025.
Contact