Project Title: Digital Banking Learning Assistant | UX & Instructional Design Case Study

The Challenge

Financial literacy remains a significant barrier for many individuals entering the formal banking system. Users often experience cognitive overload when faced with unfamiliar financial terminology such as savings structures, credit systems, budgeting principles, and digital banking security. Traditional financial education materials are often passive, text-heavy, and lack real-world application, resulting in low engagement and limited knowledge retention.

The Solution

To address this challenge, I designed and developed an interactive, rule-based chatbot that simulates a guided financial learning experience. The system transforms abstract banking concepts into conversational learning pathways, allowing users to explore topics such as savings, loans, budgeting, and financial security through structured dialogue. The chatbot acts as a digital learning assistant, providing immediate feedback and simplified explanations aligned with real-world banking contexts.

Instructional Design Strategy

• ADDIE Model Framework: The project follows Analysis (identifying financial literacy gaps), Design (conversation flow mapping), Development (HTML/CSS/JS implementation), Implementation (interactive chatbot experience), and Evaluation (user feedback loops through response accuracy).
• Constructivist Learning Theory: Learners actively build understanding through interaction, rather than passively receiving information, supporting deeper cognitive engagement.
• Scaffolded Learning Design: Financial concepts are introduced progressively, moving from simple awareness (what is saving) to applied understanding (how to budget effectively).
• Cognitive Load Reduction: Information is segmented into short, meaningful responses to reduce overload and support clearer comprehension of financial concepts.
• Rule-Based Decision Flow (If/Else Logic): Structured conversational pathways ensure predictable learning outcomes while maintaining simplicity and clarity in user interaction.
• UX Learning Design Principles: The interface prioritises usability, clarity, and minimal friction to ensure learners remain focused on content acquisition rather than navigation complexity.

Tools Used

• Figma: Prototying and Wireframing.
• HTML: Structure of the chatbot interface and learning environment.
• CSS: Visual design focusing on accessibility, trust-based banking aesthetics, and cognitive clarity.
• JavaScript: Rule-based conversational logic and user interaction handling.
• Instructional Design (ADDIE): Framework used to structure learning progression and content delivery.
• UX Design Principles: Applied to ensure usability, accessibility, and intuitive interaction flow.