Fuel Learning, Ignite Potential in a Single Platform
FLIP (Fuel Learning, Ignite Potential) is a modern, scalable, and accessible Learning Management Platform that empowers users through gamified progress tracking, interactive forums, and analytics to create a more engaging and measurable learning experience.
Context
Online learning platforms often struggle to balance flexibility, interactivity, and user engagement across different roles (administrators, teachers, and students). Many solutions feel fragmented, lack transparency in progress tracking, or fail to deliver a cohesive learning experience across devices.
FLIP was conceptualised to explore how modern web technologies and thoughtful UX design could power a learning ecosystem for both educators and learners.
Problem
Existing Learning Management Systems (LMS) are often:
Overwhelming for educators with poor information hierarchy and cumbersome course management flows.
Unmotivating for learners, offering limited feedback and engagement tools.
Rigid for administrators, making data analytics and system management difficult to navigate.
In short, there was a need for a modular, user-centred LMS that simplifies complexity while keeping learning interactive and measurable.
Goals
To design and build a modern, scalable, and accessible LMS that:
Supports multiple roles (Admin, Teacher, Student) with tailored dashboards and permissions.
Enhances engagement through gamification, interactive forums, and analytics.
Improves usability via responsive layouts, intuitive navigation, and clear progress feedback.
Demonstrates clean code architecture, test coverage, and strong UI/UX consistency.
Clarified the core Jobs-to-be-Done (JTBD) for each user type, admins, teachers, and students, to ensure the platform meets their distinct goals and workflows. This alignment informed feature prioritisation, dashboard layouts, and role-specific interactions.
Built using React 18, TypeScript, and Tailwind CSS for scalability, performance, and responsive design.
Created custom UI components (cards, buttons, analytics panels, gamification features) for consistency and modularity.
Implemented MobX for state management with reusable data stores for authentication and mock APIs.
Integrated Vitest, React Testing Library, and Playwright to ensure reliable unit and end-to-end test coverage.
Prioritised accessibility, inclusive design, and smooth loading states for better user experience.
Delivered a demo-ready LMS prototype with seamless navigation across roles.
Integrated gamification and analytics dashboards to visualise learner progress and performance.
Achieved a modular and scalable architecture, supporting future feature expansion.
Enhanced engagement and usability through clear visual hierarchy and responsive design.
Designing FLIP was not just about implementing features, but about ensuring each role’s workflow felt purposeful, lightweight, and empowering. It also strengthened my ability to translate design intentions into scalable, maintainable code that other developers can easily extend.
