Giving Traders Back Control: Manual Close & Take-Profit / Stop-Loss Flow Design for a Quant Trading Platform
Timeline2023.06–2023.08
Team Members1 Product Owner 1 UI/UX Designer 2 Full-stack Engineers
My RoleUI/UX Designer
ResponsibilitiesSecondary Research Wireframe Prototyping Design Handoff Videos
Software UsedFigma FigJam Jira
Project Overview
Bringing risk controls that once required an exchange back into the quant-strategy platform.
Crypto Arsenal (CA) is a quantitative trading platform where strategy bots place orders automatically. But when traders needed to intervene in their own positions, CA offered no entry point. Switching back to the exchange could cause the entire strategy to be flagged as abnormal and forcibly stopped. Starting from user feedback and the established flows of three exchanges, I brought position data, limit and market closes, and take-profit / stop-loss controls into CA, turning manual intervention into a valid action the system can understand.
Strategies trade automatically, but human intervention meant returning to the exchange and risking a broken strategy.
Strategy developers running multiple strategies
They could see strategy returns, but CA showed neither whether a position was long or short nor whether it was currently gaining or losing. Checking required logging into the exchange, where positions from multiple strategies were impossible to tell apart.
Traders following strategies who still want control
Whether they wanted to lock in gains or cut losses before conditions triggered, traders could only wait. Some closed positions manually on the exchange, causing the system to flag and forcibly stop the entire strategy with no way to recover it.
Platform: CA's business risk
If core risk controls can only happen on the exchange, CA cannot support the complete trading flow. Over time, that weakens users' incentive to stay on the platform and reduces opportunities for transaction-fee revenue.
Checking a position required logging into the exchange; none of this information was visible in CA at the time.
Outcome walkthrough
From limit and market closes to take-profit / stop-loss, all three core flows now happen inside CA.
Flow 01
Choose a limit close in Trading Details, enter the price and quantity, then confirm the order.
Product Introduction
What Is Crypto Arsenal?
Just like traditional financial markets, traders in crypto markets use an exchange to convert fiat currency (such as USD) into cryptocurrency. The exchange acts as a middleman, completing trades and connecting to the underlying blockchain.
But crypto trading has a high barrier: it usually requires manually watching the market and placing orders, along with a solid understanding of the market. That's where "trading strategies" come in: programs or algorithms that monitor the market and trade more efficiently.
↔Swipe to see more
Traders convert fiat to crypto and trade automatically on exchanges via strategies; Crypto Arsenal sits between "strategy" and "exchange" to execute orders.
Crypto Arsenal is a platform that connects directly to exchanges and provides traders with automated strategies. It serves two roles at once, forming a supply-and-demand ecosystem around strategies.
↔Swipe to see more
Developers build and list trading bots; traders pick bots to use; returns flow between both sides and the platform.
This model creates value for traders, developers, and the platform alike. However, strategies are not 100% fully automated, so traders often still need to fine-tune them based on market conditions. That's exactly the starting point this "position display and manual close" feature set out to solve.
Role & Workflow
How I Worked at CA
At CA, work ran in 1–2 week sprints — small features took about 2–4 weeks to design, larger ones 1–3 months. Beyond ongoing discussions with the PO on release timing and weekly user feedback, most features were grounded in secondary desk research and competitive design. My design process as a designer was as follows:
01Secondary research / feedback
02UI flow proposal
03Wireframing
04Feasibility review with PO
05Prototyping
06Internal team review
07Design Handoff Videos
08Jira ticketing
Problem
User Pain: Overall P&L Is Visible, but Position State Isn't
When users trade with strategy bots on CA, they can see the strategy's overall profit, but they cannot clearly understand "what position is open right now." When multiple strategies are running at the same time, or when a single strategy may open either long or short positions, users cannot directly tell whether the current position is long or short, its size, entry price, mark price, floating P&L, or how far it is from take-profit / stop-loss.
"I can see how much the strategy has made, but whether it's currently long or short, in profit or in loss — the interface shows none of it."
Strategy User ATrader running / following strategies
"To check positions I have to log in to the exchange, and when I'm running several strategies at once I can't tell which position belongs to which strategy."
Strategy User BRunning multiple strategies at once
"The strategy has take-profit / stop-loss set, but the market moves too fast — I'd like to take profit or cut losses manually rather than wait for the strategy's conditions to trigger."
Strategy User CFlexible take-profit / stop-loss
"I'm already at a profit I'm happy with — I want to lock it in myself instead of waiting for the strategy's set conditions to close."
Active Trader AWants to keep manual control
"I just wanted to close one position early, so I did it on the exchange — and the whole strategy got flagged as abnormal, shut down, and couldn't be recovered."
Active Trader BHas had a strategy force-stopped
"I want to know how far the current position is from take-profit / stop-loss, but CA only shows overall performance — I can't see where this position might be closed next."
Active Trader CWants to gauge exit risk
Current State
Strategies Live in CA, but Positions Live on the Exchange
CA's Portfolio page lets users view all running strategy bots and shows overall performance in the top right — profit, ROI, unrealized ROI, and asset allocation. However, the interface doesn't directly show a single strategy's actual positions: long / short direction, size, entry price, mark price, and floating P&L. To check a single position, users still have to review it on the exchange — so CA, as a strategy-management platform, can't let users fully grasp each strategy's real returns and risk on-site.
Design Rationale
Bringing Manual Close into CA, So Intervention No Longer Kills the Strategy
The problem isn't just "can't see the position." When a user closes on the exchange to control single-trade risk, it can wreck the entire strategy: the bot detects that a position it manages has suddenly vanished, its state breaks, and for risk control it can only stop the strategy with no way to recover.
Closing manually on the exchange (today)
CA Can't Read Your Intent
User leaves CA and acts on the exchange
The bot finds a managed position has vanished
Internal state diverges from the exchange — flagged abnormal
→ The whole strategy is force-stopped, unrecoverable
Closing manually inside CA (future)
The System Reads It as a Valid Action
User taps close inside CA
CA tells the bot this is an intentional, valid command
The bot syncs state and doesn't enter error protection
→ Only the current position closes; the strategy keeps running
So the direction is clear: bring closing inside CA. A manual close only ends the current position and moves the strategy to flat; when entry conditions are met again, the bot still opens automatically — giving users both the discipline of automated trading and the freedom to manage their own returns.
Exchange UI Benchmark
Mapping Common Exchange Patterns for Positions, Closing, and TP/SL
To let users pick up the flow seamlessly, I benchmarked the real interfaces of Binance / Bybit / OKX, breaking down the position fields, closing flows, and TP/SL flows the three share. Considering also what data the exchanges can return, I converged on an operation flow tailored to CA.
Trade Detail Confirmation
Converged from the three exchanges' interfaces: the most common, exchange-retrievable, and user-relevant fields for a futures position.
Trade Info Tabs
Position, Open Orders, Order History, Position History
Binance adds a step:
enter amount / quantity first
Bybit
OKX
The three close flows are largely the same: find the position → choose Limit or Market → confirm. The only difference is Binance adds an extra amount / quantity screen. CA follows the same core structure.
Flow 2: Futures TP/SL
↔Swipe to see more
1Position / trade screen
2Set TP / SL
Binance
Bybit
OKX
TP/SL is two steps everywhere: open the position → set the take-profit / stop-loss trigger price and quantity. CA follows the same structure.
Across Binance, OKX, and Bybit the interfaces and flows are essentially the same — only the UI components differ. CA's two flows therefore follow the same form so users can transition quickly.
Wireframe
Building a Flow as Smooth as the Exchanges'
Although an initial concept has been developed by referencing exchange-based operations, the trading flow of the CA product still differs from that of exchanges. Exchanges are primarily based on fully manual operations, while CA currently relies on strategy bots to open positions automatically. Traders can then decide, based on their own judgment, when and how much of a position to close manually. Therefore, when introducing manual position closing, take-profit, and stop-loss features into CA, multiple design proposals are needed to further confirm the final interface style and operational flow.
Flow 1
Manual Close inside CA
1 / 3
Add an Exchange Record tab in the top right. Click it to view position details, select the corresponding position, and click the close button.
Why It Wasn't Chosen
The trend chart on the left has to shrink, but in terms of hierarchy the chart marks entry and exit points — too small and those become hard to tap. And the right side can't fit all 8–10 columns of exchange data, so some information is inevitably sacrificed.
Flow 2
Manual TP/SL inside CA
1 / 4
Add a view details button to the original action column, and click the button.
Why It Wasn't Chosen
Although this version references Binance's current pattern and is familiar to users, CA does not currently have this component, so building it from scratch would take more time.
Design Iteration
Component Iteration
I tested with the internal team and engineers, then reworked components one by one — the strategy-bot bar's information display, the close-position quantity interaction, and the TP/SL button label — so each maps more closely to how users actually read it.
Flow
1 & 2
Strategy Bot Bar UI Information
Optimizing Information Hierarchy and Button Consistency in Strategy List
Originally, the list columns displayed both Performance and Time Period at the same time, crowding information in the table and compressing horizontal space. The Action column on the right only had the main Stop button, leaving the Duplicate function hidden or not presented at the same level.
In the revised version, Performance and Time Period are removed from the bottom list and moved to the Accumulated EC chart area. This allows users to directly compare strategy IDs and time ranges when viewing performance curves, eliminating the need to cross-check table columns, clarifying the information hierarchy, and streamlining the list below.
Before
After
Flow 1
Close-Quantity Interaction
Fixed to match real user needs
The original close-quantity used an input field with a dropdown: users tapped the field, then picked from fixed ratios like 10%, 20%, 50%, 100%. It made common ratios quick to select, but anything off-list had to be typed manually. The expanded dropdown also covered the content below, making the dialog feel cramped.
The revised component became an input field plus a ratio slider. Users adjust the close ratio directly via the slider and see the current value live, e.g. 0%. Compared with a dropdown, a slider better expresses a continuous "0% to 100%" range and makes adjusting the close quantity more intuitive.
Before
After
Flow 2
System-Info Display
Fits how most users work
The original TP/SL explanation sat at the very bottom of the dialog, presenting all rules and limits at once. It let users see everything immediately, but it crowded the main controls with text and felt heavy. For users already familiar with the feature, these long descriptions don't need reading every time — they actually slowed things down and made the interface feel cluttered.
The revision collapsed the full explanation into an info element beside the title, surfacing details only on hover or when the user wants more. This keeps the default state cleaner and lets the main area focus on setting and confirming Take Profit / Stop Loss prices, with less text noise. It serves both novices and experts: experts already know how TP/SL works and a clean interface lets them set up faster for high-frequency use; for novices, the necessary detail isn't removed but tucked into a self-serve info element they can open when they need to understand triggers, scope, or limits.
Before
After
Flow 2
TP/SL Action Button
Aligning intent with the interface
Originally the TP/SL field showed an Add button even after a position already had TP/SL set. That made users think they could "add" another TP/SL order, as if stacking multiple settings on one position. But in CA's logic, TP/SL is a one-time order for the whole position. Once submitted, the next action isn't adding again — it's adjusting the existing setting. So Add created a gap between the interface's meaning and the actual system logic, raising the user's cognitive cost.
After the change, when a position already has TP/SL, the button reads Modify. Seeing Modify, users understand they are adjusting the existing whole-position TP/SL and no longer assume they can stack a new order. The wording now sits closer to the system's actual logic and reduces misreading of what comes next.
Before
After
Final UI Design
Final UI: Manual Close and TP/SL Orders
Building on the competitor-flow breakdown and several rounds of proposal weighing, the best-fit approach for CA was distilled, presenting manual close and take-profit/stop-loss in three sequential flows.
Flow 1
Manual Limit Close inside CA
Flow 1
Manual Market Close inside CA
Flow 2
Manual TP/SL inside CA
Design Impact
Familiar trading logic cut average time across three core tasks by 58%
My validation hypothesis was that if CA kept the trading logic and terminology familiar to traders, users could close positions and set TP/SL directly on the strategy page without switching back to the exchange.
I invited five internal participants with futures-trading experience to a simple usability test. They completed limit close, market close, and TP/SL tasks while I recorded task time, overall usability, and feedback.
−58%
Avg. time on task
Average time across the three core tasks fell from 65 seconds to about 27 seconds.
77.5 / 100
Overall usability score
Participants generally found the new flow easy to understand and consistent with their existing trading habits.
Task time across the three core flows
The original flow required switching to the exchange and finding the position again; the new flow is completed directly from the CA strategy page.
Market, limit, and close flows follow interaction logic common to major exchanges, allowing participants to apply their existing experience directly.
Feedback supporting this insight
“The market and limit controls sit next to the position details, and the flow feels like the exchanges I use. Once I see the price and quantity fields, I know what to enter next without having to relearn the process.”
“I used to switch to the exchange and recheck the trading pair, direction, and position. Now I can find the same position and close it from the strategy page without comparing everything again.”
The difficulty with TP/SL comes from judgment, not finding the entry point
Users must interpret position direction, price relationships, input units, and trigger conditions at the same time, creating noticeably more cognitive load than closing a position.
Feedback supporting this insight
“When setting TP/SL, I go back and forth between position direction, target price, and percentage distance. I also have to work out how Mark Price or Last Price will trigger it, so there is much more to interpret than with closing a position.”
“After I confirm, I want immediate feedback that the conditions were submitted, that the exchange is synced, and exactly where the price will trigger them. Otherwise, I worry that the setup did not take effect.”
Priorities for the next iteration
Connect price and input units
Show the target price, percentage distance, and estimated profit or loss together to reduce manual calculation.
Clarify position direction and trigger conditions
Suggest reasonable TP/SL ranges based on position direction and clearly preview the trigger conditions before submission.
Execution and sync status
Clearly show submitting, success, and failure states, along with whether the exchange position has finished syncing.
Five internal participants with futures-trading experience took part in this simple usability test. The results were used to check the flow and identify next improvements.
Reflections
Designing in Fast-Moving Product Constraints
This internship taught me how to make design decisions in a fast-moving product environment: when there were no extra resources for formal user testing, I validated flows quickly with the internal team and engineers, then balanced exchange interaction patterns with CA's existing design system and technical constraints.
01
Converging Quickly in a Fast-Moving Product Cycle
On a 1-2 week rhythm, I broke fuzzy product needs into discussable flows, wireframes, and prototypes so the team could align faster and keep delivery moving.
02
Using Internal Testing to Keep Validation Moving
Without extra resources for formal user testing, I used internal team members, engineers, and people familiar with the product flow to quickly test interaction logic and catch issues in information hierarchy, flow comprehension, and implementation constraints early.
03
Translating References into a CA-Native Flow
When referencing exchange patterns, the goal was not to copy the interface, but to understand familiar user behaviors and translate them through CA's existing design system, risk-control logic, and platform components into a more consistent and feasible solution.
