747 Agent
Back-Office
A Multi-Level Agent & Player Console - Designed in Dark & Light
747 Agent is the control room behind a sports-betting, e-sports and online-casino platform - where a multi-tier network of agents manages player accounts, credit lines, transfers and commissions. The challenge was to make a data-dense financial back-office feel calm, scannable and trustworthy - in two complete themes, dark and light.
Context & The Problem
iGaming back-offices are notoriously dense - endless tables of money, agents and bets that operators live inside all day. 747 Agent has to expose a whole hierarchy at once: every agent's credit, balance, available and pending commission, their downline of sub-agents, and the players beneath them. The job was to tame that density without dumbing it down - and to do it twice, once for dark and once for light.
"In a financial back-office, clarity is the feature. If an operator misreads a balance or a credit line, that's real money."
Problem Statement
A multi-level agent platform packs hierarchy, money and reporting into one console. Done carelessly, it becomes an overwhelming wall of tables that's slow to read and easy to misjudge.
The Goal
A calm, consistent system that makes the agent tree, balances and reports instantly scannable - with a disciplined token set that works flawlessly in both dark and light.
Target Audience
Master agents managing a downline and credit, sub-agents running their own players, and operations admins overseeing reports, transactions and compliance.
Discovery & Research
The key realisation: the three people who use this tool sit at different levels of the same tree, and each needs the same data framed differently. A master agent thinks in downline and credit; a sub-agent thinks in their own players; an admin thinks in platform-wide reports. The interface had to serve all three from one consistent grammar of cards, tables and roles - and respect that many operators work long shifts and switch themes for comfort.
Typical Back-Office Pitfalls vs. The Opportunity
- Endless flat tables with no visual hierarchy or grouping
- Money figures and statuses that all look identical at a glance
- A dark theme bolted on later that breaks contrast and color meaning
- An expandable agent tree with clear roles (AM / AG) and indentation
- Color-coded metric chips so deposits, bets, wins and tax read instantly
- One token system with true dark & light parity from day one
User Personas
"I need to see my whole tree - who owes what, who's earning, and move credit down the line fast."
"Show me my players, my balance and my commission - and let me transfer money without a manual."
"I live in reports - sport bets, transactions, referrals. I need to filter, export and trust the numbers."
Cross-Persona Insights
Ideation & Structure
User Flow: A Day in the Console
The Agent Tree is the spine of the product - a hierarchy of roles (Agent Manager & Agent) that expand and collapse, each row carrying main currency, direct players, credit line, total available, balance and both available and pending commission. Every other screen hangs off a node in that tree.
Information Architecture
Overview
Dashboard · Stats · Profit · Top Bets & Players
Hierarchy
Network · Agent Tree · Add Users
Players
Players · Blocked · Accounts · Logs
Finance & Reports
Wallet · Transfer · Commission · Reports
Visual Design & Style Guide
The system is built on a slate-and-blue foundation - deep navy surfaces lifted by a soft accent blue, with a family of role and status colors (indigo, orange, red, pink, green) used as gentle metric chips rather than loud blocks. Every value is defined as a paired token, so the dark theme's #374151 surfaces map cleanly to the light theme's #F2F3F7 - the same console, two moods.
Inter does all the heavy lifting - a UI-grade sans built for dense tables and small labels, carrying six weights from Regular through Black with perfect legibility at 12-14px.
Slate surfaces and an accent blue anchor the UI; a set of soft semantic accents code the metric chips. Each token is paired for dark & light, so contrast and meaning hold across both themes.
High-Fidelity Screens
The same console, designed end-to-end in two complete themes. The top row shows the dark theme; the bottom row, the light theme. Click any screen to open it in high resolution.
Interaction Design & Emotional Intent
The feeling to land is quiet competence - a console an operator trusts at 2am. Generous spacing, predictable tables, color used sparingly and with meaning, and two themes that feel genuinely equal rather than one being an afterthought.
The Agent Tree
An expandable hierarchy of roles - Agent Manager and Agent - with indentation, status dots and per-row credit, balance and commission, so the whole downline is readable at a glance.
Metric Chips
Deposits, bets, wins, tax, bonuses and commission are coded as soft color chips - indigo, orange, red, green - so a dense dashboard becomes a quick visual scan instead of a number-hunt.
Dark & Light Parity
Every surface, text and accent is a paired token. The dark and light themes were designed together, not retrofitted - contrast and color meaning hold identically across both.
Outcome & Impact
Key Outcomes
"A data-dense financial back-office that finally feels calm - built on one token system, in two complete themes."
📈 Outcome
A complete agent back-office: dashboard with live financial stats, an expandable agent tree, player and account management, wallet and transfers, commission plans, and a full reports suite - all designed for both dark and light.
🧗 Challenge
Keeping dozens of dense, table-heavy screens scannable and consistent - and maintaining true contrast and color meaning across two complete themes rather than one.
💡 What I Learned
In a financial tool, restraint is the design. Paired tokens, sparing color and a single strong structure (the agent tree) do more for usability than any amount of visual flourish.
🚀 Next Steps
Hand off to engineering with the token set, prototype the tree's expand/transfer interactions, and pressure-test the tables with real high-volume data and edge-case states.