FNB Smart Financial Assistant

Empowering Smart Finance: Save, Borrow, Invest Smarter, Faster, Better.

Comment 3

Inspiration

Our inspiration came from observing the everyday financial struggles of young professionals, students, and informal workers in Botswana. Many people want to save, invest, or access loans—but they either lack the discipline, tools, or clear understanding to do so. Inspired by these challenges and FNB’s goal of digitizing finance, we built a single mobile-friendly assistant that feels like a personal finance coach inside your banking app. We imagined a system that could guide users with smart suggestions, automate good habits, and make saving or investing more interactive, secure, and motivating.

What We Built

Our project is an integrated AI-driven Financial Assistant that lives within a mobile banking app, with 3 core modules:

  1. Smart Saving Goal Assistant
    Users can create savings goals (with categories and deadlines), track progress with a circular progress bar, get AI-powered budget suggestions, enable round-up savings, and receive motivational nudges.

  2. Automated Loan Processor
    A simplified loan eligibility checker using smart inputs like income, desired loan amount, and repayment capability. It gives instant feedback on eligibility.

  3. Investment Advisor
    Based on the user’s available funds and investment duration, the assistant suggests appropriate investment platforms or types (e.g., fixed deposits, ETFs, micro-investments).

How We Built Our Project

We used HTML, CSS (with custom styling), and JavaScript as the core stack to build the responsive UI and logic. The system is optimized for mobile banking WebViews and uses localStorage to persist user data such as savings goals and progress across sessions.

We designed an intuitive modular interface, where users select "Saving Assistant" from the app home, which then reveals the three smart options. Each module is visually guided, interactive, and backed by smart logic.

The AI logic is rule-based, simulating decision trees and recommendations by evaluating user input and providing dynamic, human-like guidance (e.g., adjusting a suggested monthly saving based on user expenses and deadline).

We built and tested everything on CodePen and VS Code, ensuring compatibility and deployability to GitHub Pages and FNB mobile environments. The UI/UX was crafted with accessibility and gamification in mind—progress bars, badges, and positive feedback loops keep users engaged.

What We Learned

  • Implementing AI-like behavior using logic trees and input evaluation
  • SVG animation for progress tracking
  • Building secure, mobile-first interfaces optimized for WebViews
  • Designing for financial literacy and gamification

Challenges & Solutions

  • Data persistence: Solved using localStorage with fallback states
  • SVG accuracy on mobile: Calibrated with dynamic viewBox sizing
  • Balancing simplicity with intelligence: Iterated UX based on user flow testing to avoid overwhelming users while delivering meaningful guidance

Built With

Share this project:

Updates