Overview
Take Control Games was a competitive gaming platform where players join tournaments, collaborators run node licenses and earn rewards, and promoters grow the community through referrals. I led the design of the whole ecosystem: user flows, UI, design system and the documentation that front-end and back-end teams built from.
Role: Lead Ecosystem Designer
Team: 4 designers reporting to me; the front-end lead and back-end lead reported to me, and the 5 front-end developers ended up under my supervision
Timeline: Nov 2022 – May 2023
Tools: Figma (design system, prototypes, specs)
USER FLOW
TCG V1 USER FLOW
The challenge: three users, one platform
The platform had to serve three users with very different goals, without building three separate products:
Gamer — wants to play, join tournaments and climb the leaderboard.
Collaborator — manages node licenses, balances and exchanges, and needs clear financial information.
Promoter — grows the community through referrals and tracks ranks and rewards.
I mapped a user flow for each role — sign-up, wallet, licenses, referrals and tournaments — and designed one shared structure where navigation, layout and components stay the same, while content and visual identity adapt to the role.
Every flow was designed with its full set of states, not just the happy path: sign-up covers password rules, mismatched passwords, terms & conditions that unlock only after scrolling, and deactivated accounts.
From design to development
Design only matters if it gets built right. Besides the screens, I wrote the functional requirements for the admin side of the platform, so the front-end and back-end teams knew exactly what to build.
CRUD specs for tournaments and news: every field of the "Create tournament" form is numbered and explained — game, mode, dates, entry fee, number of participants, prize pool and how it's distributed — with variants for each game mode and prize type.
One source of truth: design system, flows and specs lived in Figma, so design, front-end and back-end worked from the same files.
Leading the build: I coordinated the design team and supervised the front-end and back-end leads, reviewing implementation against the designs and setting priorities with the back-end output.
Design system
Design and development had to run at the same time, so there was no room to finish the design first and document later. I set up a starter kit — based on the Evergreen UI kit — and used it to write the first documentation and define every feature the teams needed to build. As the visual design matured, each placeholder piece was replaced with custom components, so documentation, design and code evolved together instead of waiting on each other.
Tokens: a named color scale (P400 primary, BG300–BG900 backgrounds, G400 / Y400 / R400 semantic colors), plus typography, spacing, shapes and elevation.
Light and dark modes, with dark as the main experience for a gaming audience.
Components with every state and size: buttons (primary, secondary, minimal, error × M and XL × default, hover, pressed, focus, disabled), controls, forms, dropdowns, menus, alerts and overlays.
Role theming. On top of the base tokens, each role gets its own accent and badge: green for Gamer, magenta for Collaborator, blue for Promoter. Same components, same layout — users always know which space they're in, and the team maintains one system instead of three.
Outcome
- One ecosystem serving three user roles from a single design system and layout.
- Complete flows with every state designed, plus admin specs the dev teams built from.
- Tournament features — leaderboards and scoring — that increased tournament participation.
- Tournament platform and Take Tank launched to players in June 2023.
What I learned
Designing for several roles taught me to separate what must stay constant (structure, components, interaction patterns) from what should change (color, badges, content). Writing the specs myself and supervising front-end and back-end closed the gap between what we designed and what shipped