Designing every surface of a gaming platform

Inherited a tournaments product built with no UX and rebuilt it into one progression system, with empty, loading and error states designed in rather than retrofitted.

UX DesignProduct DesignDesign SystemsMotion Design

Overview

Most web3 platforms are built engineering-first. UX and design get retrofitted onto whatever the backend already does. Metacade was no exception.

The job was to align the whole platform with a new brand, rescue the tournaments UX, and design flows for casual gamers and crypto-natives alike. I led product design across the platform and the marketing site.

Product Design

Rescuing a backend-first product with UX designed in

I led product design across Arcades, Tournaments, Profiles, XP and Leaderboards, designed as one progression system rather than siloed features, plus the marketing site and its animated feature visualisations.

The tournaments product was inherited, built without UX. I restructured the flow, designed the missing empty, loading and error states, and rebuilt it on the new design system. Same backend, completely different product.

Wallet onboarding was designed to feel like a normal sign-up. The failure cases (rejected signatures, failed transactions, dropped wallets, wrong chain) got more design time than the happy path.

Figma covered the brand and key layouts; everything after that was designed in the frontend, with Tailwind tokens and React components as the source of truth and reviews happening in the browser rather than in Figma.

Product design

Marketing website

Animated assets

Daily endless runner game