SOUQ

Souq calls itself the financial market for game economies, a platform meant to turn players of web3 games into owners who share in the economic upside of the games they play. Our UX/UI design for the platform starts with the portfolio manager. A game page, here Star Atlas, opens on a cover banner with tabs for Portfolio, Economy, News & Social and About. Below it, five KPI cards run from Collections Owned to Invested Capital above an area chart priced in USD, SOL, ETH or BTC.

Players hold items across several wallets, so Profile Settings lists each connected wallet with its own Disconnect button. Item pages pair Price over time with a Price vs Rarity scatter, next to similar listings filtered by trait.

Besides tracking, Souq runs staking vaults. Depositors put stablecoins into a vault such as ETH-Gaming, receive vault shares and earn rewards in game tokens like ILV, APE and IMX. Every action in that flow ends in a confirmation modal, and we designed them as one family: Select a Blockchain, Confirm Deposit, Buy and Sell Shares, Add and Remove Liquidity, Withdraw Rewards.

All of them follow the same order. The vault or pair name sits on top with a refresh icon, amounts follow in dark tiles, and the fees are itemised before the button: deposit, redemption, gas, DEX fee, slippage, price impact. Then comes one confirm button with a blue-to-magenta gradient outline, the same treatment that marks the chosen chain in the wallet picker.

The component set is built for dense financial data on a near-black background, and colour carries meaning. Mint green, taken from the arc in the Souq logo, marks gains and APY. Red marks losses, amber marks flat values, lavender handles secondary labels and inactive tabs. The blue-to-magenta gradient is kept for the element in focus: the share slider, the selected time range, the active KPI card.

Key components are drawn in each state. The deposit form appears four times as the slider moves from 0 to 75 percent and reward estimates fill in, and the time filter is shown with each of 24h, 3D, 1W, 1M, 1Y and ALL selected. Two public-site headers sit above a Holdings carousel that lifts the chosen NFT onto a lit pedestal.

Time-locked staking needs explaining before anyone deposits, so we turned it into a five-step carousel: deposits are made, staked token positions are created, depositors receive vault shares, rewards are distributed, and shares are redeemed when the lock ends. One diagram carries every step, with the Souq S monogram at the centre branching to two staked positions and AMM liquidity. It is drawn in twelve states, from a coin leaving the depositor to the ring lighting up as shares are issued.

Performance uses cards as tabs on desktop and mobile: Share Price, APY Rewards and Combined Return each switch the chart, and the APY and return charts draw one line per lockup period. On the phone, the vault page opens with APY, a deposits bar and Historical Performance.

For the 3D side of the brand we built a subway tunnel of neon frames, blue and pink light over rail tracks, with an outlined Souq wordmark in the foreground. It serves as the welcome screen, where a single mint Connect your Wallet button is the only action. A similar neon tunnel runs behind the market cap cards in the game page header, and the desktop renders tilt the laptop over blocks in the gradient colours of the interface.

The NFT item page puts blockchain, creator, contract address and the ERC-1155 standard in one row, then buy and sell price with 24h change, owners and supply, and each attribute with its occurrence rate beside a Buy Now button.