First XI is a football management game with 10 clubs. Each club has its own identity, brand, and on-chain token. In-game, we call them Shares. Players manage squads, compete in leagues, and trade club shares in a live marketplace.

It feels like a football game, but beneath the surface it's a social economy that rewards participation, strategy, and vision.

As lead UX/UI designer on a three-person design team (alongside a brand designer and a social media/assets specialist), I owned the full platform experience. Every screen, every flow, every interaction pattern was my responsibility.

The research phase was intensive. I studied FIFA, PES, and Call of Duty, not just for football patterns, but for how serious competitive games handle gamification without losing depth. A key takeaway was the badge and tier system: visual rewards that make progression feel tangible. That insight shaped how we designed referrals, missions, and user progression across the platform.

Phase 1: Launch delivery

The platform was built in phases. Phase 1 shipped at launch and covered the core user experience:

Most DeFi products show you a token price and let you swap. That's it. Most football games show you squad stats and match results. That's it.

First XI needed both in the same interface, for the same user. And that user could be a football fan with zero crypto experience, a crypto trader who doesn't care about football, or somewhere in between. The split was genuinely 50/50.

The answer came from stepping into the shoes of someone who knows nothing about either world. Not thinking like a DeFi user, not thinking like a football fan. Thinking like a person seeing this for the first time. What would I want to understand? What would overwhelm me? What would I need separated, and what would I need together?

That perspective led to a modular, widget-based architecture. Each piece of information lives in its own container (club identity, match data, share price, trading controls), clearly separated but coexisting on the same surface. You get the best of both worlds without either one bleeding into the other.

The league hub organizes everything through tabs: Standings, Fixtures, Stats, Transfers, and more. The Market tab was introduced in Phase 2, and the most complex to design because it sits at the intersection of all the others.

Each club card uses the club's own crest as a darkened background, so every card has a distinct visual identity even though they share the same layout. It's still a game, and the cards should feel alive.

This is where the two mental models merge. Club context and financial data coexist on the same surface. You don't go somewhere else to understand a club before deciding whether to invest.

The page leads with club identity (name, stadium, reputation stars), then match results as live context, then share price and timeframe changes. Everything you need to evaluate a club before trading, in one place.

This is where the financial layer comes alive. The Club Marketplace is a dedicated trading screen for each club: chart, swap widget, position tracker, and contextual data all on one surface. If the Club Profile Page is "understand this club," the Marketplace is "act on it."

The Swap Widget

The most considered piece of the marketplace. The brief said: design a buy panel, a sell panel, and a "market paused" state. What it didn't specify was how. Three states, three distinct design decisions, each one reflecting a different user intent.

Buy SharesSell SharesMarket Paused

The input is denominated in ETH because you're spending money, so the unit is money. Preset amounts reduce friction, and the widget prevents errors before they happen. If the amount exceeds your balance, "INSUFFICIENT BALANCE" replaces the action button. The green "BUY NOW" only appears when the trade is valid.

Phase A (the core platform, league system, and marketplace module) shipped. Phase B is currently in development, with more phases on the roadmap. Each one pushing further into what happens when football and DeFi share the same interface.

This project has been one of the biggest learning experiences so far. Gamifying DeFi makes it genuinely engaging, and proving that a financial layer can feel like a game, not just look like one, is what makes First XI interesting to design for.