LearnMore
A responsive learning platform where teachers can create courses, track modules, and monitor progress with ease. From user registration to QR code sharing, it makes learning more interactive, organised, and engaging.
Duration
UI design&Web development
Project type
Two months
Role
Personal project
Tools&Skills
Figma & Html & Css & Broostrap & Sql & JS & Django
Overview & Key Features
LearnMore is a SaaS-based online platform I designed to simplify how educators and trainers create, share, and track learning content. The project started from a clear challenge in online education: while digital learning has grown rapidly, course creators still face obstacles such as messy structures, inefficient content production, and limited ways to engage learners. My design decisions focus on addressing these pain points through clarity, accessibility, and responsiveness.
The platform provides a clean, multi-page course builder where content can be structured seamlessly, even by non-technical users. Each course automatically generates a QR code for effortless distribution—ideal for classrooms, training programs, or community events. To support educators, a real-time learner progress tracker visualizes completion rates and engagement levels, enabling adaptive teaching and more personalized interventions. The platform is fully responsive across devices, ensuring a consistent experience whether on desktop or mobile.
The primary user groups—school teachers, online content creators, and corporate trainers—benefit from LearnMore’s flexibility. It adapts easily to different teaching contexts: formal classes, internal company training, or public learning initiatives. My design emphasizes transparency and accessibility, making the learning journey smoother for both instructors and students.
Core Functions
Streamlined Course Creation
A clear, intuitive interface allows educators to structure learning materials with text, visuals, and video. Content is designed to flow logically, reducing barriers to course design
Seamless QR Code Integration
Every course comes with an auto-generated QR code, bridging online and offline learning. Codes can be printed on posters, shared digitally, or embedded in materials, giving learners direct access to content
Seamless QR Code Integration
-
Every course comes with an auto-generated QR code, bridging online and offline learning. Codes can be printed on posters, shared digitally, or embedded in materials, giving learners direct access to content.
Real-Time Progress Dashboard
Educators can monitor how learners interact with content—completion rates, time spent, and last activity. This data supports responsive teaching strategies and helps identify friction points in learning
Personalized Accounts & Profiles
Both instructors and learners manage their own dashboards. Educators track and update multiple courses, while learners see a clear record of their participation and progress
Database Design
The database is designed to support a role-based course platform where users can act as educators, trainers, or students. Educators can create structured multi-page courses, which are linked to auto-generated QR codes for easy sharing. The system also tracks individual learner progress, making it easier for instructors to monitor engagement and completion.
Accessibility
Accessibility was a key focus throughout the design process, ensuring that the platform is usable by all individuals, including those with diverse abilities. Rather than simply meeting compliance standards, my design decisions aimed to create an inclusive and seamless user experience.
Structured Information & Semantic Design
I used semantic HTML elements such as <header>, <nav>, <main>, and <footer> with clear heading hierarchies, enabling assistive technologies to interpret content structure effectively. ARIA attributes (e.g., aria-label, aria-expanded) were incorporated to ensure that dynamic content is equally accessible through screen readers.
Keyboard-Friendly Interaction
All interactive elements—including buttons, forms, links, and modal windows—were designed to be fully operable via keyboard. Clear visual focus indicators guide users who rely on keyboard navigation, allowing them to move through the interface with confidence and efficiency.
Responsive Layout & Contrast Optimization
The interface adapts seamlessly across devices and screen sizes, following responsive design principles. In addition, I applied WCAG-compliant contrast ratios and scalable text to support users with visual impairments, making reading and interaction more comfortable.
This @media code is not only about optimizing layout on small screens, but also about ensuring visual consistency, touch-friendly interactions, and accessibility support. It reflects a design-driven approach where technical implementation directly serves usability and inclusivity across devices.
Implementation
-
Frontend: Developed the user interface using HTML5, CSS3, and Bootstrap, ensuring responsive layouts and cross-device usability. Integrated features such as QR code generation for quick course sharing.
-
Backend Integration: Worked with Django and MySQL to handle data flow between the interface and database. The backend implementation included APIs for course/module management, user authentication, and quiz functionality (as shown in the code snippet).
-
Collaboration: Coordinated frontend and backend to ensure smooth communication and efficient system performance, resulting in a platform that is both user-friendly and technically robust.