2.2.4 India First Localization
This skill defines the technical and UX standards for building applications optimized for the Indian market — the world's largest smartphone user base with unique connectivity, language, payment, and cultural considerations.
1. Multi-Language Architecture
Goal: Full Hindi and regional language support without code duplication.
- i18n File Structure: Create locale JSON files per language:
locales/en.json, locales/hi.json, locales/mr.json, etc. Keys are semantic identifiers ("game.start", "nav.home"), values are translated strings.
- Runtime Switching: Implement language toggling via UI buttons (not a buried settings menu). Store the preference in
localStorage as lang. Apply immediately without page reload by re-rendering string-dependent components.
- Font Support: Load Noto Sans Devanagari (or equivalent) for Hindi/Marathi/Sanskrit scripts. Use
unicode-range in @font-face to avoid loading Devanagari glyphs for English-only users.
- Text Expansion: Hindi text is typically 20–40% longer than English equivalents. Design UI with flexible containers. Never use fixed-width text elements. Test all layouts in Hindi before shipping.
- Pluralization & Gender: Hindi has different plural forms and gendered nouns. Use ICU MessageFormat or a library like
intl-messageformat for proper pluralization and gender agreement.
2. Low-Bandwidth & Offline Optimization
Goal: Full functionality on 2G/3G connections and in spotty coverage areas.
- Bundle Size Budget: Target < 200KB initial JS bundle (gzipped). Use code-splitting with dynamic
import() for non-critical features. Lazy-load images and heavy components.
- Image Strategy: Use WebP format with aggressive compression (quality 60–70). Serve responsive images via
srcset with appropriate sizes for mobile screens (rarely > 400px width). Implement blur-up placeholders.
- API Responses: Minimize JSON payload sizes. Use field masks / selection (Firestore's
select()) to fetch only required fields. Paginate all list endpoints.
- Offline Core: The app's primary utility must work fully offline (Skill 05). Cache critical data in IndexedDB on first load. Show meaningful content even with no network.
- Network Detection: Use
navigator.connection.effectiveType to detect 2g/3g and adapt: disable auto-play media, reduce image quality, defer non-essential network requests.
3. UPI & Indian Payment Flows
Goal: Support India's dominant payment infrastructure.
- UPI Deep Links: For simple payments, generate UPI intent URLs:
upi://pay?pa=<vpa>&pn=<name>&am=<amount>&cu=INR&tn=<note>. Open via window.location.href or an <a> tag on mobile.
- QR Code Generation: Use a client-side library (e.g.,
qrcode.js) to render UPI payment QR codes dynamically. Encode the same UPI URL into the QR payload.
- Payment Verification: UPI payments are asynchronous. Implement a server-side webhook or polling mechanism to verify payment status via the payment gateway's API. Never trust client-side payment confirmation.
- Razorpay/Cashfree Integration: For subscription or recurring payments, integrate with a local payment gateway. Both support UPI, cards, wallets, and net banking with battle-tested SDKs.
- ₹ Formatting: Always display currency in Indian format:
₹1,00,000 (lakh grouping), not ₹100,000. Use Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).
4. Regional Content Patterns
Goal: Design content and interactions that resonate with Indian users.
- Visual Language: Use culturally relevant iconography and illustrations. Avoid Western-centric metaphors (mailbox for email, etc.). Prefer universally understood symbols or India-specific visuals.
- Festivals & Seasons: Implement seasonal theming (Diwali, Holi, Navratri, Eid) with dynamic CSS theme overrides. Schedule theme changes via date-based logic. This drives engagement and sharing.
- Local Units: Support local measurement units where relevant (bigha, guntha for land; quintal for weight). Provide conversion between local and metric.
- WhatsApp as Primary Share Channel: In India, WhatsApp is the dominant sharing platform. Prioritize WhatsApp share buttons. Format shared content for WhatsApp's text+image preview (message + URL with OG tags).
- Voice & Vernacular Input: Consider voice input support for Hindi and regional languages using Web Speech API. Many Tier 2/3 users prefer voice over typing.
5. Tier 2/3 City User Behavior
Goal: Design for the next billion users, not Silicon Valley power users.
- Affordability Sensitivity: Price points must be India-appropriate. ₹49–99/month is the sweet spot for subscriptions. Offer weekly plans. Free tiers must be generous.
- Storage Constraints: Users frequently clear app data to free space. Persist critical user data in the cloud (not just locally). Implement seamless data restoration on re-install via anonymous auth → account linking.
- Screen Size: Design for 5"–6.5" screens. Touch targets minimum 48px. Avoid dense information layouts. Use bottom navigation (reachable with one thumb).
- Digital Literacy: Don't assume familiarity with common UI patterns (hamburger menus, swipe gestures). Use explicit labels, onboarding tooltips, and visual cues. Prefer button-based language selection over dropdown menus.
- Data Saver Mode: Detect Android's Data Saver mode via
navigator.connection.saveData. Automatically reduce data usage: lower image quality, disable prefetching, pause background sync.
1---2name: india-first-localization3description: Hindi/regional language support, low-bandwidth optimization, UPI payment flows, regional content patterns, and Tier 2/3 city user behavior for the Indian market.4---56# 2.2.4 India First Localization78This skill defines the technical and UX standards for building applications optimized for the Indian market — the world's largest smartphone user base with unique connectivity, language, payment, and cultural considerations.910## 1. Multi-Language Architecture11**Goal:** Full Hindi and regional language support without code duplication.12* **i18n File Structure:** Create locale JSON files per language: `locales/en.json`, `locales/hi.json`, `locales/mr.json`, etc. Keys are semantic identifiers (`"game.start"`, `"nav.home"`), values are translated strings.13* **Runtime Switching:** Implement language toggling via UI buttons (not a buried settings menu). Store the preference in `localStorage` as `lang`. Apply immediately without page reload by re-rendering string-dependent components.14* **Font Support:** Load Noto Sans Devanagari (or equivalent) for Hindi/Marathi/Sanskrit scripts. Use `unicode-range` in `@font-face` to avoid loading Devanagari glyphs for English-only users.15* **Text Expansion:** Hindi text is typically 20–40% longer than English equivalents. Design UI with flexible containers. Never use fixed-width text elements. Test all layouts in Hindi before shipping.16* **Pluralization & Gender:** Hindi has different plural forms and gendered nouns. Use ICU MessageFormat or a library like `intl-messageformat` for proper pluralization and gender agreement.1718## 2. Low-Bandwidth & Offline Optimization19**Goal:** Full functionality on 2G/3G connections and in spotty coverage areas.20* **Bundle Size Budget:** Target < 200KB initial JS bundle (gzipped). Use code-splitting with dynamic `import()` for non-critical features. Lazy-load images and heavy components.21* **Image Strategy:** Use WebP format with aggressive compression (quality 60–70). Serve responsive images via `srcset` with appropriate sizes for mobile screens (rarely > 400px width). Implement blur-up placeholders.22* **API Responses:** Minimize JSON payload sizes. Use field masks / selection (Firestore's `select()`) to fetch only required fields. Paginate all list endpoints.23* **Offline Core:** The app's primary utility must work fully offline (Skill 05). Cache critical data in IndexedDB on first load. Show meaningful content even with no network.24* **Network Detection:** Use `navigator.connection.effectiveType` to detect `2g`/`3g` and adapt: disable auto-play media, reduce image quality, defer non-essential network requests.2526## 3. UPI & Indian Payment Flows27**Goal:** Support India's dominant payment infrastructure.28* **UPI Deep Links:** For simple payments, generate UPI intent URLs: `upi://pay?pa=<vpa>&pn=<name>&am=<amount>&cu=INR&tn=<note>`. Open via `window.location.href` or an `<a>` tag on mobile.29* **QR Code Generation:** Use a client-side library (e.g., `qrcode.js`) to render UPI payment QR codes dynamically. Encode the same UPI URL into the QR payload.30* **Payment Verification:** UPI payments are asynchronous. Implement a server-side webhook or polling mechanism to verify payment status via the payment gateway's API. Never trust client-side payment confirmation.31* **Razorpay/Cashfree Integration:** For subscription or recurring payments, integrate with a local payment gateway. Both support UPI, cards, wallets, and net banking with battle-tested SDKs.32* **₹ Formatting:** Always display currency in Indian format: `₹1,00,000` (lakh grouping), not `₹100,000`. Use `Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' })`.3334## 4. Regional Content Patterns35**Goal:** Design content and interactions that resonate with Indian users.36* **Visual Language:** Use culturally relevant iconography and illustrations. Avoid Western-centric metaphors (mailbox for email, etc.). Prefer universally understood symbols or India-specific visuals.37* **Festivals & Seasons:** Implement seasonal theming (Diwali, Holi, Navratri, Eid) with dynamic CSS theme overrides. Schedule theme changes via date-based logic. This drives engagement and sharing.38* **Local Units:** Support local measurement units where relevant (bigha, guntha for land; quintal for weight). Provide conversion between local and metric.39* **WhatsApp as Primary Share Channel:** In India, WhatsApp is the dominant sharing platform. Prioritize WhatsApp share buttons. Format shared content for WhatsApp's text+image preview (message + URL with OG tags).40* **Voice & Vernacular Input:** Consider voice input support for Hindi and regional languages using Web Speech API. Many Tier 2/3 users prefer voice over typing.4142## 5. Tier 2/3 City User Behavior43**Goal:** Design for the next billion users, not Silicon Valley power users.44* **Affordability Sensitivity:** Price points must be India-appropriate. ₹49–99/month is the sweet spot for subscriptions. Offer weekly plans. Free tiers must be generous.45* **Storage Constraints:** Users frequently clear app data to free space. Persist critical user data in the cloud (not just locally). Implement seamless data restoration on re-install via anonymous auth → account linking.46* **Screen Size:** Design for 5"–6.5" screens. Touch targets minimum 48px. Avoid dense information layouts. Use bottom navigation (reachable with one thumb).47* **Digital Literacy:** Don't assume familiarity with common UI patterns (hamburger menus, swipe gestures). Use explicit labels, onboarding tooltips, and visual cues. Prefer button-based language selection over dropdown menus.48* **Data Saver Mode:** Detect Android's Data Saver mode via `navigator.connection.saveData`. Automatically reduce data usage: lower image quality, disable prefetching, pause background sync.
mayurrathi