Revamp Cakap LMS
(Learning Management System)
Improving the mobile learning experience, increasing learning progress by +48.67%, and preparing the platform for future AI features.
Role - Team
Product Designer - PM, Analyst, Researcher
Impact
Date
April 2026
Business Context
Cakap's Learning Management System (LMS) powers online learning for language learners, career upskillers, and corporate training programs. As Cakap expanded its learning ecosystem, the LMS struggled to keep pace. Fragmented navigation, modal-based learning, and limited progress visibility made it harder for learners to stay engaged, while the existing architecture wasn't flexible enough to support upcoming AI-powered learning features.
As the lead designer for the LMS revamp, I redesigned the end-to-end learning experience across desktop and mobile. My work focused on simplifying navigation, improving the learning flow, and creating a scalable foundation for future product growth.
The redesign exceeded its original success metric, increasing Material Progress Rate to 48.67%, above the project's target of 41.67%, while establishing an AI-ready learning platform.
The Challenge
As Cakap expanded its learning ecosystem, the existing LMS could no longer support an efficient learning experience. Learners encountered increasing friction while navigating courses, and the product architecture wasn't flexible enough to support upcoming AI-powered capabilities.
Product Analytics
The analytics confirmed where the biggest opportunity was. Avg.Learning Progress Rate 37.04% (July 2025) and 64% of learners used mobile as their primary device. The mobile experience became the highest priority.
Product Review
Mapped the existing learning flow across desktop and mobile. The review showed the learning experience is not mobile friendly . Learners spent unnecessary effort managing the interface instead of focusing on the lesson itself.
Review Existing Research
Reviewed previous user research, especially a learner segment internally known as The Quitter. These learners enrolled in courses but rarely completed them. They simply encountered too much friction during the learning process.
Discovery Problem
Before exploring solutions, I wanted to understand whether the low learning progress was caused by user behavior, interaction design, or the platform's underlying structure. To answer this, I combined a few discovery methods to identify where learners experienced friction and validate the direction of the redesign.
Experience Audit
Competitive Benchmark
I benchmarked Coursebox, TalentLMS, and Career Masterclass to understand how modern LMS platforms structure learning experiences. Three patterns consistently appeared:
Learning materials are displayed inline instead of inside modal windows.
Dashboard and learning pages are separated into different contexts.
AI features live in dedicated area instead of competing with learning content.
How might we?
Redesign the learning experience to reduce friction, improve learner engagement, and creating room for future product growth?
Design Development
Design concept for Navigation Strategies
One insight from the discovery phase became the foundation for the exploration:
Every additional tap or moment of uncertainty increases the likelihood that learners will disengage before completing the course.
With this in mind, I explored three navigation strategies. Each concept optimized for a different design goal while balancing usability, discoverability, and long-term scalability.
Concept 3 — Explicit Action Hierarchy (Selected)
The final concept organized actions by frequency of use. Primary actions (Previous and Next) were placed within the thumb zone, while secondary actions such as the course menu and AI tools moved to the top of the interface.
Why?
Unlike the previous explorations, this concept balanced three priorities simultaneously:
Reduced physical effort for the most common interaction.
Made navigation immediately discoverable without relying on hidden gestures.
Established a scalable layout capable of supporting future AI-powered learning features.
This created a clear and predictable interaction model where the next learning action remained visible throughout the session. I optimized for the lowest interaction cost. The goal wasn't simply to make navigation easier it was to reduce friction at the exact moment where learners were most likely to abandon the learning flow.
Separate LMS from detail courses
The previous architecture mixed global navigation with course-specific controls.
The redesigned experience clearly separated browsing from learning, reducing cognitive load and making navigation more predictable.
Integrating AI into the LMS Navigation
Restructured the LMS navigation to support upcoming AI-powered learning features.
I ensuring AI is easily accessible and seamlessly integrated with relevant learning materials.
Validation & Iteration
Our Researcher tested the selected concept with five participants before moving into high-fidelity design. We wanted to understand whether the navigation matched how learners naturally moved through a course. I observed every session, reviewed click heatmaps, and followed each task with a short interview.
Finding
None of them opened the syllabus from the top menu. All participants rely on the bottom navigation.
Iteration
I moved the syllabus into Course Content button in the same interaction area and shown the progress bar.
insights
Learners had already decided that the bottom navigation was where they should interact with the product.
The heatmaps showed attention stayed near the bottom of the screen, where the Previous and Next buttons lived. The menu syllabus in the upper-left corner was almost invisible once learners started reading. At that point I realized the issue wasn't the menu itself.
I added a Course Content button beside the Previous and Next controls, allowing learners to browse the course structure without interrupting their reading flow. After exploring several bottom bar layouts, I chose the version that optimized one-handed reach while keeping navigation actions clear and distinct.
Usability testing also revealed that learners often lost track of where they were in the course while viewing the learning materials. Since the syllabus menu wasn't interactive, many didn't notice their progress.
I addressed this by surfacing progress indicators directly within the learning experience, giving learners continuous feedback and encouraging them to continue. These sessions changed two decisions in the product. First, navigation followed thumb reach instead of screen hierarch this changes came from watching real behavior, not from the original design assumptions.
After Released & Impact
Before & After: Cakap LMS Redesign
Content COurse
Quiz
Reading Material
Live Class in COurse
AI Feature
certificate
Key Learning
The testing changed more than the layout. It changed my understanding of what learners actually needed. Initially, I believed the problem was navigation discoverability. In reality, the research revealed two deeper behavioral insights:
Learners naturally anchor their attention around controls that are easiest to reach.
Learners seek constant reassurance that they are progressing, not simply a way to move between pages.
Designing around those behaviors not around the original interface resulted in a learning experience that felt more intuitive while reducing unnecessary cognitive and physical effort.