Digital Learning Distribution Platform — Simplifying learning and inspiring engagement by enabling educators to share rich instructional content with students in an accessible way
Challenge
GKlass was designed as a digital learning platform that brought structured educational content, video lessons, assessments, and progress tracking into one mobile experience.
The challenge was not simply to present learning content, but to create a journey that felt clear, structured, and motivating for students.
The experience needed to support several connected activities:
The key UX challenge was to turn a large amount of educational content into a simple learning path that students could navigate without feeling overwhelmed.
Users
GKlass primarily serves students who need to move through structured learning content independently.
The experience had to accommodate different stages of the student's journey—from discovering a course to completing lessons and assessments.
Student needs
Discover
Learn
Practice
Progress
Recover
The design therefore focused on making progress, context, and next actions visible at every stage.
My Role
I worked across the end-to-end UX and UI design of the GKlass learning experience.
My responsibilities included
My focus was to make a content-heavy educational product feel structured, approachable, and easy to navigate.
Research
The initial exploration focused on understanding how educational content could be organized into a journey that felt natural for students.
CONTENT HIERARCHY
Track → Subject → Chapter → Topic → Lesson → Assessment → Progress
This helped identify the major UX questions:
The exploration showed that the product needed a strong content hierarchy combined with predictable navigation patterns.
Key insight
Students should always understand where they are, what they are doing, and what comes next.
Problem
The core problem was not a lack of functionality. GKlass had many learning capabilities, but those capabilities needed to work together as one coherent experience.
The UX problems
1. Complex content hierarchy
Students needed to navigate through multiple levels of learning content without losing context.
2. High content density
Courses contained subjects, chapters, topics, videos, tests, and supporting information.
3. Multiple learning states
A topic could be unstarted, in progress, completed, locked, or unavailable.
4. Different assessment patterns
The system needed to support multiple question formats including multiple choice, fill-in-the-blank, true/false, and matching.
5. Feedback and recovery
Incorrect answers needed to communicate what happened while giving students a clear path forward.
Design goal
Create a structured learning journey that makes complex educational content feel simple, predictable, and actionable.
Architecture
A clear structure that connects discovery, learning, assessment and progress into one seamless journey.
Wireframes
Key user workflows were mapped and wireframed to guide the experience from onboarding through course exploration and learning engagement. Four primary workflows structure the student journey.
Evolution
The design evolved through six core phases, each solving a critical challenge in creating a cohesive learning experience.
01 — Structuring the content
The first priority was establishing a clear hierarchy between tracks, subjects, chapters, topics, and lessons.
02 — Creating a learning path
Content was organized into sequential stages so students could understand what had been completed and what was available next.
03 — Designing the learning experience
Video became the primary learning surface, supported by transcripts, teacher notes, ratings, playback controls, captions, and quality settings.
04 — Designing assessments
Different question types required different interaction patterns while maintaining a consistent assessment framework.
05 — Designing feedback
Correct answers, incorrect answers, quiz failures, completion states, and retry options were designed as part of the same learning journey.
06 — Refining the system
A consistent visual language across navigation, cards, buttons, dialogs, badges, progress indicators, and feedback states helped make the experience feel like one product.
Final direction
The evolution was about turning a collection of educational features into a connected learning experience.
Decisions
Seven core decisions shaped how students interact with content, navigate learning pathways, and understand their progress.
01 — Hierarchy before complexity
The experience was structured around a clear hierarchy: Track → Subject → Chapter → Topic → Lesson → Test. This allowed students to understand the relationship between different types of content.
02 — Make progress visible
Chapter stages, completion indicators, badges, question counters, and navigation states helped students understand where they were in the learning journey.
03 — Keep the next action obvious
Actions such as Explore, Start, Join, Next, Submit, and View Results were kept visually prominent so students could easily understand what to do next.
04 — Support different learning formats
The lesson experience combined video, transcript, teacher notes, personal notes, ratings, captions, and playback settings.
05 — Design assessment states explicitly
The assessment experience accounted for: current question, attempted questions, skipped questions, correct answers, incorrect answers, different question formats, submission, and retake.
06 — Provide recovery instead of dead ends
When a video couldn't play or a student failed a quiz, the interface provided a clear message and an appropriate next action.
07 — Keep interaction patterns consistent
Although the content changed across the product, navigation, dialogs, buttons, cards, and feedback patterns followed a consistent visual and interaction language.
Reflection
GKlass taught me that an educational product is not just a collection of content screens. The UX needs to continuously answer three questions:
Where am I? What am I learning? What should I do next?
01 — Information architecture directly affects learning
When content becomes hierarchical and complex, good information architecture becomes essential to the learning experience.
02 — Progress creates motivation
Small signals such as completed topics, stages, badges, and question counters can help users understand their progress and encourage continuation.
03 — Edge cases are part of the experience
Video errors, failed quizzes, incomplete questions, skipped questions, and retry states are not secondary screens. They are important moments in the learning journey.
04 — Different interactions need different solutions
A multiple-choice question, matching exercise, and fill-in-the-blank question require different interaction models, but they still need to feel like part of the same assessment system.
05 — Consistency reduces cognitive load
When navigation, buttons, feedback, dialogs, and visual patterns behave consistently, students can focus more on the learning content itself.
The biggest takeaway from GKlass was that good learning UX is less about adding more content and more about creating a clear path through it.