Strategy Visualizer
Designed strategy visualizer tool for users to create strategy and visualize it.
Client
Industry
Product Name
TradeVed
Fintech
Strategy Visualizer
About
Strategy
Visualizer
At TradeVed, I designed a Strategy Visualizer — a smart, visual UI tool that helps users see, understand, and refine their trading strategies — all in one place.
With the Strategy Visualizer, users can:
-
View live performance metrics across different timeframes (intraday, daily, monthly)
-
Overlay multiple strategies on the same graph to compare visual results
-
Adjust parameters (indicators, stop-loss, take-profit levels) intuitively with sliders and interactive controls
-
Drill into trade-level details: entry & exit points, profit/loss, drawdowns
-
Export visual snapshots or share strategy reports with teammates
The
Approach
I began by studying the user flow of Strategy Visualizer on Sensibull to understand how traders currently create and test their strategies. I closely analyzed every touchpoint — what opens when a user clicks each button, how the interactions are structured, and where the experience feels complex or disconnected.
This helped me map out the entire journey from strategy creation to visualization and identify areas for simplification and better clarity.
​
Once the flow was clear, I moved to paper-pen sketching, translating insights into rough wireframes. This early stage helped me quickly explore different layout possibilities and define how users would move through the interface before stepping into digital prototyping.
Product Planning with Team
To understand in depth about product and its flow we had a product planning session with the team. Can't share the details due to NDA but here is some visuals of my scribbles and understanding notes.
UI components
Components were created post wireframing. There multiple variations of side nav bar was created based on the requirements we realised later.
User flow
After creating components, user flow was decided. It was very important to clarify all the touchpoints on main screen (Home screen of strategy visualizer), after clearing them it was easy to create the user flows starting from main screen.
User will be able to create new strategy, visualize graph of the strategy they created. They can also change expry dates and other fields affecting the strategy.
UI design
Empty state screen
.png)
Filled state screen
Create New strategy
When user clicks on 'Build a custom strategy, then this side bar opens up user switch between Straddles, Strangles, Strikes, Futures
After clicking on search box, detailed list of stocks will open up.
Stocks name will be changed as per the alphabets typed by user.
.png)
After clicking on CTA 'Done' user can view data in graphs, table of the strategy created
.png)
.png)
User can save strategy, which will be saved globally and user use other tools for the same strategy also.
Design check with Developers
Prepared test cases and collaborated with developers to recheck design implementation. This helped in tracking work progress and we delivered the work within given deadline.
