Spot Grid Trade
Spot Grid Trading allows users to automate trading strategies by placing multiple buy and sell orders within a predefined price range. As the market price fluctuates between these levels, the system automatically executes trades to capture profit from volatility.
At Bitkub, I worked on designing the Spot Grid Trading experience, including the strategy configuration flow, validation logic, and monitoring dashboard.
Product Overview
UX/UI design, interaction design, system logic mapping, edge case validation.
Responsibilities
Platform
Web Trading Platform
The Challenge
Grid trading is a powerful automated trading strategy that allows users to place multiple buy and sell orders within a defined price range. However, configuring a grid trading bot requires users to define several interdependent parameters, including lower price, upper price, grid quantity, and investment amount.
Incorrect parameter combinations can produce strategies that fail to execute or behave unpredictably. For example, a price range that is too narrow relative to the grid quantity may create unrealistic order spacing, while insufficient investment can prevent the system from generating valid grid orders.
The challenge was to design a configuration experience that simplifies these complex parameters while ensuring users cannot create invalid trading strategies.
Problem Statement
Prevent Invalid Strategies: Ensure users cannot create grid configurations that the trading engine cannot execute.
Simplify Complex Parameters: Break down the configuration process into clear inputs that reduce cognitive load.
Increase Strategy Transparency: Help users understand how their automated strategy distributes orders across the grid.
Support Both Beginner and Advanced Traders: Allow simple configurations while still supporting advanced parameters such as entry price and trigger price.
Design Goals
Defining System Logic & Edge Cases
Before designing the UI, I worked closely with the product manager to understand the technical constraints and rules of the grid trading engine.
Because grid trading parameters depend heavily on each other, I mapped the full set of edge cases and validation scenarios to ensure the interface accurately reflects system behavior.
Examples of scenarios I needed to handle included:
Lower price greater than upper price
Price range too narrow for the selected grid quantity
Insufficient investment amount for the generated grid orders
Entry price outside the configured price range
Trigger price already passed by the current market price
Mapping these scenarios allowed me to define clear validation rules and error states before designing the final interface.
The Design
The configuration interface allows users to define their grid trading strategy through structured inputs including:
Price range
Grid quantity
Investment allocation
Optional advanced parameters
Real-time validation ensures users immediately understand when their configuration becomes invalid.
Strategy Configuration
Once activated, users can monitor the performance of their trading bot through a dashboard that shows:
Total profit
Grid profit vs floating profit
PnL trend
Strategy runtime
Current holdings
This allows traders to evaluate how their automated strategy performs over time.
Strategy Monitoring Dashboard
The interface also visualizes how buy and sell orders are distributed across the configured grid.
This helps users clearly see:
Buy orders placed below market price
Sell orders placed above market price
Percentage differences between grid levels
Providing this visualization improves user understanding of how the automated strategy operates.
Order Distribution Visualization
The Impact
The structured configuration interface breaks down complex parameters such as price range, grid quantity, and investment allocation into clear inputs, allowing traders to configure automated strategies without needing to manually calculate order distribution.
Simplified Automated Trading
Real-time validation prevents users from creating invalid strategies by checking parameter relationships such as price hierarchy, grid spacing, and minimum investment requirements before a strategy can be activated.
Reduced Configuration Errors
Improved Strategy Transparency
The strategy dashboard and grid visualization allow users to clearly see how buy and sell orders are distributed across the grid, helping traders better understand how their automated strategy interacts with market price movements.
By simplifying the configuration process and providing clear feedback, the feature lowers the barrier for users who want to experiment with automated trading strategies without deep technical knowledge of algorithmic trading systems.
Accessible Algorithmic Trading