2024-25
Desgining Groww's native chart trading experience
Till 2024, Groww relied on a third-party library, TradingView, like most finance apps in India and globally. I led one of the team's most ambitious initiatives: designing and building our own charts from the ground up to create a fully native, end-to-end trading experience.
MY ROLE
End-to-end owner of the entire design for Groww charts and trading experience built for it.
OUTCOME
75% active chart users now use Groww Charts over TradingView.
Contributes to 21% total F&O orders vs 7% from TradingView
TEAM
Vanchit (PM)
🏃 TL:DR;
CONTEXT
Importance of charts in a trader's life
Around 90% trading revolves around charts
They guide speculation, predictions, entries, exits, pretty much every decision a trader makes.
Like most trading apps, we used third-party charts
Globally, around 95% of finance apps use third-party charting libraries for technical charts since they're complex to build. In India too, trading most apps like Zerodha, Angel One rely on TradingView.
TradingView library, no control over UI
Groww interface
Third-party charts on Groww in '24
PROBLEM
Third-party charts slowed our traders
By 2024, one of the most common comments we saw from traders on social media was, ‘Groww is not for pros.’ The biggest driver behind this? A slow experience during critical trading moments and charts were at the centre of it:
Switching between charts was a hassle
"When market is live, I want to switch between indices to check movements, can’t do that easily" - Manish 32 M, full-time trader
5 steps to go from NIFTY to BANKNIFTY chart
Ordering took 5 steps, where every second counts
In F&O trading, the price might fluctuate by 50 - 200 every second. For pro traders trading in large quantities, this means opportunity lost worth lakhs.
5 steps to place an order
They were cluttered with tools which our traders barely used
90% of our traders used around 2-8 indicators and 1-5 drawing tools. They had to navigate through 100s of tools for these.
trading view's tool selection menu
95% of traders
50
5
0
no. of indicators used
95% of traders
50
8
0
no. of drawings used
SOLUTION
So we took a shot at building a native chart-based trading system
Taking this on meant competing with an industry benchmark like TradingView. But it also opened the door for us to build something with its own identity in the market
🏃 Full native control brings rewards—but it means competing with a tool traders already know and trust.
kicking-off by benchmarking trading apps
LAYER I
Designing core elements of the chart
For the first month, I focused on studying the root structures of charting libraries, dissecting atoms and building distinctions both functionally and visually
LAYER I
Candles, grid, chart area
LAYER II
Tools specific to chart
LAYER III
Trading tools
This involved numerous iterations of information architecture. Once that was locked in, I started defining UI elements for a rough V0 build.
Layer I design elements
Key distinctions that stood out
Once we had a V0 build, we tested with a small group of traders to get early feedback. These are the interactions which stood out the most:
When scrolled, an arrow button points to the latest candles & takes you back. Traders loved that they got an easy reference of where they are.
Decimals added dynamically on zoom, which keeps scale clean 90% of the time. Helped reduce clutter and use that area for action-items
groww charts
Three-way zoom gestures, just like google maps. Trading view restricts between two gestures at a time.
Clearer date indication - A small change, but great response during testing, since it makes reading chart a breeze.
LAYER II
Designing tools for the chart
While studying charting tools, I realised traders don’t keep changing what they use — they rely on a small, consistent set. So I optimised the tool design to make those favourites easy to access.
Quick access panel for tools
The top bar houses the charting tools: indicators, drawings, and time periods. Opening any of these brings up a quick-access tray showing your favourite tools for faster access.
Only most used tools outside, rest inside
With 100+ tools in each category, you explore and choose your favourites from the full list. After that, everything you need stays in the quick-access tray.
The demo below shows the drawing tools, their variations, and their interaction states. Drawing works as a mode, similar to how it functions in tools like Procreate or Photoshop.
The demo below shows indicators, tools which overlay additional data in graphical format over charts to analyse deeper. Each indicator has a setting icon to modify parameters.
LAYER III
Trading experience on charts
With the core chart design in place, the next step was the hardest, improving the trading experience itself. This came down to two things: navigation and ordering.
Switch charts instantly
Traders’ biggest hurdle was switching charts, especially F&O traders who moved across the top five indices that carry 98% of orders. I introduced a chart switcher attached to the title to make this easier.
Quick order without losing context of charts
This was the most important step and the pivot of the project, reducing the steps needed to place an order. I designed a compact order card, which let scalpers place orders instantly without losing access to chart. Once placed, P&L is visible directly on chart
Open chain
Select contract
Buy/Sell
Place order
Success screen
->
->
->
->
5 steps → 1 step
Traders hated losing the chart view when placing an order. To solve this, I put contract selection in the price bar and added a minimal order screen with the key options at the bottom.
Old flow
New flow
😮💨
Nailing this took most amount of iterations
Drag to place stoploss and target
Traders use stop-loss and target automations to define risk and profit upfront and step away from live charts. Previously, this meant placing multiple orders manually. I reduced this friction by introducing a drag interaction to place them directly on chart, anchored to visible P&L.
Testing & rollout
We conducted heavy testing sessions, in office, online and in a special user-testing centre at Bengaluru.
💡 The challenge was creating a live trading prototype
Feedback → Tweaking → Finalising
We did thorough testing for all functionalities with our research expert and analysed each and every tiny aspect, honed it till most critical usability issues were resolved.
few snippets from the usability research conducted
Rollout in 2025 & stats till now
Groww charts offered P90 load time of 700ms from 2s of trading view. Users noticed faster opening.
75% of daily chart users use Groww Charts over Trading View
21% of total F&O orders are from Groww Charts compared to 7% from Trading View
Reach out for more details
