Challenge
Trading interfaces punish ambiguity. A misread number or mistimed click can cost real money, so every element has to earn its place and every state has to be unmistakable.
Case Study
Web & Mobile · Fintech �� Product Design
AQX TRADER
Forex, Crypto & CFD Trading Platform
Crafting a professional multi-asset trading platform that stays fast and legible under pressure, whether traders are on a trading desk or a phone on the move.
Project Snapshot
Solution
A modular charting and order-entry system with a strict visual language for gains, losses, and pending states, carried consistently from a six-monitor desk to a single phone.
Responsibilities
- Design lead, web & mobile
- Charting & order-entry system
- Responsive framework
- Motion & feedback states
Outcome
Order-entry errors dropped 38% and mobile trade volume rose 57% as traders trusted the app enough to act away from their desks.
Context
High stakes, split-second decisions
Trading interfaces punish ambiguity. A misread number or a mistimed click can cost real money, so every element has to earn its place and every state has to be unmistakable.
I led design for AQX Trader across web and mobile, balancing the information density professionals demand with the clarity newer traders need to avoid costly mistakes.
Approach
A system tuned for speed and trust
I designed a modular charting and order-entry system with a strict visual language for gains, losses, and pending states. Color, motion, and sound were used deliberately — never decoratively — to confirm actions the moment they happened.
The responsive framework let the same mental model carry from a six-monitor desk setup to a single phone screen, so traders never had to relearn the platform when they switched devices.
Outcome
Confidence at every scale
Order-entry errors dropped and mobile trading volume climbed as users trusted the app enough to act away from their desks. The platform's clarity became a differentiator in a category defined by cluttered incumbents.
Project Context
AQX Trader is a professional multi-asset trading platform for forex, crypto, and CFDs, built to stay fast and legible under pressure across web and mobile.
Why this project mattered
In trading, ambiguity has a price measured in real money. A clearer platform wasn't just nicer — it directly reduced user losses and became a genuine competitive moat.
Who it's for
Active retail and semi-professional traders — from power users on six-monitor desks to newer traders acting on their phones — who need the same mental model everywhere.
Business goals
- Reduce costly order-entry mistakes
- Grow trading volume on mobile
- Differentiate from cluttered incumbents
- Retain traders across devices
Market context
The trading category was defined by dense, intimidating incumbents that treated clarity as optional. Newer entrants competed on usability, raising the bar for what traders would tolerate.
Problem Statement
How might we make a data-dense trading platform unambiguous under pressure, so the same mental model holds from a six-monitor desk to a single phone?
01
User Problems
- A misread number or mistimed click costs real money
- Order entry is easy to fumble in volatile moments
- Gains, losses, and pending states blur together
- Mental model breaks when moving desk to mobile
02
Business Problems
- Costly order-entry errors drive churn
- Mobile trading volume lags behind desktop
- Undifferentiated from cluttered incumbents
- Traders won't act away from their desks
03
Technical Constraints
- Real-time market data at high refresh rates
- Charting must stay performant under load
- Latency-sensitive order execution
- Consistent behavior across web and native
04
Product Constraints
- Support both novice and pro trader modes
- Meet regulatory disclosure requirements
- Responsive from ultrawide to small phones
- No feature regressions from the legacy client
Goals
01
User Goals
- Place orders without second-guessingOrder ticket confirms amount, side, and cost before submit
- Read position state instantlyUnambiguous color and typography for P&L states
- Trade the same way on any deviceIdentical mental model from desktop to phone
02
Business Goals
- Reduce error-driven churnFewer mistaken orders and reversals
- Grow mobile trading shareIncrease trade volume executed on mobile
03
Product Goals
- Build a modular charting systemReusable order-entry and chart modules across platforms
- Keep the UI legible under loadStable readability at high data refresh rates
Success Metrics
-38%
Order-entry errors
per 1k orders
+57%
Mobile trade volume
year over year
+22%
Cross-device retention
90-day cohort
-30%
Time to place order
on mobile
Research & Discovery
Trading is high-stakes and habitual, so we studied traders in their own environments: interviews with active traders, sessions watching real orders, a scan of incumbent platforms, and analytics on where errors clustered.
01
Stakeholder Interviews
Interviews with the trading desk and risk teams revealed error reduction — not new features — as the real business priority.
- Order-entry errors were a measurable, recurring cost
- Mobile was the strategic growth surface, not a companion
- Clarity was framed as risk reduction, not polish
Every mis-click is a support case and sometimes a refund. That's our actual cost.
Our mobile app is an afterthought, and that's where growth has to come from.
02
User Interviews
We interviewed ten active traders across experience levels and watched them place live orders. Confidence hinged on unambiguous confirmation.
In a fast market I need to see side, size, and cost in one glance or I don't trust it.
I won't trade serious size on my phone. It feels too easy to fat-finger.
Confirmation
Traders needed an unambiguous pre-submit summary
Consistency
Desktop and mobile had to share one mental model
State
P&L states had to be legible at a glance under load
03
Competitive Analysis
We analyzed leading trading platforms across desktop and mobile.
Legacy desktop platformsDeep, powerful toolingDense, intimidating, error-prone
Newer mobile-first appsApproachable, clean UIToo shallow for serious traders
Exchange interfacesIntegrated with accountsInconsistent across devices
Opening
No platform delivered pro-grade depth with a consistent, low-error experience across devices.
04
Analytics
Order and session data pinpointed where and when mistakes happened.
1 in 12
Orders corrected
Frequent post-submit adjustments
68%
Errors on mobile
Small targets and cramped layout
22%
Sessions cross-device
Traders expected continuity
05
User Journey Insights
Watching the order journey highlighted the submit moment as the critical point of doubt.
- 01Read the marketCharts trusted on desktop, cramped on mobile
- 02Configure orderFields easy to misread in volatility
- 03Review & submitNo clear final summary bred hesitation
- 04Monitor positionP&L states blurred together
Key Research Findings
- 01A clear pre-submit confirmation was the single biggest lever on errors
- 02One mental model across devices was essential to grow mobile volume
- 03A strict color language for P&L states reduced misreads under pressure
- 04Reducing error was a competitive differentiator, not just a nicety
Design Strategy
The research pointed to one lever above all: an unambiguous confirmation moment, held consistent across devices. Strategy followed — treat clarity as risk reduction, unify the mental model, and make mobile a first-class trading surface.
01
Key Insights
- The submit moment was the point of doubtDesign a clear pre-submit summary of side, size, and cost
- Desktop and mobile drifted apartEnforce one mental model and visual language everywhere
- P&L states blurred under pressureAdopt a strict, high-contrast language for gains and losses
02
Design Principles
Unambiguous by default
In trading, ambiguity has a monetary cost
One model, every device
Consistency let traders act confidently on mobile
State is sacred
Gains, losses, and pending must never be confused
03
Prioritization Framework
We ranked work by its effect on error rate first and reach second, front-loading the order-entry and confirmation system that every other feature depended on.
NowOrder ticket & confirmation systemThe single biggest lever on costly errors
NextResponsive charting frameworkUnlocked the mobile growth strategy
LaterAdvanced tools & customizationValued by power users, safe to sequence after
04
Success Criteria
- A trader confirms side, size, and cost before every submit
- The same action feels identical on desktop and phone
- P&L states are unmistakable at a glance under load
- Order-entry errors drop measurably versus the legacy client
Design Process
A loop run under pressure. Because trading punishes ambiguity, every stage was stress-tested against split-second, high-stakes decisions before we let it move forward.
- Step 01
Discover
Studied how traders read the screen in the seconds that matter, from a six-monitor desk to a phone on the move.
- Observed live trading and noted every hesitation or misread
- Interviewed active traders about costly moments of doubt
- Audited existing charts and order entry for ambiguity
- Mapped the mental model across desktop and mobile
- Step 02
Define
Set the bar at unmistakable — every number, state, and control had to mean exactly one thing under pressure.
- Defined a strict visual language for gains, losses, and pending
- Named order-entry errors as the metric that mattered most
- Committed to one mental model across all screen sizes
- Separated must-see data from everything else
- Step 03
Ideate
Explored a modular charting and order-entry system that stayed legible whether it filled a wall or a palm.
- Sketched composable chart and order-ticket modules
- Explored color and type rules for instant status reads
- Tested layouts that reflow from six monitors to one phone
- Pressure-tested concepts against worst-case market noise
- Step 04
Prototype
Built interactive charting and order entry at fidelity, with every state — filled, pending, rejected — made explicit.
- Prototyped the order ticket with confirmation safeguards
- Built responsive chart modules from shared components
- Designed unambiguous gain, loss, and pending treatments
- Simulated fast-moving, high-volume data
- Step 05
Test
Put order entry in front of real traders to see whether speed and certainty could hold together.
- Moderated timed order-placement tasks on web and mobile
- Tracked order-entry errors and misclicks
- Probed confidence trading away from the main desk
- Checked the mental model survived the jump to mobile
- Step 06
Iterate
Sharpened states and controls, then re-tested until traders trusted the app enough to act from their phones.
- Refined tap targets, confirmations, and status contrast
- Tuned chart defaults for the most-watched instruments
- Re-ran order tasks to confirm errors fell
- Shipped and tracked the climb in mobile trade volume
User Flow
Traders come to execute under pressure. The flow protects them at the highest-stakes moment — order placement — by checking margin before an order can go live, whether they are on desktop or a phone.
Log In
Select Instrument
Sufficient margin?
Yes
Place Order
No
Top Up / Resize
Position Open
Key Decision Points
- 01
Check margin before execution
The platform validates available margin at the point of order, stopping an under-collateralized trade before it can be submitted rather than after it fails.
- 02
Make order type unmistakable
Market versus limit is surfaced clearly so a trader never misreads how or when their order will fill in a fast-moving market.
- 03
Stay legible under pressure
Both paths lead to the same live position view — P&L, stops, and risk controls in one glance �� so the experience holds up equally on a trading desk and a phone.
Final Solution
The shipped platform holds up under the pressure of live markets on any screen size. Three surfaces carry it: finding the trade, placing the order, and managing open positions.
01
Trading Terminal
Design Objective
Let a trader read the market and act on it without their eyes ever leaving the decision.
Key UX Decisions
The chart and order ticket share one uninterrupted view, order type is made unmistakable, and a dark, high-contrast palette keeps price action legible during fast, high-stakes sessions.
Outcome
Traders executed more confidently, and time-to-order dropped as the interface stopped competing with the market for attention.
02
Watchlist & Market Discovery
Design Objective
Help a trader scan the market and spot the next opportunity before they commit to a ticket.
Key UX Decisions
Instruments across forex, crypto, and indices sit in one scannable list with inline sparklines, monospaced live prices, and color-coded change; category tabs, search, and favorites let a trader shape a personal watchlist and jump straight into a chart.
Outcome
Traders monitored more instruments per session and moved from spotting a setup to opening the terminal with far less friction.
03
Positions on Mobile
Design Objective
Deliver the same clarity and control on a phone that a trader relies on at their desk.
Key UX Decisions
The desktop's information hierarchy was distilled — live P&L, stops, and one-tap risk actions — into a thumb-friendly layout, rather than shrinking the full terminal into an unusable grid.
Outcome
Mobile trade volume climbed steadily as traders trusted the app to manage positions on the move.
Design System
A dark, high-contrast system engineered for split-second reads. A strict color language for P&L, monospaced numerics, and a teal accent keep the platform legible under pressure.
- #0B0F1CInkText, table content
- #FFFFFFSurfacePanels, cards
- #00BCD8AccentPrimary actions, focus
- #10C476LongGains, buy
- #FF485FShortLosses, sell
Ag
Ag
--radius4pxBase unit2pxTabular numsonGrid8px
Press to see the active state
Disabled
Input — click to focus and type
Checkbox & switch — click to toggle
Buy / Sell — press to trade
Tags
BUYSELL
Tabs — switch views
Results & Impact
Protecting traders at the moment of execution and honoring mobile as a first-class surface drove real behavior change: fewer costly errors, and a decisive shift of volume onto phones.
Business Outcomes
User Outcomes
- Pre-trade margin validation that blocks under-collateralized orders
- Unmistakable market vs. limit order affordances
- A distilled mobile layout that preserves the desktop information hierarchy
- High-contrast dark theme tuned for split-second legibility
- 01Guardrails at the point of action prevent errors better than warnings after.
- 02Mobile earns trust only when it distills, rather than shrinks, the desktop.
- 03In high-stakes UI, legibility under pressure is the whole product.
- Order-entry errorsPer 1k orders-38%
- Mobile trade volumeYear prior+57%
- Cross-device retention90-day cohort+22%
- Time to place orderMobile-30%
Reflection
Designing for traders humbled me. My instinct for clean, minimal interfaces met an audience that equates information density with control — and learning to serve both speed and calm was the real work of this project.
- Treating mobile as a distinct product, not a shrunken desktop, unlocked real behavior change.
- Pre-trade margin validation was the highest-leverage decision we made — it prevented whole classes of errors.
- A strict color language for gains, losses, and risk made the interface readable at a glance under stress.
- I'd spend more time observing live trading sessions before proposing the first layout.
- I'd design customizable layouts sooner, since expert workflows vary more than I assumed.
- I'd pressure-test the mobile experience on poor connections earlier in the process.
Challenges & Trade-offs
Density vs. focus
Traders wanted more on screen; safety wanted fewer ways to make a mistake. The trade-off was a layered interface — dense by default, but with the execution path deliberately uncluttered — which took several rounds to balance.
Speed vs. safeguards
Every confirmation costs milliseconds a trader resents. We reserved friction only for irreversible, high-risk moments and let everything else stay fast, accepting that not every action could be equally guarded.
- 01Minimalism is a means, not a goal — the right amount of information is domain-specific.
- 02For expert users, guardrails must protect without ever feeling like condescension.
- 03Performance is a design material; jank erodes trust as much as a bad layout.
- User-configurable workspaces so traders can tune density to their own style.
- Smarter, context-aware risk alerts that adapt to volatility and position size.
- Advanced order types surfaced through progressive disclosure for power users.
