One system across a metaverse, its store and its games.
TCG World
- Role
- Product & UI Designer
- Client
- TCG World
- Year
- 2024-2026
Design
- Figma
- Photoshop
- Illustrator
AI
- Midjourney
- ChatGPT
I designed TCG World across every surface: the in-game UI, the website and NFT marketplace, hundreds of in-game graphics, and the digital assets. Each platform had grown its own look, so I rebuilt them from scratch on one design system, and the metaverse, its store and its games finally read as one product. I owned the web, the graphics and the digital assets solo, led the in-game interface in a team of two, and drove it to a playable launch.
Auditing a brand that grew in every direction
TCG World had shipped fast across many surfaces with no shared language. I started by cataloguing the drift before proposing a system.
website, HUD, marketplace, graphics and two mobile titles, none of them sharing components.
different button styles found across the product before the rebuild.
the target: one token set the whole metaverse reads from.
The problem
TCG World is a massive open-world metaverse: four regions on Unreal Engine 5, with NFT land, vehicles, avatars and animals, and a play-to-earn economy. It had grown fast and across many surfaces, the website, the in-game HUD, the NFT marketplace, the graphics, with no shared language. Each one looked like a different product. My job was to rebuild them into one design system so the whole brand reads as one place.
My role
I reworked the old designs from scratch and pulled them onto one system. I owned the website, the graphics, the digital assets and two mobile games end to end, and led the in-game interface in a team of two. I drove the work from a scattered set of screens to a coherent system, and the game to a playable launch.
Forming one style
Colour does the heavy lifting. Every asset, a card, a car, a fish, sits in one of six rarity tiers, and you read the tier from its colour before its name. The core palette and the type system are built around that one rule.
Rarity scale
Core palette
Typeface
- PF DinDisplay ProDisplay
- SF Pro DisplayInterface
- Spotted GrouperFishing minigame
Rebuilding the in-game interface
The in-game UI is the hardest test of the system: a survival HUD, a garage, a building editor and a creature collection, all readable inside a busy 3D world. I built every screen from the same components (down to that bevelled edge), so a player moves between them without relearning the interface.
Each car gets its own showroom, themed to its rarity.
The rarest vehicles are NFTs in their own right: four monster trucks.
A mode with its own identity
The Purge Hour is the game's battle-royale shooter, a mode apart from the open world. It keeps the system's bones, the same components and logic, but takes a sharper red identity so it reads as its own thing the moment you drop in.
The website and store, rebuilt
The old site read like an early crypto landing: busy, dark, hard to scan. I rebuilt it to show the world first, then the store, the NFT marketplace and the onboarding flows, all on the same system as the game.
The landing page, before and after.
Down to the edge cases: 404, coming soon, NFT not found.
Digital assets
Everything a player owns is a tradeable asset, so I designed the collectible system end to end: the NFT cards, each with its generation, rarity, category and stats, and the foil blister packs they come in. It all sits on the same language, down to the bevelled edge, so a card and a pack read as one set.
Collectible cards: generation, rarity, category and stats.
Foil packs, one per category.
A mobile game: TCG Fishing
One of the two mobile games, a landscape fishing game set in the TCG World universe. I designed it solo, from its own brand through the wireframes to the finished screens, so it stands on its own yet reads as part of the world.
Wireframes first: structure over the game art.
More of the game.
Beyond the screens
The system reached past the interfaces and the store. I designed 100+ in-game banners and billboards for the world's surfaces, the social graphics, and a second mobile game, all on the same language. A billboard inside the game and a card on the marketplace read as one brand.
Building one language for a metaverse
Rebuild, don't patch
Old screens were redrawn from scratch on shared components rather than retrofitted.
Trade-off: Slower start; the shared components paid back the moment the second platform reused them.
Rarity drives the colour system
Colour encodes how much of a thing exists, so value reads instantly in inventory and market.
Trade-off: Locks a chunk of the palette to rarity, leaving less freedom for purely decorative colour.
Legibility beats decoration
In a moving 3D world the HUD has to read at a glance, so contrast and spacing won over ornament.
Trade-off: The brand expresses itself in layout and motion, not loud surfaces.
One kit, two people
A tight component kit let a two-person team cover the whole metaverse without each screen drifting.
Trade-off: The kit became a bottleneck, since every new surface waited on shared parts.
For the first time the site, the game and the store actually looked like the same company made them.
Outcome
TCG World reached a playable launch, and the system I built carried across the game, the website and the store, replacing the old look on every surface. The project positions itself publicly as one of the largest open-world metaverses on the blockchain, with a $5M virtual real-estate sale on record.
of an open world on Unreal Engine 5: Emerald Forest, Los Solaris, Sakura Valley, Northern Tundra
in-game banners and billboards designed for the world
across the game, the website, the store, the graphics and two mobile titles
What I learned
- 01
Building every surface from one system is what let a two-person team cover a whole metaverse without each screen drifting.
- 02
Rebuilding the old screens from scratch beat patching them: the shared components paid back the moment the second platform reused them.
- 03
In a busy 3D world, legibility beats decoration: the HUD has to read at a glance over moving scenery.
- Design
- Ivan Legchilov
- In-game UI
- Team of 2 (lead)
- Web, graphics, assets
- Solo
- Company
- TCG World