Category
Category
UI/UX Design, Mobile App
UI/UX Design, Mobile App
Responsibility
Responsibility
UI/UX, Flow Design, Prototyping
UI/UX, Flow Design, Prototyping
Tools
Tools
Figma, FigJam, Notion
Figma, FigJam, Notion
TradeFlow Mobile App
TradeFlow Mobile App
TradeFlow Mobile App
TradeFlow is a fictional retail trading platform that helps beginner to intermediate traders discover assets,
understand market movements, execute trades, and monitor portfolio. This case study focuses on one core journey: how a user moves from simply browsing the market to actually pressing buy.
TradeFlow is a fictional retail trading platform that helps beginner to intermediate traders discover assets,
understand market movements, execute trades, and monitor portfolio. This case study focuses on one core journey: how a user moves from simply browsing the market to actually pressing buy.
Problem insights
Problem insights
Problem insights
Trading apps often present a large amount of financial information at once, which can make users feel overwhelmed, especially when making a decision to buy or sell. The main challenges were:
• Simplifying market information without removing important data.
• Helping users understand the impact of a trade before placing an order.
• Making the Buy/Sell process feel clear and controlled.
• Providing clear feedback throughout the order execution process.
Trading apps often present a large amount of financial information at once, which can make users feel overwhelmed, especially when making a decision to buy or sell. The main challenges were:
• Simplifying market information without removing important data.
• Helping users understand the impact of a trade before placing an order.
• Making the Buy/Sell process feel clear and controlled.
• Providing clear feedback throughout the order execution process.
Key features
Key features
Market discovery
Market discovery
The Markets screen is designed for quick scanning and comparison, using search, category tabs, trending assets, most active assets, and filters. The goal is to help users quickly find relevant assets without overwhelming them with unnecessary information.
The Markets screen is designed for quick scanning and comparison, using search, category tabs, trending assets, most active assets, and filters. The goal is to help users quickly find relevant assets without overwhelming them with unnecessary information.
Asset details
Asset details
Information is structured progressively:
Price → Chart → Key Statistics → Detailed Information
Buy and Sell actions remain easily accessible so users can move from analysis to execution without unnecessary navigation.
Information is structured progressively:
Price → Chart → Key Statistics → Detailed Information
Buy and Sell actions remain easily accessible so users can move from analysis to execution without unnecessary navigation.
Buy and sell
Buy and sell
The Order Builder simplifies the trading process by organizing key inputs such as:
• Order type
• Amount / quantity
• Price
• Leverage
• Stop Loss / Take Profit
• Estimated investment
Advanced options are kept optional so beginners are not overwhelmed while experienced users can still access the controls they need.
The Order Builder simplifies the trading process by organizing key inputs such as:
• Order type
• Amount / quantity
• Price
• Leverage
• Stop Loss / Take Profit
• Estimated investment
Advanced options are kept optional so beginners are not overwhelmed while experienced users can still access the controls they need.
Order review
Order review
Before confirming a trade, users can review:
• Order type
• Amount
• Price
• Total investment
• Trading fee
• Stop Loss / Take Profit
• Portfolio Impact
Portfolio Impact provides additional context by showing how the trade may affect the user's overall portfolio allocation.
Before confirming a trade, users can review:
• Order type
• Amount
• Price
• Total investment
• Trading fee
• Stop Loss / Take Profit
• Portfolio Impact
Portfolio Impact provides additional context by showing how the trade may affect the user's overall portfolio allocation.
Order processing
Order processing
After confirming an order, the experience provides clear feedback through:
Processing → Order Submitted → Order Success
This helps reduce uncertainty and prevents users from repeatedly tapping the confirmation button while the order is being processed.
After confirming an order, the experience provides clear feedback through:
Processing → Order Submitted → Order Success
This helps reduce uncertainty and prevents users from repeatedly tapping the confirmation button while the order is being processed.
Design principles
Design principles
Design principles
TradeFlow uses progressive disclosure to keep the interface simple while still providing advanced information and controls when users need them. The final experience connects market discovery, decision making, and trade execution into one consistent trading journey.
TradeFlow uses progressive disclosure to keep the interface simple while still providing advanced information and controls when users need them. The final experience connects market discovery, decision making, and trade execution into one consistent trading journey.
Project impact
Project impact
Project impact
• A clearer trading journey that connected the experience from market discovery → asset analysis → order execution → portfolio monitoring, reducing unnecessary context switching.
• Reduced cognitive load by using progressive disclosure to prioritize essential information while keeping advanced trading controls available when needed.
• Better transaction transparency by creating clear Processing, Submitted, and Success states so users always understand what is happening after placing an order.
• Scalable product foundation and stablished reusable patterns for Markets, Watchlist, Asset Detail, Buy/Sell, Order Review, Portfolio, Deposit, and Transaction flows, creating a foundation that can be extended into a larger trading product.
• A clearer trading journey that connected the experience from market discovery → asset analysis → order execution → portfolio monitoring, reducing unnecessary context switching.
• Reduced cognitive load by using progressive disclosure to prioritize essential information while keeping advanced trading controls available when needed.
• Better transaction transparency by creating clear Processing, Submitted, and Success states so users always understand what is happening after placing an order.
• Scalable product foundation and stablished reusable patterns for Markets, Watchlist, Asset Detail, Buy/Sell, Order Review, Portfolio, Deposit, and Transaction flows, creating a foundation that can be extended into a larger trading product.