Engineering case study
Modernizing Snapdeal's Web Platform for Performance and Scale
Led frontend modernization of Snapdeal’s customer web experience: redesign, React SPA architecture, and performance work that brought load time under 2 seconds while keeping shopping journeys shipping.
Lead UI Engineer work—redesign, React SPA migration, and performance engineering for one of India’s largest e-commerce storefronts, including m.snapdeal.com.
“At e-commerce scale, a beautiful page that stutters on scroll still feels broken—UI and performance are the same product.”
Why the business funded this
E-commerce success depended on conversion, page speed, and retention. Legacy architecture slowed feature delivery and created inconsistent experiences across a large catalog and high-traffic shopping journeys—making modernization essential.
My role
Lead UI Engineer
Team
Frontend team lead — hiring and mentoring UI engineers
Duration
July 2014 – May 2017
Responsible for
- Architecture
- Frontend modernization
- Performance & jank
- Hiring
- Mentoring
- Product & Design collaboration
- Release quality for shopping journeys
< 2s
Load time
Continuous releases
Delivery
Zero freeze
Rollout
React SPA
Architecture
Jank fixes
Craft
m.snapdeal.com
Surface
Engineering timeline
- Legacy storefront constraints
- UI redesign with Product & Design
- React SPA architecture
- Journey migration
- Performance & jank bar
- Load time under 2s
Company
Snapdeal
Surface
m.snapdeal.com
Focus
UI · SPA · Performance
Scale context
High-traffic e-commerce
Business
Business impact
- Faster first load and smoother browsing on high-traffic shopping journeys
- More consistent customer experience across redesigned surfaces
- Faster UI feature delivery after React SPA foundations landed
- Stronger frontend standards through hiring and mentoring
Why performance was the product
E-commerce success depended on conversion rate, page speed, and customer retention. The existing architecture slowed feature delivery and created inconsistent experiences—making modernization essential.
Shoppers don’t separate design from jank. I spent deep time on both first load and runtime smoothness: profiling long tasks, fixing scroll/tap stalls, and making React replace legacy pages without trading one kind of slow for another.
Business context
Snapdeal’s desktop and mobile web (m.snapdeal.com) served high-traffic shopping across a large catalog—browse, search, product, and checkout journeys where peak traffic and concurrency made every millisecond count.
Legacy JavaScript couldn’t support redesign velocity or a reliable performance bar. We needed a modern UI foundation without freezing weekly delivery.
Delivery
Constraints
- Cannot break checkout
- Must protect conversion on live traffic
- Need ongoing feature releases during migration
- Support real devices under catalog weight
- No “polish later” for load time or jank
- Partner with Product & Design on schedule
Leadership
Cross-functional collaboration
Modernization only worked if Product, Design, QA, and Engineering stayed aligned on live shopping journeys.
- Worked with Product to prioritize high-traffic customer journeys
- Partnered with Design to standardize UI patterns during redesign
- Coordinated releases with QA to minimize regression risk
- Balanced modernization with ongoing feature commitments
Judgment
Engineering principles applied
- Incremental delivery over big-bang rewrites
- Performance budgets enforced from the beginning
- Shared SPA patterns before migrating every surface
- Measure (load + jank) before calling UI done
- Backward compatibility and checkout safety over architectural purity
Engineering goals
- Ship a redesigned UI that scaled with catalog and traffic
- Replace legacy JS with a maintainable React SPA
- Load time under 2 seconds on major journeys
- Eliminate UI jank on real devices
- Grow a frontend team that could own quality long-term
Architecture
Browser → React SPA → API, with catalog, search, and checkout journeys sharing one performance bar—including mobile web at m.snapdeal.com.
Legacy pages were replaced journey by journey. Shared SPA patterns plus performance budgets kept high-traffic shopping fast under real catalog weight.
- Browser
- React SPA
- API
- Catalog
- Search
- Checkout
Craft
Performance engineering
Performance was its own craft stream—not a cleanup ticket after redesign.
Critical-path load
Assets and render path trimmed until load time was under 2 seconds.
Code splitting
SPA routes loaded what journeys needed—not the whole storefront upfront.
Lazy loading
Deferred non-critical work so first paint and interaction stayed healthy.
Rendering & long tasks
Profiled main-thread work that caused scroll/tap jank on real devices.
Caching discipline
Kept repeat visits and navigations fast without stale shopping bugs.
Monitoring in production
Watched live traffic so performance regressions couldn’t hide behind “it works on my laptop.”
Migration
Migration phases
Phase 1
Legacy UI
High-traffic storefront constraints mapped.
Phase 2
Shared SPA foundations
React patterns and UI systems established.
Phase 3
Pilot journeys
Prove redesign + performance bar on thin slices.
Phase 4
Core journeys
Browse, search, and product flows migrated.
Phase 5
Checkout-sensitive paths
Highest-care cutovers with conversion protection.
Phase 6
Legacy removal
Retire old JS once React journeys were stable.
Engineering
Key results
A typical journey migration
Redesign → React SPA → profile jank on real devices → prove load time < 2s → roll out.
- Map legacy flow, assets, and known jank
- Redesign with Product & Design
- Implement React SPA route(s)
- Fix UI jank on real devicesScroll, tap, long tasks
- Hit load-time bar (< 2s)
- Roll out on live traffic
Judgment
What didn't work
Treating performance as a late polish pass
Problem
Redesigned screens that still stuttered or loaded slowly would fail conversion in production.
Decision
Made load time and jank a shipping bar before calling UI done.
Moved to
Journey migration with explicit performance budgets and real-device profiling.
Why not a cosmetic UI refresh?
A skin on legacy JavaScript wouldn’t unlock redesign velocity, sub-2s loads, or jank-free feel. UI craft and architecture had to move together.
Key engineering decisions
Redesign and redevelop together
Problem
Visual redesign on legacy JS would keep the same performance and maintainability ceiling.
Options
Theme refresh only
Pros
- Faster short-term visuals
Cons
- Same jank and delivery limits
Rejected because: Wouldn’t unlock velocity or sub-2s performance.
Redesign + React redevelopment· Chosen
Pros
- Modern UI on a modern foundation
- Hiring and standards path
Cons
- Higher upfront investment
Chosen because: Lasting velocity and a real performance bar.
Decision
UI and architecture had to move together—or every new screen would inherit the same slow foundation.
Trade-offs
More upfront work than a theme refresh; lasting delivery speed.
Result
Redesigned journeys shipped on React SPA with a performance bar.
React SPA for major journeys
Problem
Customer journeys needed shared UI patterns and predictable navigation at e-commerce scale.
Options
Big-bang SPA rewrite
Pros
- Clean end state
Cons
- Breaks checkout risk
- Blocks weekly releases
Rejected because: Too much blast radius on live shopping traffic.
Journey-by-journey SPA· Chosen
Pros
- Lower blast radius
- Continuous delivery
Cons
- Temporary dual patterns
Chosen because: Could keep shipping while earning SPA complexity.
Decision
SPA complexity had to be earned journey by journey—not applied blindly.
Trade-offs
Temporary coexistence during migration.
Result
Major journeys moved to React without freezing the roadmap.
Load time and jank as one bar
Problem
A page under 2s that stutters on scroll still feels slow to shoppers.
Why
UI performance meant first load and runtime smoothness—especially under catalog weight and peak traffic.
Pros
- Faster first experience
- Smoother browse/search/product flows
- Forced critical-path discipline
Trade-offs
Some features waited until the performance bar was healthy.
Result
Performance became part of the product story, not an afterthought.
Challenges I had to solve
Challenge
Legacy JS couldn’t support redesign or reliable UI performance at Snapdeal traffic—including peak shopping concurrency.
Solution
React SPA migration across major journeys, with performance as a release constraint.
Result
Redesigned UI on a maintainable frontend foundation.
Challenge
Janky scroll, delayed taps, and long tasks make redesign feel unfinished—especially on mobile web.
Solution
Hands-on profiling and jank fixes plus critical-path work to under 2 seconds.
Result
Load and runtime performance shipped together.
Challenge
Large customer features needed Design, Product, and Engineering in sync without breaking checkout.
Solution
Close Product/Design partnership plus hiring/mentoring on UI and performance standards.
Result
Delivery stayed on schedule while quality rose.
Delivery
Risk mitigation
| Risk | Mitigation |
|---|---|
| Broken checkout | Journey-by-journey rollout |
| Conversion regression | Load + jank shipping bar |
| Slow first paint | Critical-path optimization |
| Scroll/tap jank | Real-device profiling |
| Big-bang rewrite risk | Incremental SPA migration |
Checkout safety
Migrated journeys carefully—checkout could not break mid-modernization.
Performance budgets
Under-2s load and jank-free interaction were release gates.
Live traffic validation
Monitored real shopping traffic after cutovers—not only lab checks.
Incremental delivery
Weekly feature work continued while SPA surfaces replaced legacy pages.
Outcomes
Outcomes
Business outcomes
Customer experience
Faster, smoother browsing on high-traffic surfaces
Delivery
Redesign without freezing feature releases
Live surface
m.snapdeal.com and broader web platform
Engineering outcomes
Architecture
Legacy JavaScript → React SPA on major journeys
Performance
Load time under 2 seconds + jank fixes
Craft
Critical path, splitting, profiling, monitoring
Team outcomes
Standards
UI and performance bar for frontend engineers
Hiring & mentoring
Grew capacity to own quality without heroics
Collaboration
Product + Design partnership on large features
Transformation
What changed
| Before | After |
|---|---|
| Legacy JavaScript storefront | React SPA journeys |
| Inconsistent UI patterns | Shared SPA UI systems |
| Slow / janky interactions | Load < 2s + smoother UI |
| Hard redesign velocity | Faster feature delivery on React |
| Performance as afterthought | Performance as shipping bar |
Leadership lessons
Snapdeal taught Lead-level lessons that still shape how I ship customer UI.
- UI and performance are the same problem at e-commerce scale.
- Jank is a product bug—shoppers don’t forgive stuttering scroll.
- SPA migrations succeed when you ship journeys, not announcements.
- A load-time bar forces better design and engineering earlier.
- Frontend standards stick when you hire and mentor for them.
What I'd do differently
- Instrument performance budgets into design review even earlier.
- Define shared UI primitives before more redesign screens landed.
- Automate regression for critical shopping paths sooner.
What I carried forward
What I still carry from Snapdeal into later leadership work:
- Treat UI quality and jank as product bugs, not polish
- Measure load and runtime smoothness before calling UI done
- Migrate high-traffic systems incrementally
- Hire and mentor for frontend excellence
- Partner with Design early so performance shapes the interface
Biggest takeaway
The hardest UI work isn’t making screens look right—
it’s making them feel instant for shoppers on the architecture you can keep shipping on.
Key takeaways
- Lead UI work at Snapdeal was redesign + architecture + performance craft—not a framework checkbox.
- We optimized for conversion-sensitive journeys: checkout safety, load time, and jank.
- That foundation prepared the career step into larger platform and org leadership later.
Final reflection
Looking back, Snapdeal succeeded as a Lead UI Engineer story: hands-on modernization at e-commerce scale—architecture, performance, and team standards—without pretending it was a Director-org transformation. The craft depth here is what made later platform leadership credible.
← All projects