// Work — W-02 // Brand film + dApp // 2025
HubsAI
A brand film, landing page and staking dashboard for a tokenized-retail launch
// 01 — What I did
For the $HUBS launch we designed the landing page, the staking and rewards dashboard, the user flows behind it and a 45-second brand film.
Before any screen, we mapped every path through the product, 32 states including 9 errors and empty states, so failure got as much design as success.
— Ryan Hofmann, Alterra Studio
// 02 — Strategy
4 moves
- M-01
Connecting in four plain steps
An empty dashboard says what connecting unlocks, the picker tells people without a wallet how to get one, and the welcome step warns that a signature request is coming. The signature is a login message, not a transaction.
The wallet connect flow: the empty dashboard, the wallet picker and the welcome and sign step - M-02
Failure gets as much design as success
Notifications say plainly when a stake failed or the network is congested, and the transaction history dates every stake, unstake and claim.
Notifications with failure and congestion states, transaction history and the staking hub dashboard - M-03
Every pool states its terms
Each pool card shows its lock period, capacity, value locked, your stake and pending rewards, with an Active, Paused or Ended badge. The modals show the exact amount you're about to withdraw.
Staking: pool list, my stakes, the stake dialog and the dashboard - M-04
The model, in the order a shopper thinks
The landing page explains before it asks: the claim, the kiosk, three steps (mint your NFT at checkout, stake or play, earn $HUBS), and only then the airdrop and the wallet.
How it works: mint your NFT, stake or play, earn $HUBS; then the $1M airdrop
// 03 — Results
What it did
Launch numbers belong to HubsAI and aren't public, so this is the work we delivered.
| Product design | 66 desktop frames covering 50 distinct screens and states, from wallet connect to claiming rewards |
|---|---|
| Flows | A 32-state flow map for holders and brand admins, including 9 error and empty states, mapped before any screen was designed |
| Launch pieces | Landing page, staking dashboard and a 45-second brand film in one visual language |
| 3D | Kiosk, coins and bolt in Spline, delivered as loops and as interactive embeds |