| Date | June 2026 |
| Type | Mobile App |
| Market | India |
| Submission | Figma Config 2026 |
India's public spaces are dirty not because people don't care but because there's no reason to act. Reporting apps exist but go nowhere. Swachh Bharat created awareness without a feedback loop. The gap is simple: no one is rewarding the person who actually picks up the garbage.
Saaf closes that loop. You clean, you prove it with a before/after photo, AI verifies it, you earn coins redeemable for Swiggy, Zomato, Paytm and Ola. Small action, real reward, immediate.
| App | What it does | Gap |
|---|---|---|
| Swachh City | Government reporting app | No reward loop, no feedback, low engagement |
| Litterati | Global litter logging with community data | No tangible incentive for Indian users |
| Bin It | Points for recycling (bins only) | Narrow scope, not India-native |
The pattern across all three: they solve reporting or data collection, not behaviour change. Saaf is the first to tie physical cleanup to real commerce rewards in an Indian context.
The AI verification step checks that both photos are from the same location, that cleanliness improved meaningfully, and that neither image was manipulated. This is what makes the reward trustworthy and the system hard to game.
| # | Screen | Description |
|---|---|---|
| 1–3 | Onboarding | 3-step value proposition with illustration cards, progress dots, Skip escape route on every screen |
| 4 | Home ★ | Spot cards near user with urgency tags, coin balance widget, bottom nav with + FAB to start a cleanup |
| 5 | Upload Before & After | Sequential upload slots. After slot locked until Before is added. 3-step progress indicator at top |
| 6 | AI Processing ★ | 5 steps animate sequentially location check, cleanliness delta, manipulation check, reward calc. Progress bar fills over 4s and auto-navigates to result |
| 7 | Verified Result | Before → After comparison, AI confidence score, +50 coins credited, Share to WhatsApp / Copy link |
| 8–9 | Rewards & Redeem | Coin balance hero card, Swiggy / Zomato / Paytm / Ola cards, coupon unlock with copyable code |
| 10 | Profile | Avatar, name, city, contact info, cleanup stats, sign out |
★ = key screen
Dark + orange read as fintech or gaming. Civic cleanliness should feel encouraging. Forest green (#2E7D52) on warm off-white (#F5F7F2) signals nature and growth.
Dirty area = warm peach tint. Clean area = mint tint. Neither screams. The distinction is clear without being alarming validated against recycling and fitness app references.
Swiggy, Zomato, Paytm, Ola apps every urban Indian uses daily. Generic points don't motivate. Food and rides do.
All interactive elements meet Apple HIG and Material Design minimum size specs. Spacing follows a consistent 4/8dp rhythm throughout all screens.
| Tool | Role |
|---|---|
| Claude | Strategy, design decisions, documentation |
| Claude MCP | Figma execution tokens, screens, components, prototype connections |
| Figma Make | Interactive prototype generated from static frames in one prompt |
| ChatGPT | UI copy in bulk, illustrations via image generation |
The entire design system was built through Claude's Figma MCP integration without manual Figma work on the core structure.
All intentionally deferred the prototype proves the core behavioural loop first.