GKlass

Digital Learning Distribution Platform — Simplifying learning and inspiring engagement by enabling educators to share rich instructional content with students in an accessible way

GKlass Case Study Hero — Digital learning distribution platform for educators and students

The 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:

Discovering and selecting learning tracks
Understanding subjects, chapters, and topics
Consuming video-based learning content
Tracking learning progress
Completing different types of assessments
Understanding correct and incorrect answers
Retaking assessments when required
Managing subscription and payment

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.

Understanding the 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

  • • Quickly understand available courses and subjects
  • • See what each learning track offers

Learn

  • • Move from chapters to individual topics
  • • Watch video-based lessons
  • • Access transcripts and supporting information

Practice

  • • Complete different assessment formats
  • • Understand progress through the test
  • • Receive immediate feedback

Progress

  • • Know what has been completed
  • • Understand where they are within a course
  • • Continue learning from where they left off

Recover

  • • Understand errors clearly
  • • Retry assessments when they don't meet the required score

The design therefore focused on making progress, context, and next actions visible at every stage.

My Role & Responsibilities

I worked across the end-to-end UX and UI design of the GKlass learning experience.

My responsibilities included

Understanding the learning journey and user requirements
Structuring the information architecture
Mapping course → subject → chapter → topic relationships
Designing learning and assessment workflows
Creating wireframes and interaction flows
Designing mobile UI screens
Designing different assessment states and question types
Handling feedback, errors, and empty states
Creating consistent interaction patterns
Designing subscription and payment flows
Refining the experience through iteration and feedback

My focus was to make a content-heavy educational product feel structured, approachable, and easy to navigate.

Research & Discovery

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:

How should students discover the right learning content?
How much information should be shown at each level?
How can a student understand their current position?
How should video learning connect with assessment?
How should different question formats behave?
What happens when a student makes a mistake?
How can progress and completion be communicated clearly?

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 Definition

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.

Information Architecture & Workflows

A clear structure that connects discovery, learning, assessment and progress into one seamless journey.

GKlass Information Architecture and User Workflows

Wireframing & Layout

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.

Workflow 1: Onboarding & Getting Started

GKlass Workflow 1 — Onboarding & Getting Started, showing sign-up to home screen journey

Workflow 2: Explore Subjects to Start a Track

GKlass Workflow 2 — Explore Subjects to Start a Track, showing subject discovery and track enrollment journey

Workflow 3: Start Learning a Track

GKlass Workflow 3 — Start Learning a Track, showing video learning and topic completion journey

Workflow 4: Learning a Topic & Taking a Test

GKlass Workflow 4 — Learning a Topic & Taking a Test, showing video learning and test completion journey

Workflow 5: Test & Assessment Flow

GKlass Workflow 5 — Test & Assessment Flow, showing test taking, question navigation, and results submission journey

Design 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.

Important UX 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.

Key Learnings & Reflection

Designing for learning is designing for momentum

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.

Reflection

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.

← Back to all work