This project is a complete revamp of the Cakap Learning Management System (LMS). The primary focus was migrating fragmented learning experiences into a single, unified platform to make it easier to maintain. Because 64% of our students use smartphones, I took a mobile-first approach for the redesign. This strategy not only solved immediate usability issues but also established a scalable UI foundation ready for future AI integrations.

Target Audience Our primary users are Students and Lifelong Learners, with a specific focus on rescuing "The Quitter" persona. Their Core Challenges: These users want to learn, but the platform's interface actively drains their motivation. They frequently abandon courses due to:

Poor Usability: Technical barriers and a clunky interface that make basic navigation frustrating.

Hidden Progress: A lack of clear progress tracking, leaving them feeling lost and unaccomplished.

Rigid Experiences: Unengaging content delivery and a lack of personalization or flexible scheduling.

Quantitative Data:

Device Usage: 64% of students use smartphones to access the platform, while only 26% use the LMS web version.

Average Material Progress Rate: 36.50%.


Qualitative Data (Usability Issues & Business Feedback):

Usability Issues: The current LMS relies heavily on an inefficient "pop-up" style for displaying learning materials, which frustrates users.

User Pain Points: Key personas, particularly "The Quitter," struggle with poor progress tracking and unengaging content.

Business & Tech Goals: The company needs to migrate fragmented learning experiences into a single LMS for easier maintenance and requires space to integrate upcoming AI tools.

These issues caused high user drop-off and frustration, leaving the weekly Learning Progress Rate stuck at just 36.50%.

Our current LMS is frustrating a mostly mobile user base because excessive pop-ups hide their progress, keeping the weekly completion rate stuck at just 36.50%. This clunky architecture doesn't just cause learners to drop out early; it also actively blocks the business from merging our platforms and integrating future AI features.

The main objective was to redesign the platform to make accessing learning materials seamless and intuitive. Specifically, the goals were to:

Increase the weekly Learning Progress Rate from 37.04% to 41.67% by introducing a much clearer progress-tracking system.

Establish a scalable, flexible UI architecture capable of housing future AI-powered features.

Increase Percentage of material progress weekly from 37.04% to 41.67%

How might we redesign navigation to increase learning experience in cakap LMS so learners can easily complete their courses?

How might we design the LMS layout to easily integrate AI-powered learning assistants in the future?

To find a better layout structure, I compared Cakap LMS with a few competitors and noticed clear patterns. This gave me three main insights to fix the current architecture:

Clear Page Context: All three platforms separate the general LMS dashboard from the specific course details. This helps users focus on one step at a time without getting overwhelmed.

Single-Page Viewing: Instead of using frustrating pop-ups, competitors display learning materials directly on the page when a tab is clicked. This keeps the learning flow intact and reduces cognitive load.

Standard Layout for AI: There is a clear layout pattern across platforms. The left sidebar is kept for menu navigation, and AI tools are placed on the right. This creates a dedicated space for future AI integration without cluttering the main navigation

To make the LMS easy to navigate, I separated the LMS from the specific course details. This helps users focus on one step at a time without getting overwhelmed. For the pop-up issue and make room for upcoming AI tools, I sketched out three layout directions for accessing the material menu and course details, focusing heavily on mobile usability:

Idea 1 Thumb-Zone Menu For the first concept, I placed the main navigation menu at the bottom of the screen to keep it within the user's natural thumb zone. Learners can easily select and view different materials in one place without triggering a new pop-up. The AI feature gets its own dedicated panel, cleanly separating the learning content from the tools.

Idea 2 Gesture Navigation & Grouped Controls The second idea leans into natural mobile behavior. I grouped the main menu, AI toggle, and lesson controls at the top of the screen. Instead of tapping through menus to change lessons, users simply swipe left or right to advance through the material. This keeps the reading area completely uncluttered and immersive.

Idea 3 Clear Action Hierarchy For the final concept, I separated the controls based on how often they are used. The primary actions (the "Before" and "Next" buttons) sit at the bottom in the thumb zone for effortless progression. Secondary actions, like the global menu and AI toggle, are placed at the top. This setup prevents accidental clicks and creates a very clear, predictable learning flow.

The Decision After a quick design critique session with my peers, I prioritized Idea 3 because it creates the lowest barrier to continuing a lesson. Since moving to another material relies entirely on the button nearest to the user's thumb, it removes all physical and mental friction from the learning process. Making that next step immediately obvious and reachable is the best way to keep users engaged.

1. Course Details Page

Separating the LMS dashboard from course details: I gave the course details a dedicated page. Breaking the experience into distinct steps helps users understand what they are about to learn before jumping into the material, preventing them from feeling overwhelmed right from the start.

2. The Learning Interface

Clear navigation paths: I designed a straightforward way for users to open the material menu and easily navigate back to the course details. Learners need to know exactly where they are in the app and how to go back without getting stuck.

Replacing pop-ups with inline content: To fix the biggest usability issue, I made sure all learning materials load directly on the same page. No more frustrating pop-ups. This single-page approach reduces cognitive load and keeps the reading flow completely uninterrupted.

Thumb-zone progression: I placed the "Next" and "Before" buttons at the bottom of the screen to move through the materials. By keeping this primary action right under the user's thumb, advancing to the next lesson becomes obvious and physically effortless, which helps prevent learners from dropping off.

The Issue: 
 Usability testing showed that 5 out of 5 users completely missed the syllabus list hidden inside the top menu. They relied entirely on the bottom navigation to move forward but felt confused because they could not see the overall course flow.


The Fix: I moved the syllabus navigation directly to the bottom of the screen. Integrating a dedicated "Course Content" button alongside the lesson progression arrows makes the syllabus immediately visible and physically easy to reach at any point in the lesson.


I explored four different arrangements and chose Option 4. Placing the syllabus button on the left and grouping the navigation arrows on the right creates the most intuitive layout. It provides the best physical ease for one-handed mobile use, allowing learners to check their progress or change lessons without stretching their thumbs.

Early Concept Validation: The Option 4 bottom layout was successful. Users preferred it for primary navigation because the buttons are the easiest to reach when moving between pages.

Users frequently tapped the "Course Content" button to view the course list and check their progress. Surfacing the progress bar and current lesson title on the main learning screen rather than hiding them inside the "Course Content" menu—allows users to track their status at a glance without repeatedly opening secondary menus.

The redesign successfully fixed the structural bottlenecks, directly improving both user engagement and business value:

A Seamless Learning Experience: Learners now have a clear, single-page mobile experience. With intuitive thumb-zone controls and visible progress tracking, they can focus entirely on learning rather than fighting the interface.

Business Growth & AI Integration: We successfully cleared the UI real estate needed to integrate the new AI features into the LMS. This not only unifies the platform for easier maintenance but acts as a major selling point, increasing users' willingness to buy courses due to the clear added value.

Looking back at this project, redesigning the mobile experience reinforced a few core principles about how people actually learn on their phones.

Always design for the physical reality: It is easy to build a layout that looks perfectly balanced on a monitor, but mobile design is highly physical. Pushing the core navigation into the bottom-right thumb zone completely changed the usability. If a button is a stretch to reach, users simply will not use it.

Do not hide the motivation: Hiding the progress bar and lesson titles behind a menu was a mistake that testing quickly caught. For at-risk learners, progress tracking is not just data; it is the motivation they need to keep going. Making that visual feedback permanent and immediate was crucial for keeping them engaged.

Test early and let go of assumptions: Even after years of designing educational platforms, I still rely heavily on seeing real users interact with the product. Watching all five participants miss the top navigation menu in the early concept phase was a great reminder that what makes sense to the designer does not always translate to the user. Clear visual anchors and obvious layouts guide behavior much better than complex, hidden menus.