Smart Daily Savings Visualizer

A production-ready React widget designed to increase fintech conversion rates by reducing cognitive load and demonstrating the power of consistent savings.

Why This is Built as a Landing-Page Experiment, Not a Full Product

This component is deliberately scoped as a conversion-focused widget rather than a comprehensive financial planning application. Here's why:

Strategic Positioning

• Single-purpose clarity: Solves one problem exceptionally well—helping users understand the compounding value of daily savings.
• Embeddable by design: Can be dropped into any fintech landing page without requiring authentication, backend infrastructure, or user accounts.
• Hypothesis-driven: Built to test specific behavioral psychology principles (loss aversion, personalization, reduced cognitive load) with measurable outcomes.

What This Is NOT

• ❌ A goal-tracking dashboard
• ❌ A portfolio management tool
• ❌ A source of investment advice
• ❌ A feature-complete product

What This IS

• ✅ A conversion optimization experiment
• ✅ A demonstration of product thinking applied to fintech UX
• ✅ A reusable component showcasing modern React patterns
• ✅ A case study in behavioral design

The constraint is the feature: By limiting scope to activation—not retention or monetization—we can optimize every pixel and interaction for one measurable goal: increasing signup intent.

---

Problem Being Solved

User Psychology Challenge: Most people struggle to visualize the long-term impact of small daily savings. This cognitive gap leads to:

• Analysis paralysis during onboarding
• Abandonment of savings goals before starting
• Underestimation of compound growth potential

Business Impact: Low first-time user activation and poor conversion from visitor to account creation.

Solution: This widget transforms abstract financial concepts into tangible, personalized projections that users can interact with in real-time. By showing the dramatic difference between "doing something" vs "doing nothing," it creates emotional urgency while maintaining trust through transparent calculations.

UX Reasoning & Conversion Thinking

Design Decisions

1. Mobile-First Gradient Background

   • Dark fintech-inspired gradients reduce visual noise
   • Matches modern Indian fintech apps (Paytm, PhonePe, Groww)
   • Creates premium feel that builds trust

2. Real-Time Feedback Loop

   • Debounced slider prevents lag (150ms)
   • Animated number transitions feel responsive
   • Instant chart updates show cause-and-effect

3. Emotional Micro-Copy

   • "Small Daily Savings → Real Wealth Over Time" (header)
   • "Just ₹101/day can transform your financial future"
   • Framing focuses on possibility, not sacrifice

4. Transparent Calculations

   • Shows inflation adjustment upfront
   • Displays "doing nothing" scenario for contrast
   • Includes disclaimer to build credibility

5. Sticky Mobile CTA

   • Button follows user on mobile scroll
   • Reduces friction at moment of decision
   • "Start Saving Today" creates immediate action

Conversion Optimizations

• Reduction in Cognitive Load: Pre-selected defaults (₹101/day, 3 years, Balanced) reduce decision fatigue
• Visual Hierarchy: Future corpus highlighted with gradient, emoji icons guide attention
• Progressive Disclosure: Controls → Metrics → Chart → CTA flows naturally
• Accessibility: Full keyboard navigation, ARIA labels, semantic HTML ensures nobody excluded

Technical Architecture

Tech Stack

• React 19.2 with TypeScript for type safety
• Vite 7.3 for fast builds and HMR
• Recharts 3.7 for lightweight data visualization
• Vitest + React Testing Library for comprehensive testing

Folder Structure

src/
├── components/          # UI components
│   ├── SavingsVisualizer.tsx    # Main container
│   ├── SavingsSlider.tsx        # Animated input slider
│   ├── RiskProfileToggle.tsx    # Risk selection
│   ├── TimeHorizonSelector.tsx  # Time period selector
│   ├── SavingsChart.tsx         # Recharts visualization
│   ├── MetricsDisplay.tsx       # Results cards
│   └── CTAButton.tsx            # Conversion button
├── hooks/               # Custom React hooks
│   ├── useDebounce.ts           # Performance optimization
│   └── useSavingsCalculator.ts  # Memoized calculations
├── utils/               # Business logic
│   └── calculations.ts          # Compound interest formulas
├── constants/           # Configuration
│   └── financial.ts             # Market assumptions
└── test/                # Test setup
    └── setup.ts

Key Engineering Patterns

1. Custom Hooks for Separation of Concerns

   const { metrics, chartData } = useSavingsCalculator(
     dailySavings, timeHorizon, riskProfile
   );
   

2. Debouncing for Performance

   const debouncedDailySavings = useDebounce(dailySavings, 150);
   

3. Memoization to Prevent Re-renders

   const handleChange = useCallback((value: number) => {
     setDailySavings(value);
   }, []);
   

4. Compound Interest Formula

   FV = P × [((1 + r)^n - 1) / r] × (1 + r)
   Where:
   - P = monthly contribution
   - r = monthly rate (annual rate / 12)
   - n = number of months
   

5. Inflation Adjustment

   Real Value = Nominal Value / (1 + inflation)^years
   

Setup & Installation

Prerequisites

• Node.js 18+ and npm

Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm test

# Run tests with UI
npm test:ui

Environment

No environment variables required. All configurations are in src/constants/financial.ts.

Testing

Test Coverage

• Calculation Utilities: 8 test suites covering:

  • Compound interest calculations
  • Inflation adjustments
  • Chart data generation
  • Currency formatting (Indian lakhs/crores)

• Component Tests: Accessibility and rendering:

  • Slider ARIA labels and value display
  • Risk profile selection state
  • Keyboard navigation

Running Tests

npm test           # Run all tests
npm test:ui        # Interactive test UI

Performance Metrics

Optimization Strategies

1. Code Splitting: Dynamic imports for chart library
2. Memoization: useMemo/useCallback prevent unnecessary calculations
3. Debouncing: 150ms delay on slider prevents excessive renders
4. CSS Optimization: Modern CSS with minimal JavaScript animations

Expected Lighthouse Scores (Production Build)

• Performance: 95+
• Accessibility: 100
• Best Practices: 95+
• SEO: 95+

Bundle Size

• Gzipped JS: ~70KB (Recharts 45KB + Framer Motion 25KB)
• CSS: ~12KB (includes new sections)
• Total Load: <85KB

Note: Framer Motion adds ~25KB but provides production-grade animation performance, TreeShaking, and automatic accessibility. This is acceptable for a conversion-critical component.

Expected Impact if Deployed on a Real Landing Page

Behavioral Psychology Hypotheses

These are testable predictions, not marketing claims. Real-world performance depends on user segment, page context, and product-market fit.

1. Faster Value Comprehension

Mechanism: Users instantly understand the long-term outcome of ₹/day savings through interactive, real-time projections.

Expected Impact: 40-60% reduction in cognitive load compared to static explanations (measured via time-to-first-interaction).

Why: Concrete numbers ("₹4.5L in 3 years from ₹100/day") are easier to process than abstract concepts ("12% annual returns").

2. Higher CTA Click Probability

Mechanism: Personalized projections reduce decision uncertainty before taking action.

Expected Impact: 25-35% increase in click-through rate compared to generic "Start Saving" buttons.

Why: Interactive calculators create a micro-commitment loop—adjusting sliders builds intent to follow through.

3. Reduced Decision Hesitation

Mechanism: Inflation-adjusted comparison vs "doing nothing" clarifies opportunity cost and urgency.

Expected Impact: 30-45% reduction in bounce rate specifically on the calculator section.

Why: Loss aversion (losing purchasing power to inflation) is a stronger motivator than potential gains alone.

How This Could Be Measured

Quantitative Metrics:

• Time-to-first-interaction: Median time from page load to first slider adjustment (target: <3 seconds)
• CTA click-through rate: Conversion from widget interaction → signup initiation (compare control vs treatment)
• Scroll depth to calculator section: Measure engagement depth as a proxy for intent
• A/B test cohort: Control (static hero) vs Treatment (interactive widget)

Qualitative Signals:

• Heatmap analysis of slider interaction patterns
• Session recordings to identify friction points
• Post-interaction surveys ("Did this change your perception of savings?")

A/B Test Design

Control: Static hero section with "Start SIP" button + bullet points listing benefits

Treatment: This interactive widget embedded above the fold

Success Criteria:

• Primary: 20%+ increase in signup initiation rate
• Secondary: 30%+ increase in time-on-page
• Guard rail: No degradation in page load performance (Lighthouse score >90)

---

Motion Design Principles

Philosophy: Meaningful, Not Flashy

All animations serve a functional purpose—guiding attention, providing feedback, or reducing cognitive friction. No decorative motion.

Implementation Constraints

• Duration: 150-500ms max (most animations are 150-250ms)
• Easing: Consistent cubic-bezier(0.4, 0, 0.2, 1) for natural deceleration
• Performance: No impact on Lighthouse performance score (target: 95+)
• Accessibility: Automatic prefers-reduced-motion support in all components

Animation Inventory

Accessibility Commitment

Every animated component includes:

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
  // Skip animation, show content immediately
}

Users who prefer reduced motion see all content instantly without any animation delays or transitions.

Code Quality

TypeScript

• Strict mode enabled
• Full type coverage (no any types)
• Type-only imports for tree-shaking

Accessibility

• Semantic HTML5 elements
• ARIA labels on all interactive components
• Keyboard navigation support
• Focus management
• Respects prefers-reduced-motion

Browser Support

• Modern browsers (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• Uses CSS Grid, Flexbox, CSS Variables
• No polyfills needed for target audience

Deployment

Integration with Existing Site

import { SavingsVisualizer } from './components/SavingsVisualizer';

function LandingPage() {
  return (
    <section className="hero">
      <SavingsVisualizer />
    </section>
  );
}

Build for Production

npm run build
# Output: dist/
# Deploy dist/ to CDN or static host

Future Enhancements

1. Goal tracking: "I want ₹10L for down payment in 5 years"
2. Social proof: "12,453 users saved ₹450/day this month"
3. Tax benefits: Show Section 80C savings for ELSS
4. Export projections: Download as PDF or share via WhatsApp
5. Animation polish: Add confetti on CTA click for dopamine hit

License

This is a portfolio project demonstrating production-ready fintech UI/UX patterns.

Contact

For questions or collaboration:

• GitHub: @Shashank-Singh03

---

Philosophy: Great fintech UX reduces complexity without dumbing down. This widget respects user intelligence while eliminating friction.