# Girudo

By Munawar Khel / Independent Practice / Freelance UI/UX Designer / 2025–26 / 14 min read

Published at https://munawarkhel.com/work/independent-practice/girudo/

Designed a first-of-its-kind unified TCG arena consolidating what previously required five to seven separate tools, covering streaming, coordination, discussion, store finding, creator and team presence, and admin operations

- Company: Independent Practice
- My role: Freelance UI/UX Designer
- Timeline: 2025 to 2026
- Platform: Web. Consumer platform at 1440px desktop with dedicated mobile layouts for gameplay, lobby, and spectating, plus an admin panel at 1440px desktop SaaS viewport
- Category: Gaming and Entertainment / Trading Card Games / Community and Creator Platform
- Status: New design, delivered
- Tools: Figma
- Team: Sole designer, working with product, engineering, and community stakeholders

## Context

Girudo is a startup building a unified digital arena for the global Trading Card Game community, founded in 2025 by Magic: The Gathering players and unaffiliated with any card game publisher. The premise is unusual: rather than simulating card games digitally, the platform lets people play with their actual physical cards online, streaming their table to opponents and spectators in real time.

The product spans 20 or more card game universes, from Magic: The Gathering, Pokemon, and Yu-Gi-Oh to newer titles including Disney Lorcana, Star Wars: Unlimited, Dragon Ball Super, Digimon, Flesh and Blood, and Riftbound. Around the gameplay sits a full community layer: profiles, friends and messaging, Reddit-style forums, a content creator hub publishing across five formats, a teams and guilds ecosystem, and a store locator connecting the platform back to physical local play.

Behind it runs the Girudo Admin Panel, a back-office application where administrators publish content pages, curate creator placements, moderate forums, manage users and roles, run events, and monitor live sessions.

The scope was the full product across 14 or more modules on the consumer side and 17 or more screens on the admin side, with no existing design system on either.

## The problem

The TCG community is large, active, and organised entirely on tools built for other purposes. A player who wants to stream a game of Commander runs it through Twitch, where card games sit buried beneath millions of mainstream streams. Coordination happens in Discord, manually. Discussion lives in Reddit threads, Facebook groups, and ephemeral chat that cannot be searched later. Creators build audiences on YouTube and Instagram, where algorithms favour mainstream gaming and a deck tech competes against everything else on the platform. Teams present themselves through Discord servers and Instagram pages because nothing equivalent to a Liquipedia team page exists for card games. Finding a local game store means a Google Maps search disconnected from everything else.

Running a single game session therefore takes three or more tools, and most casual players never discover games they could have joined. There is no concept of a game lobby for physical card games: no way to browse open sessions by title, format, player count, or privacy. Spectating, the thing that makes tournament play exciting, is absent from everyday games because there is no viewing experience separate from the player's own.

The structural problem underneath all of it is that these are not separate gaps. A player finishing a game cannot jump into a discussion about the format they just played, because the game and the forum live in different products owned by different companies. The community's activity is fragmented not because any one tool is bad but because no tool holds more than one part of it.

On the operations side, a platform with this many surfaces cannot be run manually. Static pages, forums, events, creator placements, user permissions, and live sessions each need administration, and without a unified back office every content update becomes a developer request and every editorial decision becomes a spreadsheet.

## What I did

The organising decision was to treat the game session as the object the platform is built around, and to design every other module as something that attaches to it rather than sits beside it. A game produces a stream, a stream produces spectators, spectators become community members, community members become creators, creators attract teams, and teams play games. Designing that loop rather than a feature list is what let 14 modules read as one product.

**The Game Lobby** is the signature surface and the one with no precedent to borrow from. Players create a session by choosing their TCG, format (Casual EDH, Alchemy, Brawl, Alpha 40, Australian Highlander), player count, and privacy setting. A confirmation modal on the privacy step tells them what the choice costs, noting that public games typically see five to ten times more engagement, so the decision is made with its consequence visible rather than discovered later. The lobby lists active sessions as cards carrying host, title, viewer count, player slots, and join, spectate, or request actions, with filters across game type, format, and player configuration, plus a mobile-responsive variant.

**Real-time gameplay** supports up to 4v4 across multiple TCG titles in one interface, with commanders and decklists, customisable state counters for poison, burn, and storm, detailed game logs, and integrated chat. The spectator system is designed as its own experience rather than a read-only version of the player view, with a dedicated stream view and live chat supporting thousands of concurrent viewers.

**Registration** was designed as a 4-step personalisation sequence rather than a form: account creation, avatar upload, TCG preference selection, and player card customisation. By the time a new user reaches the home screen they have an identity and a curated feed rather than an empty dashboard.

**The Creators hub** is a discovery and publishing ecosystem in both light and dark modes. A filterable directory carries tabs for Live Now, Rising Creators, Most Followed, and New on Girudo, with creator cards showing avatar, handle, follower count, live badge, featured thumbnail, TCG tags, rating, views, and mutual-friend indicators. Creator profiles publish across five formats, video, shorts, art, blog, and audio, with a rich blog editor carrying URL embeds, word counts, and reading time, artwork upload with metadata, audio bundles for deck techs and podcasts, and video with engagement metrics. Profiles support theme customisation, animated text, announcement banners, section reordering, branded arena URLs at girudo.com/username, and an impersonation protection banner.

**Teams and Guilds** gives competitive groups the infrastructure they lacked. Team profiles run as a multi-tab experience with sticky navigation across Overview, Roster, Content aggregated from member feeds, Results carrying tournament placements, and a Sponsors wall. A team manager dashboard handles member management, content curation, and profile editing, with a 3-step registration flow.

**Community Forums** provide Reddit-style spaces with a guided 3-step community creation flow, public, restricted, and private privacy models, and a moderation suite carrying granular permission roles across Everything, Posts and Comments, Config, and Users, moderator invitations, and banner and profile customisation. Post creation handles three states covering logged-in with membership, logged-in without, and logged-out, so friction lands where it belongs.

**Profiles, friends, and messaging** carry the social layer with public-facing views, profile stores, multi-theme support, friend discovery with pending and sent request tracking, direct and group messaging, and link sharing for game invites. **The Store Locator** closes the loop back to physical play with a map interface, pin markers, zipcode search, and a browsable store directory.

**The Admin Panel** runs all of it. A section-based CMS page builder lets administrators compose static pages from hero, about, and custom blocks with inline editing, reordering, visibility toggles, and deletion, removing the developer dependency from every content change. An intelligent creator curation engine pairs manual selection with an Auto Mode driven by configurable ranking criteria across highest follower count, fastest growth, most live streams, most posts, highest engagement, and newest join date, over time ranges from 7 days to all time. A tabbed user management interface segments by Active, Admin, Content Creator, Suspended, and Invited with per-user permissions for commenting, forum participation, chat, and content creation. Event and forum operations, a live session monitoring dashboard surfacing total viewers, live streams, and active games, and an audited impersonation system with a persistent active-session banner and a full log of admin, creator, times, duration, and activity notes complete the back office.

All of it sits on a custom design system built from scratch across both applications: a consumer component library with variant-driven light and dark theming covering navigation, buttons, creator cards, avatars, game session cards, step cards, filter bars, modals, sponsor cards, map markers, marquee elements, video players, post blocks, and icon sets, and an admin system with a warm coral and orange accent palette, table-driven layouts, modular sidebar navigation, and reusable modal, dropdown, form, and status badge patterns.

## Outcomes

- Designed a first-of-its-kind unified TCG arena consolidating what previously required five to seven separate tools, covering streaming, coordination, discussion, store finding, creator and team presence, and admin operations
- Delivered full product design across 14 or more consumer modules and an admin panel of 17 or more screens as the sole designer, spanning gameplay, community, creator, and operations surfaces
- Built a custom design system from scratch across both applications, with variant-driven light and dark theming on the consumer side and a distinct dense visual language for the admin panel
- Designed real-time multiplayer gameplay for up to 4v4 across 20 or more supported TCG universes, with a dedicated spectator experience built to hold thousands of concurrent viewers
- Created the game lobby as a browse, filter, create, and join model for physical card games, a pattern with no existing precedent in the category
- Designed a multi-format creator hub publishing video, shorts, art, blog, and audio from one customisable profile, with branded arena URLs and impersonation protection
- Delivered a complete teams and guilds ecosystem covering discovery, multi-tab team profiles with roster, aggregated content, tournament results and sponsors, and a manager dashboard
- Designed an intelligent creator curation engine combining hand-picked editorial placements with criteria-driven automatic ranking, replacing spreadsheet-based curation and giving emerging creators a fair path to visibility
- Built an audited impersonation system with persistent session indication and full activity logging, letting admins support creators from their own view without losing accountability
- Removed the developer dependency from content operations through a section-based CMS page builder with inline editing, reordering, and visibility control
- Designed for a platform supporting 20 or more TCG universes from day one, with an active base cited at 1,400 or more players, 500 or more streams, and 2,000 or more hours of content, and an architecture intended to scale toward 12,500 or more users and creators

## Decisions

### Build the platform around the game session rather than around the feed

What: Made the live game session the central object every module attaches to, so streams, spectators, forums, creator content, and team profiles all derive from or point back to play.

Alternatives: A content-first architecture with the feed at the centre, which is how Twitch, YouTube, and every social platform in the adjacent space is organised, and which the client's own creator ambitions would have justified.

Why: A feed-centred platform competing against Twitch and YouTube on their own terms is a fight over recommendation algorithms and content volume, which a startup loses. The thing Girudo can do that they cannot is host the game itself. Building around the session meant every other module inherited a reason to exist from something the incumbents structurally do not offer, and it also solved the discovery problem in the right direction: people arrive for a game and find the community, rather than arriving for content and being asked to also play.

### Design registration as personalisation rather than as a gate

What: Built sign-up as a 4-step guided sequence covering account creation, avatar upload, TCG preference selection, and player card customisation.

Alternatives: A standard email-and-password form with onboarding deferred to a tour or an empty-state prompt after first login, which is faster to build and shortens time to account creation.

Why: The metric that matters on a new platform is not accounts created but accounts that come back, and the usual failure is a user landing on an empty dashboard with nothing personal in it. Asking which card games someone plays during sign-up is not friction, it is the thing that makes the first home screen worth looking at, because the feed can be curated before the user has done anything. It also does identity work specific to this audience: a TCG player's games are a large part of how they describe themselves, so asking early signals that the platform understands that.

### Show the cost of the privacy choice at the moment it is made

What: Put a confirmation modal on the public versus private setting during game creation, telling the host that public games typically receive five to ten times more player engagement.

Alternatives: A plain toggle with the setting changeable later in session settings, which is the conventional pattern and avoids interrupting a creation flow.

Why: Privacy defaults quietly determine whether a young platform has anything to watch. A host choosing private out of caution is making a reasonable individual decision with a cost they cannot see, and the cost lands on the platform as an empty lobby. Surfacing the trade-off at the decision point respects the choice while making it informed, which is a better answer than either defaulting to public silently or letting the lobby stay thin.

### Give the admin panel its own visual language rather than reusing the consumer system

What: Built the admin application on a separate visual system with a warm coral and orange accent palette, table-driven layouts, and modular sidebar navigation, distinct from the consumer platform's dual-theme component set.

Alternatives: Extending the consumer design system across both, which keeps one library, one token set, and one maintenance path.

Why: The two applications share almost nothing about how they are used. The consumer platform is browsed in bursts, often on a phone, and is styled to feel like a place you want to be. The admin panel is worked in for hours at a desk, and its job is density and legibility rather than atmosphere. Reusing the consumer system would have meant importing a dual-theme complexity the admin side does not need while fighting a visual language tuned for a different purpose. A clear visual break also prevents the operational mistake of an administrator forgetting which surface they are on, which matters most in impersonation mode.

### Pair manual curation with algorithmic ranking in one interface

What: Designed the creator curation engine with a Manual and Auto mode, where Auto ranks by configurable criteria including follower count, growth rate, live stream volume, posts published, engagement, and join date, across selectable time ranges.

Alternatives: Manual curation alone, which gives editorial control and matches how a small team would start, or full automation, which scales without staff time.

Why: Each alone fails in a predictable way. Manual curation does not scale and quietly becomes a popularity contest among creators the admin already knows, which is exactly the visibility problem the platform exists to fix. Full automation surfaces whoever is already largest and offers no way to back a creator the team believes in. Splitting the placements is what resolved it: Spotlight stays hand-picked because it is an editorial statement, while New on Girudo and Rising Talent run on criteria, because those are the slots where fairness matters more than judgement and where an algorithm is genuinely better at noticing a creator nobody has met yet.

## What I learned

I learned to look for the thing incumbents structurally cannot do, rather than the thing they do badly. My first instinct on a platform competing with Twitch, Reddit, and Discord was to find where each is weak for card game players, which is a real list and a losing one, because a better feed is still a feed and they have more of it. The question that actually mattered was what none of them can host at all, and the answer was the game. Every module that works here works because it hangs off something the competition does not have, and the modules I am least sure about are the ones that could exist anywhere.

Designing for a community you are not part of has a specific failure mode, and the founders were the mitigation. I do not play Magic, and a platform for people who do is full of decisions that look arbitrary from outside and obvious from inside: which formats belong in a filter, whether a commander is a field or a first-class object, what a player card should say. Client review carried real weight here because the founders are players, which is a better position than most engagements offer. It is still not the same as watching a stranger use it, and I would not mistake one for the other.

The parts with no precedent took the most time and produced the best work. A lobby for physical card games, a spectator view that is its own experience rather than a read-only player view, and a curation engine that is both editorial and algorithmic all had to be reasoned from what the activity actually is rather than adapted from an existing pattern. That is slower and it is where the product's identity ended up living. The modules I could pattern-match, forums, messaging, profiles, are competent and unremarkable, which is the right outcome for them.

Tags: Information Architecture, Interaction Design, Visual Design, Design Systems, Prototyping, Responsive, Social, End-to-End Design