XP Network

Interface & Interaction Design | Prototyping | Front-End | Consulting | Strategy

XP Network is a gamified rewards and event platform designed to bridge the gap between fans, publishers, and retailers through a unified engagement ecosystem. As a 0–1 initiative built from the ground up, the platform transforms every interaction into a rewarding journey, from attending a local game night to competing in a global esports league. At its core is a marketplace where "Experience Points" (XP) are earned while unlocking achievements and items. Fans can redeem points for exclusive brand drops, digital collectibles, and high-value physical goods like TCG cards, toys, and more.

Taking the project from initial concept to a functional marketplace required working closely with the founders to define the product vision and execute across every touchpoint, from core UI/UX to marketing materials. This comprehensive approach ensured that the brand identity remained consistent as the platform's architecture evolved. By directly contributing to the frontend development, the design-to-production pipeline was significantly accelerated, allowing for rapid iterations and a high-fidelity implementation that maintains both performance and visual polish across the entire ecosystem.

Members, Loyalty, and Points

Members are the fans who attend, compete, and collect. Nearly everything a member does on the network, from buying a ticket to entering a tournament to completing a quest, earns XP along with items and achievements they keep. Points are tracked two ways: a lifetime total, which is the permanent record of everything a member has ever earned, and a redeemable balance, which is held separately for each organization and can only be spent with that organization until it is transferred. Users can also pin the items and achievements they have collected to a trophy case, which is useful for showing qualifications for tournaments or VIP access.

  • A member's profile with their trophy case, redeemable and lifetime XP, and rewards earned
  • Redeemable points by publisher, with transfer and shop actions per balance
  • The rewards view listing every item and achievement earned alongside a running lifetime points ledger

Finding and Attending Events

Events can be local or online meetups, tournaments, demos, raffles, watch parties, contests, and more. Browse filters on the things that decide whether someone shows up, including date, price, and whether an event is online or in person, and each event page carries its own ticket types, organizer, schedule, and capacity. Free events issue a ticket when a user selects Join Event, while paid events run through checkout, where XP and promo codes can be applied against admission and tournament entry. Every ticket carries a QR code that organizers scan on arrival.

  • Browsing events filtered by date, price, and online or in person, with format, cost, and capacity on every card
  • An online event page with ticket bundles, organizer, participation details, and schedule
  • Event details and ticket bundles on mobile
  • Selecting admission and tournament entry tickets, then applying XP and promo codes before payment
  • A member's ticket wallet with a scannable admission code and Add to Wallet

Quests

Quests turn ordinary activity into XP. A quest is a series of steps, such as scanning a QR code when making a purchase, when entering a tournament, or each time a fan walks into a store, and every step awards points and unlocks a reward. Completing a step delivers a card the user can add to their profile, either an achievement or an item with its own stats and description.

  • A quest page with its steps, point values, linked tournament, and the items, stats, and powers it can unlock
  • A quest and its steps on mobile, with completed steps checked off
  • Completing a quest and collecting the achievement it unlocked
  • Unlocking a new item, with its XP value, stats, and an option to add it to a profile

Playing in a Tournament

Competitors run their tournament from their phone. Users check in on arrival, then see their table or station number and their opponent for each round, or whether they have a bye. After a match, competitors select Report Round to confirm the games they won and lost, and both players report so the result can be validated. When two reports disagree, the match is marked as Disputed and any judges or organizers are alerted.

  • A pre-round holding state prompting the competitor to check into the tournament before the scheduled start
  • Round results with the competitor's own match highlighted, and their opponent, table, and seat for the next match
  • Self-reporting game results, entering a win, loss, or tie and a score for each game played

Publishers and Games

Publishers and games each have their own page, which is what makes the network browsable rather than a flat list of events. A publisher page collects their catalog, news and updates, stockists, and store in one place, while a game page works as a calendar of everywhere that title is being played, along with its featured events. Users can favorite either one to get news and event notifications.

  • A publisher page with its game catalog, social links, stockist and store shortcuts, and a news feed
  • A game page with its description, a month-by-month event calendar, and featured events for that title
  • A publisher's store priced in XP, with Buy with XP alongside standard cart checkout

The XP Store

The store is where points become goods. Publishers run their own storefronts with timed drops, rarity tiers, and products priced in XP, and a member's redeemable balance with that publisher sits above everything they browse. XP's store integrates with Shopify and Square POS systems. Points earned with one organization can also be transferred into the universal XP Network store, which carries affiliate and limited edition items.

  • A publisher's XP store with timed drops, rarity, and products redeemable against a points balance

Hub: A unified set of tools for Publishers, Stores and Organizations

Publishers, stores, and organizations — the entities that power the platform's ecosystem of Experiences. A core part of this designing XP is addressing operational problems: most organizations running fan-facing programs are stitching together separate tools for ticketing, event calendars, league management, and loyalty. XP Network is designed to consolidate those providing the infrastructure to define how their audiences earn XP and what they can do with it — all from one place. I designed the flows and interfaces that allow organizations to configure their own storefronts, manage their Experiences, and build a direct, ongoing relationship with the fans they're already engaging.

Event Setup

Event setup is organized as a checklist rather than one long form. Organizers work through the basics, then what they are selling, including tables, tickets, coupons, and orders, and then how they will run the day with staff, attendees, and tournaments. Modules that do not apply, such as a vendor map or sponsors, can be toggled off so a store running a weeknight game night is not answering the same questions as a convention.

  • Event setup with details, capacity, type and location, and page imagery, alongside the full build and management checklist

Building Quests

The quest builder follows the same three steps every time: define the quest, define the ways to earn, and publish. Each step's unlock method determines who scans whom, either an organizer scanning a fan's code or a fan scanning a printed code at a booth. The builder also generates promo art for every step as it is created, sized for stories, posts, print, stickers, and stream overlays, so a quest ships with the material needed to advertise it.

  • Quest basics with a live promo preview rendered for story, post, print, sticker, and stream formats
  • Ways to earn: ordered quest steps set to organizer scan or fan QR scan
  • Configuring a single quest step's unlock method, what it unlocks, and where it happens
  • Publishing a quest with audience and discoverability settings, a shareable link, and exportable posters per step

Running Tournaments

Tournament tools cover the parts of running an event that usually end up in a spreadsheet. Organizers can check competitors in, manage rounds and pairings against a timer, and track standings with tiebreakers already calculated. A round can be viewed as a table for staff, as cards for the floor, or thrown to a TV for the room, and any disputed match is routed to a judge.

  • Tournament competitor list with check-in status, seeds, and per-competitor state
  • Round management with pairings, timers, and table, card, or TV display modes
  • Live standings with points, W-L-T, and tiebreaker percentages across each round

Authoring Achievements

Organizations create and award achievements based on their own criteria, and an achievement can carry multiple tiers so it deepens as a member repeats or improves on it. Each tier is previewed live as the card the member will actually receive, carrying links back to the game, the store, and the publisher that issued it.

  • Authoring tiered achievements with a live card preview and linked game, store, and publisher profiles

The Hub on Mobile

Organizers spend the day on the floor rather than behind a desk, so the hub works on a phone. Navigation and the event setup steps collapse into sheets that keep the same structure as the desktop, so someone editing an event between rounds is working with the model they set it up with.

  • Hub navigation on mobile, scoped to the selected organization
  • The event setup checklist on mobile
  • Filling out event details on mobile