Team
Service Design · UI/UX · Interaction Design
Role
Frontend + designer
Duration
1 month
Tools & Technologies
Next.js
React
Framer
WHERE IT ALL BEGAN
Mumbai’s monsoons are familiar — waterlogged streets, overflowing drains and infrastructure struggling to keep up. But when something goes wrong beneath the surface, we often notice it only once the problem has already reached the street.
And that’s where I started looking closer.
Mumbai’s identified flooding spots have grown more than twelvefold since 2014.
Reporting of infrastructure problems still relies heavily on people noticing and flagging them before action can begin.
Mapping the system
Mumbai’s monsoons are familiar — waterlogged streets, overflowing drains and infrastructure struggling to keep up. But when something goes wrong beneath the surface, we often notice it only once the problem has already reached the street.
And that’s where I started looking closer.
Breaking down the process — tracing where the system falls short.
Field Study
I led the full redesign — user research, information architecture, visual design, and frontend implementation in Next.js. Worked directly with the CTO and two engineers throughout.
Key gaps
User drop-off reduced from 60% to 22% within 6 weeks of launch
Before inspection, there is limited visibility into what is happening underground.
Workers may enter sewerage systems without knowing the conditions they will encounter inside.
Findings and progress rely heavily on manual communication with BMC.
With fragmented updates and paperwork, progress and accountability are difficult to track.
Problem Statement
Introducing DrainGuard
From a reactive system to a connected one.
DrainGuard is a connected sewage monitoring system that enables earlier issue detection, safer field inspections, and smoother communication between workers, supervisors, and BMC.
What shipped
What shipped was a completely rebuilt dashboard — cleaner information hierarchy, 40% fewer clicks to reach core actions, and a consistent component system the engineering team now builds on top of.
The thing that surprised the team most was how fast adoption happened — because we shipped incrementally, there was no big scary cutover.
The feature flag approach meant users were already familiar with most of the new UI before the full switch. Drop-off at the core workflow screen went from 60% to 22% within 6 weeks of launch.
What worked
Shipping with feature flags — measuring impact at each step gave the whole team confidence. Starting with IA before visuals — solving structure first made every design decision faster and cheaper. Pairing with an engineer from day one — nothing got lost between design and build.
What I'd Do Differently
Run usability tests during the process not just at the end — caught some issues later than I should have. Document design decisions more thoroughly for whoever maintains it after me. Push for a design system conversation earlier — some inconsistency still remains.
// Other works
Have a look at my other work
Drain Guard
1 month
2026
Ever wondered what if India’s sewage system could be smart? To tackle monsoon-related drainage hazards, designed a connected solution combining IoT, physical product design and digital interfaces.
Nandini Inani ( thats me ;) ) Fariya Hasan . Deshna Deora
Research · UX/UI · System Design
The Office Hours
1 month
2025
What happens when “I’ll do it later” becomes a habit? Designed a board game for ages 7–15 that explores procrastination through playful choices and consequences.
Behavioural Design · Game Design · Experience Design
Design engineer