Project Title: MoneySave Jr | Financial Literacy UI for Young Learners

The Challenge

Financial literacy concepts are often abstract and difficult for young learners to grasp, particularly when presented through traditional text-heavy formats. Many existing financial tools are designed for adults, creating a gap in age-appropriate, engaging interfaces that simplify concepts like saving, spending, and budgeting.

The Solution

I developed a responsive, interactive financial literacy interface tailored for young learners. The platform uses simplified data visualisation and intuitive micro-interactions to make financial concepts more concrete, engaging, and accessible. The design prioritises ease of use, allowing learners to explore financial decisions in a low-risk, exploratory environment.

Instructional Design Strategy

• Constructivist Learning Approach: Learners actively interact with the interface, building understanding through exploration and immediate visual feedback.
• Micro-Interaction Design: Small, responsive interactions (e.g. button feedback, dynamic updates) reinforce user actions and maintain engagement.
• Cognitive Load Management: Complex financial ideas are simplified through clean layouts, minimal text, and visual cues to support comprehension.
• Visual Learning & Data Representation: Basic financial data is translated into intuitive visual formats, helping learners recognise patterns and outcomes.
• User-Centred Design: The interface is designed with young users in mind, prioritising clarity, accessibility, and ease of navigation.

Tools Used

• JavaScript: For interactivity and dynamic user feedback.
• HTML & CSS: For structuring and styling a responsive, accessible interface.
• Responsive Design Principles: To ensure usability across devices.