TradeX
Institutional Trading Terminal
L2 Order Book, Portfolio Risk Matrix (80+ funds), real-time P&L attribution, keyboard-first execution — designed for 120+ concurrent metrics and sub-second decisions.
Grounded in informal PM conversations and direct production exposure from ACY Connect — FIX 4.4 institutional platform serving hedge funds and prime brokers in production. See also: TradeX Hedge Fund (PM strategy and cognitive workflow layer).
The interaction rules in this terminal — partial fill state display, session-aware SOR routing, single-instrument depth focus, keyboard-first cancel/modify workflows — are not borrowed from Bloomberg screenshots. They are derived from ACY Connect's FIX 4.4 protocol work (production, 12+ institutional clients): Tag 39 OrdStatus lifecycle, session state machines, and anti-pattern constraints that govern real institutional order flow. Concept work grounded in protocol reality.
TradeX Institutional Terminal · Interactive Prototype · Simulated Live Data · Exchange-Level Infrastructure Demo
Why TradeX Exists
My production work spans institutional B2B infrastructure (ACY Connect FIX API platform) and retail trading interfaces (LogixTrader, Finlogix, TradingCup). TradeX extends that experience into terminal UX for portfolio managers handling $100M–$50B AUM — applying what I know about institutional order flow to a different scale of problem.
ACY Connect is where I ship institutional infrastructure — FIX Protocol integration for hedge funds and prime brokers. The technical logic mapping from that production work — deconstructing FIX message states like 35=8 (Execution Report) and 35=W (Snapshot) with our Tech Lead and QA — gave me the institutional foundation to design the TradeX terminal.
Three institutional design challenges I explored:
- Level 2 Order Book: Bid/ask depth, spread dynamics, liquidity heat maps. Inspired by order flow patterns from ACY Connect's FIX documentation work.
- Portfolio Risk Attribution: 80+ funds with real-time VaR, Sharpe Ratio, Alpha, Beta across sector/regional exposure.
- Multi-Asset Orchestration: Monitor equities, forex, commodities, derivatives simultaneously with cross-market correlation.
I said "portfolio manager interviews" in the description above. Here is what that actually meant — specificity matters for credibility:
ACY Connect FIX 4.4 — shipped production platform for hedge funds and prime brokers. Direct exposure to institutional order flow, execution reports, and position management workflows.
45–60 min conversations with one PM, one quant analyst, one buy-side risk officer. Not structured sessions. Findings informed the cognitive state framework and 4 unmet demand categories.
Trial access + systematic review of Bloomberg's command structure and IA. Supplemented by FactSet public documentation and Coalition Greenwich research on terminal adoption.
This is not the depth of primary research I conduct for production ACY projects. TradeX is a rigorous design hypothesis informed by real exposure — not a validated product born from structured user research. The distinction matters.
1. Institutional Architecture: Risk & Compliance Matrices
Portfolio Risk Matrix . Multi-Dimensional Risk Decomposition
Compliance Matrix . SEC Filing Review & Audit Logs
TradeX's matrix architecture is derived from the same constraint logic as FIX protocol design: risk managers need fund-level volatility without navigating away; compliance officers need filing status inline with trading activity — not in a separate system. The layout reflects how information flows in production institutional workflows, not how Bloomberg chose to display it.
2. Design Decisions — Why This, Not That
Each decision below documents the alternative I rejected and the reasoning behind it — grounded in direct protocol experience from ACY Connect's FIX 4.4 production system, not from reading Bloomberg screenshots.
Single-page 960 data points, not progressive disclosure
Alternative rejected: Drill-down navigation (click fund → detail view). Standard in retail dashboards.
Why: From the PM conversations — portfolio managers monitor 80+ funds simultaneously during trading hours. Context switching kills reaction time. Every navigation click is latency in a position decision. Density isn't a style choice; it's a workflow constraint.
Single-instrument L2 depth, not multi-instrument overview
Alternative rejected: Show bid/ask for multiple instruments simultaneously.
Why (from FIX production): FIX sessions are instrument-specific by protocol. A Tag 150 ExecType state for AAPL has no meaning in the context of MSFT depth. Mixing instruments in a single order book panel introduces cross-contamination risk in position sizing. Keyboard context-switching (Alt+O) solves the speed problem without compromising protocol clarity.
Pre-execution constraint display, not post-submission errors
Alternative rejected: Surface SEC Rule 15c3-1 / FINRA margin violations after order submission (standard retail pattern).
Why: In retail, a rejected order is a minor friction. In institutional execution, a compliance rejection after submission triggers a reporting obligation and a trade reconstruction audit. The cost of the error changes the design requirement — surface the constraint before the trader commits, not after.
2. SEC/FINRA Compliance: Catching Violations BEFORE Legal Review
Why this matters for private bank platforms: UHNW $10M+ AUM clients operate under extreme SEC/FINRA scrutiny. One compliance violation = $1M-$50M+ fine + reputational damage. The workflow below shows how I proactively identify potential violations during design—not after implementation.
While TradeX is a concept project, this compliance review process is exactly how I work with Legal teams at ACY Securities. Internal ACY platform screenshots are available during interviews; the workflow shown here is identical to production.
Real-world compliance review workflow: Identifying potential violations before implementation
🔍 What This Workflow Shows:
Daily Return figure of $1.9M is extreme for a retail dashboard without "Simulated" labels. Solution: Add mandatory SEC risk disclosures.
"Moderate" is vague for maintenance banners. Solution: Use standardized status terminology required for audit trails.
Proactive Compliance Design:
- Identify violations before Legal review (saving weeks of rework)
- Translate regulatory requirements into specific design constraints
- Document compliance rationale for audit trails
Real-World Institutional Compliance: Fixed Income Screener & SEC Filing Review
The interface demonstrates a production-grade institutional compliance workflow. This shows how regulatory review is integrated directly into the trading terminal.
3. Portfolio Risk Matrix Design
960 Data Points Without Cognitive Overload
80 funds × 12 metrics = 960 concurrent data points. How do you keep it scannable?
VaR and Sharpe Ratio outliers highlighted via font-weight and color-coded severity.
Supporting fund IDs and regional tags dimmed at 60% opacity to reduce visual noise.
What This Demonstrates:
- Extreme Data Density: Managing 900+ points without cognitive collapse.
- Risk Severity Categorization: Using heat-mapping for VaR limits.
- Institutional Scannability: Typographic hierarchy optimized for pro trading.
Design Decisions: What I Chose — and What I Explicitly Rejected
Each of the following was a real fork in the design. The rejected paths weren't wrong — they were wrong for this specific user context.
Tabs hide context. A portfolio manager switching between Risk Matrix and Order Book loses the cross-correlation signal — the P&L movement that caused them to check the book in the first place.
All primary views visible simultaneously. Panels are resizable but never hidden behind navigation. Matches the multi-monitor mental model of experienced desk traders.
SVG DOM manipulation at L3 tick frequency (10–50ms updates for a liquid equity) causes visible jank above ~200 rows. DOM diffing overhead is incompatible with the latency expectation.
Canvas repaints the entire price ladder each tick at a fixed cost. Combined with virtual scrolling for the full order depth, this matches the performance profile of production institutional terminals. Accessibility tradeoff acknowledged — screen-reader fallback requires a separate DOM summary row.
Standard retail pattern: submit order → receive rejection → re-enter. In a professional desk environment this costs seconds and disrupts flow. Legal at ACY confirmed the same problem for their manual compliance review workflow: violations found after the fact require full re-documentation.
Position limit warnings, wash-trade flags, and concentration limits surface in the order ticket itself as the trader types quantity. This mirrors how Bloomberg's TOMS and ION's trading platforms handle compliance — the constraint is visible before commitment, not after rejection.
Pure imitation fails WCAG 2.1 AA contrast for financial data display and creates brand confusion. More critically, green-on-black conflates semantic green (profit / buy) with display green, causing parsing errors under stress.
Red/green reserved strictly for directional price semantics. UI chrome uses neutral blues and ambers. Light mode for compliance/risk roles (printable, auditable). Semantic consistency enforced across both themes so traders switching workspaces don't re-learn color meaning.
Multi-Dimensional Analytics Integration
The right-side panel integrates 5 analytical dimensions simultaneously:
- Sector Allocation Bar Chart: Portfolio exposure by industry (2015–2021 time series)
- Stress Test Scenarios: Portfolio performance under Stress/Crisis/Montreal conditions
- Regional Exposure Heat Map: Geographic concentration risk (China, Spain, European Union, Frontier markets)
- S&P 500 Correlation: Live chart with 3 moving averages (Morning/Median/Closing) tracking index correlation
- EUR/USD Time Frame: Forex exposure impact with volume distribution
Design Rationale: Institutional portfolio managers don't look at funds in isolation. They evaluate systematic risk, correlation exposure, and macro sensitivities. This multi-panel layout supports holistic portfolio construction, not individual security selection.
4. Level 2 Order Book: Market Microstructure
The Order Book is the most critical institutional trading interface — where professional traders analyze market depth, liquidity concentration, and optimal execution pricing. The design logic for this component was directly informed by my production work on ACY Connect.
By mapping raw FIX 4.4 protocol logic from our Tech Lead and QA (handling Partial Fills, Iceberg Orders, execution reports, and snapshot updates), I gained the technical intuition needed to design a terminal UI that correctly represents market microstructure and liquidity heat maps at institutional scale.
Level 2 Order Book . Real-Time Market Depth with Bid/Ask Heat Map & Quick Execution Controls
What is an Order Book (and Why It Matters Institutionally)
In retail trading platforms (my LogixTrader work), users see a single "current price" (last traded price). Institutional traders need to see the entire order book — all pending buy orders (bids) and sell orders (asks) at different price levels. This is called Level 2 market data.
Why this matters: A portfolio manager executing a $10M equity order can't just "market buy" — they need to see if there's enough liquidity at the current price, or if their order will move the market (slippage). The Order Book visualizes this liquidity distribution.
Solution: Bid/Ask Depth Heat Map
TradeX's Order Book uses color-coded heat mapping to visualize liquidity concentration instantly:
Left Column: Bid Side (Buy Orders)
| Qty | Bid Price | Visual |
|---|---|---|
| 6 | 20872.00 | Light Green |
| 50 | 20843.00 | Dark Green |
Darker green = higher quantity (more liquidity at that price level). Traders can instantly see where large buy orders are concentrated.
Right Column: Ask Side (Sell Orders)
| Ask Price | Qty | Visual |
|---|---|---|
| 20902.00 | 6 | Light Red |
| 20931.00 | 50 | Dark Red |
Darker red = higher quantity (more sell pressure at that level). Identifies resistance zones where large sellers are waiting.
Quick Execution Interface
The Order Book integrates one-click execution controls directly alongside market depth visualization — eliminating context switching between analysis and execution:
Execution Controls (Per Symbol Card)
- Entry Price: Adjustable via +/− buttons (default: current market price)
- Units: Position sizing with +/− controls (supports fractional shares)
- Est. T.M. (Total Margin): Real-time margin calculation based on account equity
- Auto Send Checkbox: Toggle between manual confirmation vs. instant execution
- Buy Manually / Sell Manually: Large, color-coded action buttons (green buy, red sell)
Design Rationale: Professional traders executing 50-200 trades/day need zero-click workflows. The "Auto Send" mode enables keyboard-only execution: Tab to Units → Enter value → Spacebar to execute. No mouse required.
Trade History Integration
Below the Order Book, TradeX displays a real-time Trade History panel with granular status tracking:
| Field | Data Type | Purpose |
|---|---|---|
| Status/Type | Buy Limit | Order classification (Pending, Filled, Closed, Rejected) |
| Units | 100, 200, 5000 | Position size per trade |
| Price | 38.31, 120.77 | Execution price (or limit price if pending) |
| Stop Loss | 123 | Risk management threshold (auto-close if price hits) |
| Take Profit | 42.13 | Profit target (auto-close when reached) |
5. Multi-Chart Orchestration
Multi-Chart Dashboard . 4-Panel Synchronized View with Real-Time P&L Tracking
Challenge: 4 Simultaneous Charts Without Cognitive Overload
Portfolio managers monitoring multiple positions (Microsoft, Apple, Google, Tesla simultaneously) need synchronized time-frame controls — changing one chart's time range should update all 4 charts. This is a coordination challenge absent from single-chart retail platforms.
Solution: Unified Time-Frame Controller
Bottom-right chart controls: 1D, 1M, 3M, 1Y, 5Y, All buttons globally adjust all 4 charts simultaneously.
UX Rationale: Institutional traders analyze correlation patterns (e.g., "How did Microsoft and Apple move together during last month's Fed announcement?"). Synchronized time frames enable comparative analysis without manual re-adjustment per chart.
Terminal Orchestration: The Multi-Monitor Engine
Standard B2B SaaS design stops at the browser tab. Institutional terminal design starts at the workspace level. Top-tier traders at Goldman or BlackRock use 4–8 monitors; TradeX's architecture was designed to manage this Stateful Orchestration.
Using BroadcastChannel API and SharedWorkers, TradeX keeps multiple windows in sync — clicking a ticker on Monitor 1 updates the order book on Monitor 3 and news sentiment on Monitor 4. Browser-based sync typically achieves 100–200ms latency, which works for portfolio monitoring and position management. True sub-50ms sync (required for high-frequency execution) would need native terminal architecture like Bloomberg's C++ infrastructure.
Workspaces are treated as Versioned Snapshots. If a trader moves from a "Macro View" to an "Earning Season View," all 8 monitors must re-provision their specific layouts and data streams simultaneously, preserving the "Ticker Context" across the entire physical desk.
Principal Design Perspective:
Designing for multi-monitor setups requires moving beyond 12-column grids into Spatial Orchestration. I de-prioritized "visual comfort" in favor of "Peripheral Awareness" — using color-coded luminance shifts on secondary monitors to signal market alerts while the primary monitor remains focused on execution. This is systemic design at the environment level.
Watchlist Integration
Left sidebar displays a live watchlist with 15+ symbols showing Bid, Ask, Spread, and 24hr Change%. This mirrors Bloomberg Terminal's "Monitor" panel — professional traders don't navigate to symbols via search; they maintain persistent watchlists of their coverage universe.
6. Adaptive UI
Light Mode . Fibonacci Technical Analysis with Integrated Live Webinar Panel
Why Light Mode Matters Institutionally
Most institutional terminals (Bloomberg, FactSet) default to dark mode for 10+ hour trading sessions (reduced eye strain). But compliance officers, risk managers, and regulatory reviewers often work in well-lit office environments where dark mode causes glare on printed materials.
Design Decision: Dual-Theme Architecture
TradeX supports both dark (traders) and light (compliance/risk) themes with preserved data visualization:
- Dark Mode: Pure black (#000000) with neon accents (Cyan #00D1FF, Lime #4CAF50, Amber #FFAA00)
- Light Mode: Off-white (#F5F5F5) with high-contrast typography (80%+ black text on light backgrounds)
- Consistent Across Themes: Red/green price movements, chart candlestick colors, and risk severity indicators remain identical (ensures muscle memory transfer)
Technical Indicator Integration: Fibonacci Retracement
The Microsoft/TSLA charts display Fibonacci retracement levels (0.236, 0.382, 0.5, 0.618, 0.786) — a technical analysis tool used by institutional traders to identify potential support/resistance zones. Additional indicators visible:
- DeMarker Indicator: Momentum oscillator (bottom panel) — identifies overbought/oversold conditions
- Volume Bars: Integrated below price charts (green = buying volume, red = selling volume)
- Multiple Time Frames: 1H (hourly) granularity for intraday trading decisions
Professional-Grade Technical Analysis: Fibonacci & Gann Tools
Institutional traders (particularly in commodities, forex, and equity derivatives) extensively use Fibonacci retracement/extension tools and Gann analysis for identifying key price levels and time-based cycles. Bloomberg Terminal, Thomson Reuters Eikon, and TradingView Pro all provide these tools as standard features for professional market analysis.
Fibonacci Tools Suite . Institutional-grade retracement, channel, and time-based analysis
Why Fibonacci Matters Institutionally
Fibonacci tools are not "mystical" — they're self-fulfilling prophecy patterns. When thousands of institutional traders watch the same 61.8% retracement level, it becomes a real support/resistance zone due to clustered order flow.
- Fib Retracement: 0%, 23.6%, 38.2%, 50%, 61.8%, 100% levels for pullback analysis
- Fib Channel: Parallel trend channels with Fibonacci spacing for breakout zones
- Fib Speed Resistance Fan: Angular support/resistance lines from trend origin
- Fib Arcs: Curved support/resistance zones based on price distance
- Fib Time Zone: Vertical lines at Fibonacci intervals (predicting reversal timing)
Gann Analysis Tools . Price-time relationship mapping for cycle-based trading
Why Gann Matters Institutionally
W.D. Gann's price-time analysis methods are used by commodities traders and forex strategists to identify cyclical patterns. Gann Fans (45° angle lines) and Gann Boxes help institutional desks predict major market turning points.
- Gann Fan: 9 angular trend lines (1x1, 2x1, 3x1, etc.) for support/resistance mapping
- Gann Box: Price-time square grid dividing trends into geometric segments
- 1x1 Line (45° angle): Represents "perfect balance" between price and time
Real-World Use: CME Group traders use Gann analysis for S&P 500 futures; forex desks at Deutsche Bank and Citi apply Gann Fans to EUR/USD major trend analysis.
What This Demonstrates for Institutional Finance Roles
Including comprehensive technical analysis toolsets proves I understand:
- Professional Trader Workflows: Institutional platforms must support quantitative analysis (algorithmic trading) AND discretionary technical analysis (human pattern recognition)
- Multi-Strategy Support: Different trading desks use different methodologies — equities desks favor moving averages, commodity traders rely on Fibonacci, forex teams use Gann cycles
- Tool Parity with Bloomberg: Any institutional terminal competing with Bloomberg Terminal MUST provide equivalent charting tools (Fibonacci, Gann, Elliott Wave, Ichimoku Cloud)
- Configurability > Simplicity: Unlike retail platforms that hide complexity, institutional UIs expose ALL tools and let power users customize their workspace
Design Philosophy: Retail platforms optimize for "ease of use" (reducing cognitive load). Institutional platforms optimize for "depth of analysis" (maximizing analytical power). TradeX embodies this institutional mindset by providing professional-grade technical tools without UI hand-holding.
Collaboration Integration: Live Webinar Panel
Bottom-left corner shows an ACY Webinar video feed. This represents a unique institutional requirement: real-time analyst commentary. Bloomberg Terminal offers similar functionality through Bloomberg TV integration — traders watch market analysis while monitoring positions.
Design Insight: Institutional trading isn't solo work. Traders coordinate with research analysts, risk managers, and compliance officers via integrated communication tools (video, chat, voice). TradeX's webinar panel demonstrates understanding of this collaborative workflow.
7. What This Shows
TradeX demonstrates that I understand the architectural differences between retail and institutional finance UX — critical knowledge for designing platforms serving portfolio managers and wealth advisors:
�� Production Work (Retail/Broker)
- LogixTrader: Web trading (15-30 metrics per screen, single-chart focus)
- Finlogix: Broker terminal (50+ metrics, multi-chart support)
- TradingCup: Copy trading (social proof, risk controls)
- Target Users: Retail traders, semi-professional day traders
🎯 TradeX Concept (Institutional)
- Portfolio Risk Matrix: 80+ fund analytics (960 data points simultaneously)
- Level 2 Order Book: Market microstructure, bid/ask depth visualization
- Multi-Chart Orchestration: Synchronized 4-panel monitoring
- Target Users: Portfolio managers ($100M–$50B AUM), institutional traders
Core Transferable Skills for Institutional Finance Roles
1. Extreme Data Density Design
Institutional platforms like Bloomberg Aladdin display 200+ risk metrics per portfolio. TradeX's 960-datapoint Risk Matrix demonstrates the information architecture approach required for scannable hierarchies at institutional scale.
2. Market Microstructure Understanding
Order Book design demonstrates knowledge of bid/ask spreads, market depth, and liquidity visualization — including the handling of Partial Fills and detection of Iceberg Orders (splitting large orders into smaller chunks to hide size from the market). These are critical for any institutional trading platform serving professional market participants.
3. Multi-Asset Class Orchestration
Professional traders monitor equities, forex, commodities, and derivatives simultaneously. TradeX's multi-chart synchronization mirrors multi-asset institutional terminal architecture.
From Institutional Terminal to AI-Native Hedge Fund Dashboard
The Portfolio Risk Matrix and Compliance architecture in this project form the structural foundation for a deeper exploration: what happens when you rebuild this terminal from scratch with intelligence-first architecture — no legacy constraints, no incremental feature additions? TradeX: Designing the Dashboard Bloomberg Can't Build answers that question across 8 views.
This Project: Institutional Terminal
Portfolio Risk Matrix · Static density architecture
Evolution: Next-Generation Hedge Fund
Fund Performance & Risk Analytics · Live macro correlation
This Project Establishes
- Data density architecture (960 data points)
- Compliance matrix with SEC audit trails
- Order Book microstructure visualization
- Keyboard-first execution design
Hedge Fund Screen Adds
- Live macro correlation panels (Sector / Regional / S&P)
- Intraday alpha attribution decomposition
- AI-driven hedge fund signal intelligence
- Causal chain mapping (not just price correlation)
Exchange-Level Market Infrastructure
The gap between "institutional terminal" and "exchange-grade infrastructure" is defined by what lives below the chart. L3 order book depth, venue routing intelligence, microstructure analytics, real-time TCA, and T+0 settlement visibility are the layers that separate Bloomberg from consumer-grade terminals. The interactive prototypes below demonstrate each layer.
L3 Order Book — Full Depth, Individual Order Resolution
L2 aggregates by price level. L3 shows every individual order in the queue — the institutional standard for execution timing and informed flow detection.
Market Microstructure Panel
Toxic flow detection, adverse selection metrics, and order flow quality — unavailable in any retail terminal. This panel answers: are informed traders positioned against me right now?
Smart Order Router — Venue Allocation
Real-time routing decisions across lit markets, dark pools, and off-exchange venues. Not a black box — institutional desks need to know if they're being front-run by their own router.
Real-Time TCA — Transaction Cost Analysis
Every fill measured against arrival price — live, not end-of-day. Alpha attribution is meaningless if you can't distinguish genuine skill from favorable execution conditions.
T+0 Settlement Tracker (2026 Standard)
Post-SEC T+1 mandate with movement toward T+0. Risk management doesn't end at execution — it runs through CCP clearing and DTC confirmation.
Why This Layer Is the Real Institutional Qualifier
Retail terminals show price. Professional terminals show market depth. Exchange-level infrastructure shows why the market is moving — toxic flow, information asymmetry, venue liquidity fragmentation. Kyle's Lambda tells you if someone smarter is trading into your position. The SOR tells you whether your broker is optimizing your fill or their rebate. TCA tells you the real cost of your decision. In 2026, a terminal without these layers is a retail terminal wearing an institutional suit.
Explore the Full Terminal
12-screen interactive terminal built in React + shadcn/ui — Dashboard, Trading, Portfolio, Risk Matrix, Factor Exposure, Execution Analytics, Compliance, and more.
8. Reflection
"Retail platforms design for the 80% happy path. Institutional terminals design for the 1% catastrophic scenario."
The Portfolio Risk Matrix exists for the days when markets crash — when a portfolio manager managing $10B in AUM needs to identify which 5 out of 80 funds are violating VaR limits in under 5 seconds. That's not a retail UX problem. That's an institutional design requirement that demands extreme density, color-coded severity, and keyboard-first workflows.
This concept challenged most of the UX principles I use in LogixTrader and Finlogix. Those platforms benefit from progressive disclosure and cleaner layouts. TradeX needs the opposite: maximum information density and every data point visible at once. Knowing when to use which approach — and why — is the core skill I've been developing across both retail and institutional work.