Team
Behavioural Design · Game Design · Experience Design
Role
Design engineer
Duration
1 month
Tools & Technologies
Framer
Figma
Custom CSS
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
Everything — brand refinement, copy writing, visual design, Framer build, custom animations, CMS setup, domain connection, and deployment. Solo from brief to live in 5 days.
Key gaps
Site live in 5 days, featured in 3 design newsletters the week 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
A fully animated Framer site — 6 sections, custom scroll interactions, CMS-powered updates section, mobile responsive at every breakpoint, SEO configured, Open Graph previews set, and live on a custom domain.
5 days. One person. No handoff. Just a brief and a deadline.
The site was picked up by 3 design newsletters the week of launch and became one of the references Orion used in their investor deck to show design quality.
What worked
Locking copy and structure before any design — saved at least two rounds of visual rework. Designing directly in Framer — the speed advantage on a 5 day deadline was massive. Keeping animations purposeful and minimal — fast load time and no motion sickness complaints.
What I'd Do Differently
Set up analytics from day one — lost first-day traffic data by adding it after launch. Build a small component library even for a single-page site — some mobile inconsistency crept in. Brief the client on CMS editing before launch — had to do a walkthrough call the day after.
// 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
Aarambh
1 month
2025
In India, there’s always something to celebrate. So why is finding the right setup a hassle? Aarambh makes last-minute celebrations easier, quicker and more accessible.
Service Design · UI/UX · Interaction Design
Frontend + designer