Voice Matters

Voice Matters is a voice-first livelihood and financial empowerment app for rural and semi-urban Indian users. It helps people onboard in their preferred language, discover relevant government/private schemes, understand local news impact, plan savings, analyze spending, and vote on future product features.

The project is designed as a product management and AI-builder case study: it translates underserved-user problems into an accessible mobile-first experience, combines profile-aware AI routing with practical financial workflows, and invites users to shape the roadmap through lightweight collaboration loops.

Table of Contents

• Product Thesis
• What It Demonstrates
• Project Layout
• Tech Stack
• Auth and Login Flow
• Roles and RBAC
• Application State - AppContext
• Pages
• Components
• Canvas System
• NLP and AI Routing
• Hooks and Utilities
• Run Locally
• Known Limitations
• Collaboration
• Author

Product Thesis

Millions of users do not fail to access financial products because they lack intent. They fail because most digital products assume literacy, English-first navigation, forms-first onboarding, and high trust in abstract financial language.

Voice Matters reframes the experience around:

• Voice-led onboarding and assistance for low-literacy users.
• Local-language interaction across Hindi, Haryanvi, Punjabi, and English.
• Profile-aware discovery of schemes, news, savings nudges, and learning content.
• Trust tokens that reward learning, feedback, and engagement.
• Roadmap collaboration through feature voting instead of one-way product decisions.

What It Demonstrates

• Identified an underserved user segment and translated it into a working MVP.
• Designed a mobile-first experience for accessibility, language comfort, and low-friction navigation.
• Built AI-assisted personalization for schemes, local news, impact explanations, and page routing.
• Modeled product loops around trust, learning, savings behavior, and user feedback.
• Created a clear foundation for future integrations such as UPI, micro-loans, official scheme APIs, and field research feedback.

Project Layout

Voice-Matters/
|-- App.tsx                  # Router, protected routes, and layout wrapper
|-- index.tsx                # React entry point
|-- index.html               # Vite HTML shell
|-- types.ts                 # Shared domain types and enums
|-- vite.config.ts           # Vite config and Gemini API env mapping
|-- metadata.json            # AI Studio metadata and permissions
|-- package.json             # Scripts and dependencies
|-- context/
|   `-- UserContext.tsx      # Global user, token, learning, scheme, news, and voice state
|-- components/
|   |-- Header.tsx           # Profile header, trust token indicator, notifications
|   `-- BottomNav.tsx        # Mobile bottom navigation and QR action
`-- views/
    |-- Onboarding.tsx       # Voice-assisted multilingual profile creation
    |-- Dashboard.tsx        # Home hub, AI content fetch, voice assistant routing
    |-- FuturePlanner.tsx    # Postal SIP-style savings planner
    |-- SmartSpend.tsx       # Spending insights and voice explanation
    |-- Knowledge.tsx        # Learning quizzes and token rewards
    |-- FeatureVault.tsx     # Personalized schemes and feature voting
    `-- NewsFeed.tsx         # Local news search, impact summaries, grounding view

Tech Stack

• React 19 with TypeScript
• Vite 6 for local development and builds
• React Router DOM 7 with hash-based routing
• Google GenAI SDK (@google/genai) for Gemini text, structured JSON, search-grounded results, and TTS
• Web Speech API for browser speech recognition
• Web Audio API for generated audio playback
• Lucide React for interface icons
• Recharts included for future data visualization expansion
• LocalStorage and SessionStorage for prototype persistence

Auth and Login Flow

This MVP uses local profile creation instead of server-side authentication.

1. A first-time user lands on /onboarding.
2. The user selects a language.
3. The app collects name, occupation, village/city, state, number of children, and marital status.
4. Each major field can be filled with microphone-assisted prompts.
5. login() stores the user in UserContext.
6. The profile is persisted in localStorage under mm_user.
7. Protected routes check for either an in-memory user or a stored mm_user before allowing access.

This keeps the prototype fast to test while preserving a realistic onboarding funnel for future auth, KYC, and identity flows.

Roles and RBAC

The current product is single-role: an end user seeking financial help, local information, and livelihood support.

Planned RBAC paths:

• User: creates profile, receives schemes/news, learns, saves, and votes.
• Field Partner: helps onboard users and validate scheme outcomes.
• Admin/PM: reviews feature votes, content performance, and unmet needs.
• Institution Partner: publishes offers, verifies eligibility, and tracks applications.

Application State - AppContext

The app uses UserContext as the application state layer. In product documentation, this can be treated as the current AppContext.

It manages:

• User profile and selected language.
• Trust token balance.
• Financial summary and sample transactions.
• Learning progress and level unlocks.
• Feature votes.
• Personalized schemes and news items.
• Voice playback, speech recognition, audio cache, and stop controls.

Persistence:

• mm_user
• mm_tokens
• mm_financials
• mm_learning
• mm_votes
• mm_popup_seen for session-level scheme popup control

Pages

• Onboarding: multilingual, voice-assisted profile creation.
• Dashboard: personalized home hub with assistant microphone, language switching, scheme/news entry points, and roadmap voting CTA.
• Future Planner: goal-based monthly savings calculator using a Postal SIP-style maturity estimate.
• Smart Spend: spending review, high-spend alert, transaction list, and voice explanation.
• Knowledge: occupation-aware quizzes that reward correct answers with trust tokens.
• Feature Vault: personalized scheme cards with eligibility explanations and future feature voting.
• News Feed: local news discovery, voice search, impact summaries, and visible grounding/source cues.

Components

• Header: shows user greeting, location, trust tokens, and notification entry.
• BottomNav: provides mobile-first access to Home, Plan, Spend, Learn, and a central QR action.

The component set is intentionally small because most product behavior currently lives in page-level prototypes. As the app scales, shared primitives such as cards, tabs, voice buttons, loaders, and language selectors should be extracted.

Canvas System

There is no custom canvas or drawing system in the current MVP.

The product does use a mobile-first visual system built with React components, utility-style classes, rounded cards, icon actions, trust/growth color cues, and fixed navigation. If a future "canvas system" is required, the most relevant extension would be a financial planning canvas or assisted form-builder for field partners.

NLP and AI Routing

Voice Matters uses AI in four practical ways:

• Text-to-speech: Gemini TTS generates spoken prompts and explanations.
• Speech-to-text: browser speech recognition captures user replies and search queries.
• Structured discovery: Gemini with Google Search returns scheme and news JSON matched to the user's profile.
• Intent routing: the dashboard assistant listens to a user request and asks Gemini to choose the best app destination: dashboard, planner, spend, knowledge, vault, or news.

Key routing examples:

• "Show schemes" routes to /vault.
• "I want to save money" routes to /planner.
• "Check my expenses" routes to /spend.
• "Teach me something" routes to /knowledge.
• "Latest news" routes to /news.

Hooks and Utilities

Current reusable logic is concentrated in UserContext and page-local helpers:

• useUser() exposes user state, tokens, savings, learning progress, schemes, news, voting, and voice controls.
• Audio helpers decode Gemini base64 PCM audio into playable AudioBuffer objects.
• TTS cache avoids repeated audio generation for the same prompts.
• deductToken() and addToken() model the trust-token economy.
• updateLearning() unlocks Medium and Hard levels based on completed quiz progress.
• updateUserLanguage() refreshes language state and clears personalized content so it can be regenerated.

Run Locally

Prerequisites:

• Node.js
• Gemini API key

Steps:

npm install

Create .env.local:

GEMINI_API_KEY=your_api_key_here

Start the app:

npm run dev

Build for production:

npm run build

Known Limitations

• Authentication is prototype-only and stored locally, not backed by a secure server.
• Gemini API calls are made from the client, which is not suitable for production key security.
• Speech recognition depends on browser support and microphone permissions.
• Some Hindi/Punjabi/Haryanvi strings appear with encoding artifacts and should be cleaned before production use.
• Transactions are sample data; UPI/bank integrations are not implemented yet.
• Scheme and news results depend on model/search quality and need stronger source validation for real-world use.
• RBAC, analytics, admin tooling, and partner workflows are planned but not implemented.
• Feature voting currently records local votes only; it does not aggregate feedback across users.
• The QR action is a placeholder and does not yet open a real scanner flow.

Collaboration

Voice Matters is intentionally built as a collaboration-first MVP. The product should improve through conversations with rural users, field workers, product managers, designers, engineers, NGOs, financial institutions, and hiring teams evaluating practical AI product thinking.

Strong next contributions include:

• Validate user journeys with real rural and semi-urban users.
• Improve local-language copy and fix encoding issues.
• Add secure backend auth and API proxying.
• Connect real scheme databases and verified eligibility rules.
• Add analytics for drop-offs, voice failures, content usefulness, and voted features.
• Prototype UPI transaction ingestion and personalized savings nudges.
• Convert feature votes into a PM roadmap dashboard.

Author

Yatin Bhalla · Product Manager & AI Builder
🔗 LinkedIn · Gmail · X