Skip to main content
DesignKey Studio

FinTrading

Trading2024

Transforming the Trading Experience

React UI redesign for Fintrading's professional trading platform - real-time market data, customizable dashboards, and MFA security. User retention increased 25% post-launch.

FinTrading platform open on a laptop, showing the dark options dashboard with bid, ask, and volatility tiles above a NASDAQ price chart and a realtime trade scan

/summary

UX ResearchUI/UX DesignOnline PlatformWeb & Mobile DevelopmentTechnical Support

Fintrading provides trading solutions for individual and institutional investors, giving them access to real-time market data and the tools needed to act on it quickly. Their backend infrastructure was strong - reliable data feeds, solid order execution, mature risk controls - but the interface had not kept pace. As the competitive landscape for trading platforms intensified, the gap between what the backend could do and what users could actually see and interact with was affecting retention.

FinTrading wordmark in white on a blue background with faint donut-chart shapesFinTrading Trade Filters panel, with the Trades category open on print side size, trade price, spread, and symbol fields
The FinTrading dashboard side by side in light and dark themes on two tablets, showing the same market data tiles, price chart, and trade scan

/context

Professional traders are among the most demanding users any software team will encounter. An interface that requires extra clicks, obscures key data, or loads slowly during volatile market conditions is not just inconvenient - it costs users money. Fintrading's existing UI had accumulated enough friction over successive releases that it was actively driving churn.

Objectives

Three objectives defined the engagement. They were deliberately sequenced: the interface had to be usable before it could be beautiful, and it had to integrate cleanly before it could be extended.

Revamp the User Interface

Replace the existing layout with a modern, information-dense design that presents complex data legibly without overwhelming the user.

Enhance User Experience

Streamline the workflows traders use most frequently - chart analysis, order entry, position monitoring - to reduce the steps between intent and action.

Integrate New Features Seamlessly

Add new capabilities without disrupting the existing backend systems that traders were already relying on.

Blue candlestick chart climbing across a dark gridFinTrading on a phone, showing bid, ask, underlying price, volatility, gamma, rho, and theta tiles above the NASDAQ, NYSE, and SSE tabs
FinTrading Customize Columns panel, where a trader ticks and drags the time, symbol, trade, bid, and ask columns into order

/process

Discovery and Planning

The project began with structured discovery: session recording reviews, navigation pattern analysis, and direct interviews with active traders. Three pain points emerged consistently. Core workflows - opening a chart, placing an order, reviewing a position - required more steps than they should, and users had developed workarounds (bookmarked deep URLs, multiple open tabs) to compensate. The dashboard was not customizable, so equity traders saw crypto modules they never used and vice versa. And the mobile experience was effectively unusable for anything beyond passive reading.

Design and Development

The core layout decision was a three-column workspace model - persistent sidebar, primary chart area, secondary order panel - familiar to professional traders from other platforms. Familiarity was deliberate: the goal was to reduce time to proficiency, not to be inventive for its own sake.

Testing and Deployment

Testing ran in three tracks simultaneously: usability validation with active traders, performance benchmarking to confirm the React rebuild maintained real-time rendering requirements, and security testing covering authentication, session management, and data transmission.

Technical stack - Figma for wireframes and prototypes; React, HTML5, CSS3, and JavaScript on the frontend, integrated with FinTrading's existing backendDelivery workflow from discovery and planning through design, development, review, launch, and post-launch support

/key features & innovations

Redesigned UI/UX

The interface was rebuilt around a three-column workspace model: a persistent sidebar for navigation and account data, a primary content area for charts and market data, and a secondary panel for order management. Navigation that previously required multiple clicks was compressed into persistent sidebar access. The visual hierarchy on every screen was audited against a single question: what does the user need to see first?

Real-Time Data Integration

The platform's data feeds were already reliable at the backend level. The redesign addressed how that data was surfaced - specifically, how to display rapidly updating numbers and charts without creating visual noise. The solution used targeted DOM updates rather than full component re-renders on each data tick, which maintained smooth 60fps performance even during high-volatility periods when data change rates spike.

Responsive Design

The mobile layout was designed as a dedicated experience, not a scaled-down adaptation of the desktop. On smaller screens, the workspace compresses to a single-panel focus mode: the user's most-watched instruments and current positions, with order entry accessible via a persistent bottom action bar. The full charting suite is available via drill-down but is not the default mobile view - research showed that mobile traders primarily use the platform for monitoring and quick adjustments, not deep technical analysis.

Advanced Charting Tools

The charting module was rebuilt with a customizable overlay system. Traders can stack technical indicators (moving averages, RSI, MACD, Bollinger bands) on a single chart without navigating away. Chart time frames are switchable via keyboard shortcut as well as UI control - a specific request from power users in the discovery interviews.

Customizable Dashboards

Users can configure their dashboard layout from a widget library - adding, removing, and rearranging modules to match their trading style. The widget system accommodates equities, crypto, and institutional portfolio configurations without requiring different product variants.

Streamlined Order Management

The order management panel surfaces the information traders need at the moment of execution: current bid/ask, account exposure, and open orders in the same instrument - all visible before confirming a trade. This reduces cognitive load and decreases the likelihood of errors under time pressure.

Secure Authentication

Multi-factor authentication covers all account access points, with session management tuned to trading workflow realities - active during market hours, requiring re-authentication after extended inactivity. The MFA implementation supports authenticator app, SMS, and hardware key options, giving institutional users the compliance flexibility they require.

User Notification System

Real-time alerts are configurable per instrument and per account event: price target hits, order fills, margin warnings, and market open/close events. Delivery is prioritized by the user's own configuration rather than a fixed hierarchy.

Gallery of FinTrading screens in both themes - saved filter settings, the filter builder, delete confirmation, the options dashboard, and the customize columns panel

/challenges & solutions

Simplifying Complex Workflows Without Removing Capability

Every workflow change was validated against one question: does this make the task faster for an experienced user, or only less intimidating for a beginner? Where those goals conflicted, the experienced user's workflow was prioritized. The mechanism was progressive disclosure: the most common actions are one step away, while advanced controls are accessible via expansion rather than buried. Power users reach what they need quickly; newer users are not overwhelmed by seeing everything at once.

Maintaining System Stability During Integration

The redesign ran in parallel to a live production system handling active trading. The team maintained a staging environment mirroring production data throughout development, so integration changes could be tested against real data shapes before going anywhere near the live system. Discrepancies between what the new frontend expected and what the existing API returned were resolved in staging rather than in production.

The FinTrading option chain with its date picker open on August 2024, shown in light and dark themes over a wall of market tickers
Close-up of FinTrading saved filter settings cards, each listing its trades and options criteria with a More linkFinTrading on two phones - the Formula Filter form with symbol, market, and threshold fields, and an exchange breakdown donut for a QQQ put

/result & impact

25% increase in user retention.

Retention improvements of this size from a UI redesign indicate the friction being removed was material - users were churning not because the product lacked capability but because accessing that capability required too much effort. When the interface stops fighting the user, the underlying value of the product is no longer obscured.

Measurable reduction in support inquiries.

Post-launch, ticket volume for UI-related issues dropped significantly. Requests about "how do I find X" decreased because the layout made the answers obvious. Every user who figures something out independently rather than submitting a ticket has a higher-quality product experience.

Positive feedback concentrated on the right things.

Post-launch feedback focused on three themes: visual clarity, chart interaction speed, and the customizable dashboard - which align precisely with the three pain points the discovery research identified. That alignment is the intended outcome of a research-driven process.

The full FinTrading platform - the options dashboard in both themes, exchange selection, saved filters, the formula filter over a colour-coded options table, and the payoff chain

/future projections and strategic growth

The platform's current architecture supports a clear next phase of development.

Advanced Trading Tools

Options pricing overlays, correlation heat maps, and portfolio stress-testing tools are on the roadmap, enabled by the widget system's extensibility. These were scoped but held out of the initial release to keep the core redesign focused.

Scalability

Adding new instrument classes, data feeds, or user tiers requires adding widgets and API connections within the existing model - not structural changes to the frontend.

FinTrading settings for trade sounds and chart linking beside the filters, columns, and action menu, with the realtime trade scan open in a browser

/conclusion

The Fintrading redesign succeeded because it started with a rigorous answer to the right question - not "what should the new interface look like?" but "what is making the current interface fail users?" The discovery research produced specific, actionable findings that translated directly into design decisions. Every feature in the final product traces back to a documented user need, not a design preference. The 25% retention improvement is the outcome; the reason it happened is that the redesign addressed the actual sources of user frustration rather than surface symptoms.

Your next project?

Whether it's an internal tool for your company or a highly available Software-as-a-Service - we help you to get your ideas off the ground!

Start a Similar Project