747 Agent Back-Office
A console for managing agents and players across several levels of an iGaming operation, designed in both dark and light.
- Role
- Type
- iGaming back-office
- Tools
- Screens
- 60+ high-fidelity
- Themes
- Dark & light
- Platform
- Desktop web app
01The Brief
747 Agent is the control room behind a sports betting, e-sports and online casino platform. It’s where a network of agents at several levels manage player accounts, credit lines, transfers and commissions.
My job was to make a financial back-office full of data feel calm, easy to scan and trustworthy, in two complete themes.
Problem
When you put an agent hierarchy, money and reporting into one console, it can quickly become a wall of tables that’s slow to read and easy to misread.
Goal
Build a calm system where the agent tree, balances and reports can be understood at a glance, using one set of tokens that works in both dark and light.
Audience
Master agents who manage the agents below them and their credit, sub-agents who run their own players, and operations admins who keep an eye on reports and compliance.
In a financial back-office, clarity is the most important feature. If an operator misreads a balance or a credit line, real money is at stake.
02Research & Insights
The three types of user sit at different levels of the same tree and need the same data shown in different ways, whether that’s the agents below them and their credit, their own players, or reports for the whole platform. A lot of them work long shifts and switch themes to stay comfortable.
- Flat tables with no hierarchy or grouping
- Money figures and statuses that all look the same
- A dark theme bolted on later that breaks contrast
- An expandable agent tree with clear roles and indentation
- Colour-coded metric chips for deposits, bets, wins and tax
- One token system with dark and light parity from day one
The Master Agent
“I need to see my whole tree - who owes what, who’s earning - and move credit down the line fast.”
The Sub-Agent
“Show me my players, my balance and my commission - and let me transfer money without a manual.”
The Operations Admin
“I live in reports. I need to filter, export and trust the numbers.”
See the hierarchy
An agent tree you can expand, with columns for credit, balance and commission.
Money in one place
A focused wallet, a transfer flow and a player table for sub-agents.
Reports you can work
Every report view has search, filters, saving and exporting.
03Structure & Flows
The agent tree is the backbone of the whole product. Agent Manager and Agent rows expand and collapse, and each one shows its currency, direct players, credit line, total available, balance, and available and pending commission. Every other screen connects back to a point in this tree.
Overview
Dashboard · stats · profit · top bets & players
Hierarchy
Network · agent tree · add users
Players
Players · blocked · accounts · logs
Finance & Reports
Wallet · transfer · commission · reports
04Visual Design System
Slate and navy backgrounds brightened with a soft blue accent, with indigo, orange, red, pink and green used for gentle metric labels. Every colour comes as a matching pair of tokens, so dark #374151 surfaces map to light #F2F3F7.
Colour palette
Tap a colour to try itDesigned around one palette
Every screen is built from these colour and type tokens.
Typography
Type your own textUI-grade sans for dense tables and 12-14px labels - Regular to Black
05Key Screens
12 high-fidelity screens from the final design. Tap any of them to see it full size.
06Interaction Details
The agent tree
Indentation, status dots and credit, balance and commission on every row make a whole network of agents easy to read at a glance.
Metric chips
Deposits, bets, wins, tax, bonuses and commission appear as soft coloured labels, so you can scan them quickly instead of hunting through numbers.
Dark & light parity
Both themes were designed together using paired tokens, so contrast and the meaning of each colour stay exactly the same.
07Outcome & Reflection
A financial back-office packed with data that finally feels calm, with one token system and two complete themes.
Outcome
A complete agent back-office with a live financial dashboard, an expandable agent tree, player and account management, a wallet and transfers, commission plans and a full set of reports.
Hardest Part
Keeping dozens of busy, table-heavy screens easy to scan and consistent, with proper contrast in both themes.
What I Learned
In a financial tool, holding back is the design. Paired tokens, careful use of colour and one strong structure work better than visual flourishes.
Next Steps
Handing the tokens over to engineering, prototyping how the tree expands and how transfers work, and testing the tables with large amounts of data.