DESIGN CASE STUDY
Trading made faster on Groww 🏎
Team: F&O Experience Pod
Role: Product Designer (end-to-end design)
Timeline: 4 weeks from conceptualization to shipping
Impact: Order placement time reduced from 2400ms to 1350ms (45% decrease)
Speed perception is about how fast users feel the app experience is. In trading, experience must be fast, as prices change every millisecond.
I gained valuable knowledge about interaction design and prototyping through this project.
How it started
We trade in the office every Thursday from 9:15 am to 11:00 am. During one session, there was a sudden positive market movement.
Several team members tried to place orders, and I noticed the sheer number of steps involved. If the order placement time is reduced, traders can secure better prices and increase profits.
Reviewing NPS comments, we found that Groww is perceived as slower compared to other apps.
Slowness causes frustation
Reviewing NPS comments, we found that Groww is perceived as slower compared to other apps.
Imagine your positions are in losses, and you want to exit quickly. You open the order card and start placing exit orders.
By the time you place multiple orders, the market moves further against you, increasing your losses. This will be frustrating, you incurred more losses.
01 - Problem
Too many clicks!
Order placement involves numerous steps: placing, modifying, and navigating. Each order shows a success screen, which becomes redundant after 5-6 orders (our users average 22 orders daily).
02 - Problem
We show loaders on every action user takes
Our order placement time averaged 2400ms, while competitors achieved 700-900ms.
We wait for page status before advancing users to the next step, forcing them to see loading screens at each stage.
03 - Problem
Finally, we need to fix broken transitions.
Overlapping transitions caused jerkiness and additional lag during order placement.
Since users repeat these flows 15-20 times daily, it significantly increased their cognitive load.
Reduce latency in orders
Reduce number of steps
Make trading faster on Groww 🏁
Solve navigation for a trader
Fix transitions to reduce jerks
01 - Step
Focus on order placing (V1)
We prioritized optimizing the core order placement flow, as users frequently execute this time-sensitive step.
While navigation and redundant steps also affect speed, our primary focus is on position entry and exit efficiency.
02 - Step
Remove success screen
While success screens benefit first-time users, they're redundant for regular traders. In F&O trading, time is crucial, and eliminating this screen saves 1200ms of rendering and status update time.
However, we must address that 4% of F&O orders fail and 0.5% can remain pending.
03 - Step - Solutions
Create speed perception
Users need instant feedback on their actions. Rather than making them wait with loaders, we now advance users in the flow immediately after action, then load status updates.
We've implemented:
Skeleton loaders
Progressive loading with data caching
Haptic feedback Our current p95 from buy click to order execution is 1350ms, which we must factor into the experience.
Peek into other explorations
Opening the order card
Currently, when users close bottom sheets, the scrim is removed before proceeding to their chosen action. Each transition adds delay.
Since most users open bottom drawers to place orders, we're scaling it to the order card itself, eliminating three steps.
Giving feedback
Post-order flow:
Market orders → Positions tab
Limit orders → Orders tab
Bottom-aligned snackbar confirms the last action
Snackbar dismisses via fling or auto-dismisses after 4 seconds
Easy access to order details if failures occur
Order is stuck in pending state
Order failed
Handling stacking
Early market hours present a unique challenge: users place multiple AMOs at 8:30 AM that execute together when markets open at 9:15 AM.
Instead of following Material UI's sequential snackbar display, we modified transitions to show multiple order executions simultaneously, eliminating unnecessary delays.
Use cases & configurations
Since this was a new addition to our design system, I documented its anatomy and guidelines thoroughly.
While perfect for confirming quick actions like price alerts and watchlist updates, we kept it strictly utility-focused - no promotions or cross-selling allowed.
Dark mode
Alerts (Future use case)
Fling to dismiss + Auto dismiss (4 sec)
Transitions
In designing our transition system, we paid careful attention to movement details. Objects entering the screen use cubic ease-out transitions - appearing quickly, then gracefully slowing down.
For exits, we chose cubic ease-in transitions for swift departures. Color and opacity changes remain linear and quick (100ms), while snackbars get 200ms and screen transitions take 300ms to feel natural.
Basket Order & Multi orders
We also thought ahead to Groww's power users, particularly option sellers and strategy traders who use basket orders to place up to 20 trades simultaneously.
While bulk order development is scheduled for later, we designed our framework to be future-ready.
This foresight helped our developers build a scalable architecture from the start.
Current experience of Basket Order on Groww
Basket order
The beauty of our solution? Whether it's one order or twenty, they're processed in parallel - keeping execution time consistent.
We've mapped out all scenarios: partial fills, failed orders, and mixed outcomes.
Failed orders get special attention, as traders need quick visibility into what went wrong so they can act fast.
Scaling the new framework to Basket orders and multi-order exp
Some orders are still open
Some orders failed
Some orders failed, some are open some executed
Results 💪
Streamlining the trading flow from 12 steps to just 6, we dramatically improved speed. Orders that once took 2400ms now execute in just 1350ms - giving traders the 45% speed boost.
Experience before
3 clicks → 12 transitions (2500ms)
⚡️ Experience now ⚡️
2 clicks → 6 transitions (1350ms)
Fin ✌️