A month from zero to production
Broker
A prop trading company was launching its own regulated broker. Design had about a month, and the brief described what the site should contain but not how any of it works.
- Product design
- UI/UX
- Domain research
What the product is
A prop trading company was launching its own regulated broker. A move from prop trading into a financial product with its own rules. Design had roughly a month.
What I did
The site structure document was written by someone else, I worked from it. It answered the question of what should exist. How it is calculated and where the data comes from stayed open, and that was my part.
How we worked
Together with Gleb. Competitor research, architecture, data requirements and most of the screens were mine.
The result, a few dozen pages, a component library and around sixty screens. Handed to development and shipped.
The site runs. The product moves on without me now, the account types in production are no longer the ones from the brief.
Taking the market apart
I went through about twenty competitor sites, with exness as the benchmark. Calculators, account types, how order execution is explained, trust elements.
The point was not to see how others do it but to decompile the mechanics. How someone else’s calculator counts, where it pulls data from, which parameters actually change the result and which are there for show.
Everyone counts honestly and everyone looks different: two tabs in one place, six switches in another. I picked not the prettier one but the one that does not disagree with the maths of our product. You cannot copy someone else’s form, a different pricing model sits behind it, and you end up with an interface that asks about things that change nothing and stays silent about the ones that decide everything.
These are the ones the document records, and what each was studied for.
| Competitor | What I looked at |
|---|---|
| exness | Security and client protection, VPS hosting, currency converter, market analytics, pricing, social responsibility |
| blackbull | TradingView, copy trading, swaps on Islamic accounts, referral programme |
| ig | Forex, charts, institutional accounts |
| thinkmarkets | TradingView, account types, contract specifications |
| interactivebrokers | Platforms, sign-up and demo |
| oanda | VPS hosting, hours of operation |
| capital | Currency converter, how prices are formed |
| Competitor | What I looked at |
|---|---|
| xtb | Market analytics, invest account |
| fxpro | CFD calculator |
| fundednext | CFD calculator |
| xm | Market analytics |
| icmarkets | Account types |
| fbs | Deposits and withdrawals |
| fnmarkets | Deposits and withdrawals |
| trackdesk | Competitor comparison pages |
Fragments of those very pages.
Three kinds of decision
Take as is
Industry patterns that are harmful to break. Recognition beats originality. PCI DSS certification came in that way. I saw how the market leader presents it and did not invent my own way of talking about the safety of money.
Fix
Mechanics taken, readability rebuilt. The economic calendar. Responsiveness, separators, accents.
Bring in from outside the industry
Comparison pages came from trackdesk, which is affiliate software and has nothing to do with brokers. I noticed those pages catch search traffic for "alternative to X" and brought the format over.
Someone else’s answer, our conditions
A page for a single instrument was not in the brief at all, only categories like Forex and Crypto with a list of pairs inside. I built it by taking apart the ones competitors had. On the left, one of those.
What came out. At the top they switch between CFD and knock-out, a separate instrument we do not offer. In our version the conditions start right there.
What moved. Their conditions table sits on the right and a narrow chart column on the left. Ours is the other way round, the conditions lead and the trading panel goes right.
What I asked the traders. How they actually read a page like this, what matters and what is noise. After those conversations some of the parameters the competitors carry were cut. The page ended up shorter.
Theirs
Ours
The whole site on one sheet
Most of the broker’s pages at once, sorted into three groups. Markets and the main page, the platform and its tools, trading.
A separate page for every instrument. Forex, CFD, metals, stocks, indices, crypto, commodities, futures, ETFs. Plus the account types, plus everything around trading conditions.
So the work went into templates. At this count you cannot draw each one on its own, they drift apart from each other long before the month is out.
One template, six directions
CFD Trading is the hub page. Six directions branch off it, forex, commodities, stocks, indices, crypto and metals, plus a table of every market.
One template inside. The screens run in the same order everywhere. What the direction is, the available platforms, frequent questions, four steps to a first trade, a table of available markets, trading conditions, spreads and swaps, margin requirements, execution quality.
Only the contents differ. Its own photography, its own typical pairs, its own numbers in the conditions, its own calls to action. Six pages are built as one and each still looks like itself.
Cross links at the bottom. From any direction three neighbours are visible. Someone who landed on metals from search finds out there are five more markets.
The design system
The same idea about templates, carried through. The library sits apart from the pages, and every element is kept in all of its states at once. Default, filled, in error, unavailable. For light blocks and for dark ones.
Forms. Fields, selects, checkboxes, toggles, search, phone entry with a flag. A broker site has far more of them than it looks from outside: sign-up, filters, calculators, applications.
The menu as a component. The top menu is laid out for every section, Markets, Platforms & Tools, Trading, About, plus the mobile accordion. An open menu is its own element with its own states here, living apart from the home page mockup.
Icons and flags. Their own grid. The site carries hundreds of instruments, and without a mark the lists turn into a wall of text.
Six account types
Cent, Standard, Raw, Invest, Institutional and demo. On the left the shared comparison page, on the right a separate page for each type.
Each one has its own artwork. Not an icon or a stripe colour but its own frame, with the name laid out in banknotes, coins or tape. The type registers from the picture before the heading is read.
Why bother. The accounts differ by numbers, and numbers look alike. The picture gives what a table cannot, and people remember which one they picked.
Not every page is in the frame, the row would not fit otherwise.
Platforms and tools
Platform & Tools is the shop window. Two platforms and nine tools on one page, each a card with a photograph, a name and a single line of substance.
Every card has its own page behind it. MetaTrader 5, TradingView, VPS hosting, the CFD calculator, the currency converter, market analytics, hours of operation, copy trading, the calendar, charts, trading signals.
The cards hold different kinds of thing. A platform, a working tool and a service are three different things, yet in the grid they have to read just as evenly, or the window falls apart into a list of unrelated items. Hence one card for all of them.
Inside, the skeleton is shared and the filling is not. In one place an explanation and four steps to connect, in another a working calculator with live rates, in another the case for the benefit. Same order of screens, different contents.
The hub page
The inner pages
Conditions and the company
The sections usually drawn with whatever attention is left over. For a broker they carry the trust, so they are built on the same grid as the markets and the accounts.
Eight cards in conditions, seven in the company section. Plus a long read on technology and security where text and frames alternate.
Objects instead of icons. Each card carries its own rendered object. The same move as on the accounts, and for the same reason. Items that mean similar things otherwise blur into a list.
A banner library on variables
The broker’s ad banners were not built one at a time but as a single system. The set exists at once in every size for every placement and in three languages.
A new banner is three edits. Swap the image in one place, pick a colour, swap the translations in one place. Everything else recalculates itself.
The recording shows one thing changing and everything redrawing. First the colour switches, then the object shot is swapped, then the colour again with the new artwork. Each time the whole sheet is rebuilt.
Then the batch goes out to export. That was the point of all of it, so that nobody draws every size for every placement and every language by hand.
The events calendar
This is the calendar the fix it line above refers to. The mechanics came from the competitors, the readability was rebuilt.
The expanded row. An event unfolds into a summary with a chart without leaving the page.
A tab of its own for each kind of event. Macroeconomics, earnings and dividends need different columns, and one table cannot carry them all.
A separate explanation of how to use it. The three reasons people open a calendar. Plus the mobile version, on the right of the frame.
Where all of it comes from. A separate piece of work: quotes, spreads, the calendar, price history. I worked out what was technically reachable and handed the requirements to development. For a broker site that is half the difficulty, because a beautiful instrument page with no answer to where the data comes from stays a picture.
Copy trading, two versions in a row
For the MVP the copy trading came ready made, an MT5 block in an iframe. Fast, ugly, and on time. Both versions were designed from the start though, because the second one was always coming.
Our own version inside the cabinet. A few months later the same thing was rebuilt with our own means. It looks much alike, and the difference is that the data and the scenarios became ours and stopped depending on someone else’s block.
Two directions instead of one. You can copy other people’s trades, and you can open up and let others copy yours. Not one page with a switch but two separate scenarios, each with its own screens.
The inside. The strategy card, the author with a rating and a subscriber count, the return over a period, which instruments it came from, and the full order history. The things someone actually picks a strategy by.
MVP, an MT5 iframe
Our version
Inside a strategy