
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.

/summary
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.



/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.



/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.


/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.

/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.



/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.

/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.

/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.
Go deeper
Other Cases


Building a Digital Bridge for Educational Empowerment

Building a Platform for the Acting Community
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