Skip to content
All work
TCG World

About project

TCG World2024-2026Shipped

A metaverse, its store and its games, redrawn as one world.

TCG World is an open-world PC MMORPG where land, vehicles, creatures and cards are NFTs players own and trade. For version 2.0 I moved it onto one visual system: website, cards, graphics and the phone game TCG Fishing solo, the in-game UI in a team of two. Five surfaces share one kit, and the 2.0 website went live at tcg.world.

  • Game UI
  • Web Design
  • Design System
  • Graphic
Role
UI/UX & visual designer: website, cards, graphics and TCG Fishing solo; in-game UI in a team of two
Client
TCG World · open-world metaverse
Platform
Game · PC · Mobile · Web
Tools
Figma, Photoshop, Illustrator
Website, phone game, garage and cards side by side: Legendary orange marks the Furon and the Stallion alike.

Challenges

Phase one shipped surface by surface and looked like several products: the old website alone had thin type and a palette of its own. Version 2.0 had to make every surface, from a landing page to a card in a pack, read as one world.

  • Five surfaces on one kit: website and store, PC game, battle-royale mode, mobile game, NFT cards and packs
  • In-game UI read over live 3D scenes
  • An NFT economy where rarity sets value, so rarity has to read the same everywhere
The player
moves between site, store and game, and should never feel they have left the world.
The collector
pays for rarity, so a Legendary has to look Legendary on a card, in the garage and in the store.
The team
keeps adding modes, pages and asset types, and cannot redraw buttons, panels and rarity for each one.

Solutions

  1. 01

    Rebuild, don't restyle

    I rebuilt the phase one screens on shared parts instead of repainting them one by one, so a new page, mode or asset type starts from the kit, not from whichever screen looked right last.

    Trade-offSlower at the start: the parts had to exist before the first finished screen. From the second surface on, they were already there.

  2. 02

    Rarity owns the colour

    Phase one already tinted its store tabs by rarity. Version 2.0 makes it the rule: six rarities, six colours, on cards, item tiles, store frames and garage showrooms, so value reads before the name does.

    Trade-offThe six hues cannot mean anything else, and where they do, meaning leaks: a level 2 Gold farm plot wears Mythic gold.

  3. 03

    Glass in the world, dark in menus

    Where the player acts in the world, as in building mode and planting, panels sit over the live scene. Full menus such as the inventory take the whole screen on a near-black backdrop with high-contrast type.

    Trade-offThose menus give up the sense of place; in return, type and rarity colours read the same over any scene.

  4. 04

    Modes change colour, touch changes parts

    The Purge Hour keeps the open world's angled frames, slot grid and rarity tags under red, the one hue no rarity uses. TCG Fishing keeps the gradient button, the brush headings and the catch screen, but rebuilds its controls as round, thumb-sized parts.

    Trade-offThe phone game carries a second shape language, and each mode looks less unique than it could. In return, a player moving between modes knows where they are.

System

Rarity, type and one angled corner make the kit

Six rarities run from Common grey to Mythic gold. Type splits by role: a DIN-style display face, a neutral interface sans and a brush script for headings. Cards, item tiles and in-game panels share an angled corner, so a HUD prompt, a store tile and a card frame look related.

One set of rarity colours in four places: marketplace cards, inventory tiles, livestock cards and the garage.

Rarity

  • Common#BEBEBE
  • Uncommon#76C339
  • Rare#23A3CC
  • Epic#A936E5
  • Legendary#FB9025
  • Mythic#FFC807

Core

  • Brand#55FFA3Primary accent and progress
  • Info#55EBFFHighlights and selection
  • Alert#FF5555Errors, warnings and The Purge Hour
  • Base#000000Panels and backdrops
Display
PF DinDisplay Pro
Interface
SF Pro Display
Accent
Spotted GrouperBrush headings on the website, in the PC game and in TCG Fishing

Website

From coin charts to a world worth entering

The phase one site opened on a game logo over smoke and gave its lower half to education partners, a coin price tracker and exchange links. For 2.0 I dropped the finance blocks and gave the page to the game. Sign-up and the error pages get the same treatment, so nobody falls out of the world on a dead link.

Phase 1
2.0
The first screen: a game logo over smoke became a crowd of the world's creatures and one button.
Phase 1
2.0
Further down: a coin tracker and exchange links gave way to the game's own systems, starting with fishing.
The new landing top to bottom: the world first, then regions, gameplay systems, gallery and trailer.
Sign-up stays in the world: a dragon in view, the form on a dark panel.
404, drawn as a place in the world rather than an error.
The system's empty state: any section can open before it has content and still look designed.
NFT not found: an asset the database does not know still gets a page in the world.

NFT cards

Seventy-two cards, one template

I designed the collectible cards from scratch as a template, not a set of pictures. Every livestock card carries a generation tab, stars, the name, a rarity line, a category chip and its stats, and the layout never changes: rarity sets the colour, the stars, the generation and how far the stats go.

  • The same frame, without the generation tab, takes a monster truck, with speed, horsepower, handling and acceleration for stats
  • Foil packs work the same way: the label, the seal and the card count stay
Common: the plain frame every other rarity is measured against
Uncommon: one step up is one colour, not a new layout
Rare: the frame gains metal while the animal stays exactly where it was
Epic: the background starts carrying light of its own
Legendary: the card is read across a room, which is the point of a rarity
Mythic: the top step, and still the same template underneath
All seventy-two: twelve animals across, six rarities down, one template.
Titan Rampage, Rare: the livestock frame without the generation tab
Titan Venom, Epic: speed, horsepower, handling and acceleration replace farm stats
Titan Impact, Legendary: rarity still sets the colour
Titan Judgement, Mythic: the top rarity on the same frame

Foil packs, one per category

  • Livestock: the label, the seal and the card count stay on every pack
  • Crops: each category brings only its own colour and hero object
  • Dragon Skins pack
  • Monster Truck pack
  • Vehicles pack
  • Sprites pack
  • Resources pack
  • Plots pack
  • Fishing pack: nine categories, one template

Store

A store built on the cards themselves

I built the store on the cards themselves: the marketplace, item pages and the wallet share one card frame, so an asset stays recognisable whether it is for sale, owned or just won. The mystery box became a small show: buy a key, watch the reel, see your card land.

Phase 1
2.0
The mystery box: a car under four tabs became a chest on a pedestal, rewards lined up below.

Opening a mystery box, step by step

  • The box and everything it can hold, before any commitment.
  • Keys are bought in a modal over the page, so the box stays in view behind it.
  • Opening in progress: the reel of possible rewards is the small show.
  • The reel settles on one card.
  • The reward lands as a full card, with My Digital Assets and Continue as next steps.

Card packs

  • The pack selector shares the mystery box's pedestal: flip between packs, with the possible cards on the left.
  • A pack's own page: the Monster Truck pack, the cards it can hold, and Try Your Luck.
  • Opening differs from the box: the pack tears and the cards burst out.
  • The cards fan out, each in its rarity frame.
  • Opened straight from the selector, the result lands in place: three new cards.

Marketplace and wallet

  • The marketplace home, starting with Avatars, Sprites and Dragons.
  • A category listing with filters, and an empty state for an asset whose image fails to load.
  • An item page: the same card, stats included, with price history and activity alongside.
  • The wallet: NFTs on the store's card frame, and in-game assets on the inventory's tiles.
Minting a custom licence plate as an NFT: type it on the car, check availability, buy it.

PC game

The garage is where rarity pays off

The game's menus follow the rules of the website and the cards: angled tiles, rarity colours, DIN capitals. The inventory tile reappears unchanged in the web wallet. In the garage each car gets a showroom tinted in its colour, so a Mythic and a Rare are told apart before a single stat is read.

The launcher welcomes the player back by name, over a view of the world.
The inventory: one tile per item, rarity on the corner badge, the character's vitals beside the grid.

One garage, tinted by rarity

  • Octane, Rare: the showroom takes the rarity's blue.
  • Parry T-4, Epic: purple light, purple stat bars.
  • Furon, Legendary: the same room in orange.
  • Bueller, Mythic: gold smoke and gold stats.
  • Custom licence plates: pick one you own, or follow the link to get more.
Building mode: panels at the edges of the live scene, Duplicate, Move and Delete beside the selected object.
Setting up a farm: four plot sizes compared side by side.
Planting: seed cards on the left, the soil grid on the right, and Plant.
The farm computer: an animal's health and needs, what it has produced, and the price of its milk.
HUD pieces on dark backplates: minimap with experience, day clock, needs, speedometer, hotbar, trade request and prompts.

The Purge Hour

A mode that changes the colour, not the kit

The Purge Hour is TCG World's battle royale, a separate mode with its own tension. It takes red and a louder title, and the kit stays: the loadout's rifle is still marked Rare.

The mode's main menu: an airdrop falling through smoke and a single red Play.
The loadout keeps the open world's slot grid and rarity tags, with a hover state on every slot.
The lobby: the squad on the field, every player tagged, and Ready as the largest action.

TCG Fishing

A pocket game that still belongs to the world

TCG Fishing is a casual landscape game for phones: pick one of four baby dragons, travel between five fishing spots, cast and reel in. I designed it solo, from the logo and wireframes to the finished screens, with Cast and Reel In under the right thumb.

The logo: a hook bent into the G, as symbol and wordmark, in the mint-to-violet gradient.
The loading screen puts the logo and the promise, Play, Earn, Enjoy, over a stormy sea.
Wireframe
Final
Wireframe to final: the tension bar, the fish's health and the reel button kept their places.
The first session in six screens, from choosing a dragon to adding the catch to the collection.

Five fishing spots

  • A river under a stone arch: attempts, level, balance and Cast in the corners.
  • A sunny sea cove, with the HUD in the same places.
  • A lake between pagodas: the scenery changes, the HUD does not.
  • A dark lake in a gorge, with coins and gems side by side.
  • A turquoise canyon river under snowy peaks, the HUD still in its corners.

Around the game

  • Sign-in with socials, a wallet or email, for players already in the TCG World family.
  • A species card: rarity, weight, size, how many caught and where it lives.
  • The map at the start: one spot open, the rest locked by level.
  • The same map with all five spots open.
  • Pause: resume, main menu or quit, and Quit is the red one.
The catch on the phone, in the layout the PC game uses.
The catch screen on PC: one layout for both platforms.

Graphics

Twelve brands, one template, 432 billboards

A living city needs advertising, so I gave the world its own. The billboards sell the city's fictional businesses rather than the game, on a template of their own: flat colour, bold type and one hero object. Nine colour versions and four aspect ratios per brand fit any surface in the city without new artwork.

One design, four aspect ratios: 1:4, 1:2, 2:1 and 4:1.
The Sprite Report, the world's own news: it sells a city business, not the game
Golden Bun Express, fast food: flat colour and bold type, the billboard template at work
Jace's Exclusive Yachts
Eclipse Night Market
Oggy's Private Jets
Hulgan's Lumber & Construction

Results

The 2.0 website went live at tcg.world with the structure designed here: the world first, then the four regions, the gameplay systems, the gallery and news, with the marketplace behind it.

5surfaces on one kit, from the website to a card in a pack
72livestock cards from one template: twelve animals in six rarities
9pack categories on one template: a new category needs a colour and a hero object
432billboards for twelve in-world brands, in nine colour versions and four aspect ratios

Reflection

  • Building every surface from one system is what let a two-person team cover a whole metaverse without each screen drifting.
  • In a busy 3D world, legibility beats decoration: the HUD has to read at a glance over moving scenery.

Next

HELIX