Class Management Hub

Help educators guide more learners remotely

As one of two product designers, I turned separate wireframes into a connected MVP, filling gaps in onboarding, lesson assignment, and navigation across desktop and mobile.

My role: Product designer · MVP flows and responsive UI
Contribution: Prioritization, user flows, information architecture, and interface design
Team: Two product designers, product manager, UX writer, and engineers
Duration: August–October 2022
Project stage: First launch · November 2022
Product: Educator dashboard · Web and mobile

Project context

Help educators guide more learners remotely

Oppia learners study independently. Educators needed a way to follow their progress and assign lessons to groups, even when they could not meet in person.

Oppia learning context and educator support

Main challenge

As learner numbers grew, Oppia needed more volunteer educators than one-to-one support could sustain.

Problem factors

Number of learnersEducators need to support several learners at once.
Volunteer timeVolunteers can only check in periodically.
Different locationsEducators need to track progress without meeting learners in person.

Starting point

Turn separate screens into a complete journey

I joined with wireframes already organized around individual tasks. The previous designer and product manager had identified key user cases; I helped connect them into a workable MVP.

The product needed to support three tasks:

Manage learner groups
Track learning remotely
Assign targeted lessons

Existing low-fidelity wireframes organized by separate user cases

Design decisions

Connect separate tasks into one MVP

We weighed user value against development effort to select the essential tasks. I connected those tasks into an MVP journey, then matched the existing screens to it to find missing steps.

MVP user flow connecting high-priority user cases

Choose what belongs in the MVP

User-value and development-effort prioritization matrix — **Balance user value and development effort**

Prioritized educator user cases with selected cases marked by stars — **Select the essential user cases**

Three gaps stood between the screens

The connected flow exposed three missing pieces: a starting point for new educators, clear lesson-selection states, and a way to navigate back from learner details.

Integrated wireflow with gaps annotated in blue

Give first-time educators a clear starting point

The original flow assumed groups already existed. I added an empty state with a Create Group prompt, then refined it after the UX research team flagged the text-heavy design.

Before: text-based learner-group empty state — **Before**

After: illustrated empty state with Create Group prompt — **After**

An internal design review favored the illustrated prompt. The illustration draws attention to the next action before educators read the supporting text.

Make lesson selection easy to track

Educators needed to distinguish lessons already assigned, newly selected, and still available. I used a familiar shopping-cart pattern so they could review selections before adding them to the syllabus.

Annotated lesson search and syllabus selection flow

Make the hierarchy—and the way back—clear

The existing screens had no clear route back to the dashboard, and similar tabs blurred navigation levels. I introduced a persistent sidebar for primary sections and kept contextual tabs beside their content.

Previous navigation with missing return flow and unclear hierarchy

Define the levels first

Revised sitemap separating primary and secondary navigation

Sidebar: keep primary sections available across pages.
Content tabs: place secondary sections above related information.
Alignment: bring content closer to the sidebar to reinforce the hierarchy.

Move between views without losing context

Interactive prototype demonstrating sidebar and content-tab navigation

Final experience

Create a group

Final illustrated onboarding for creating the first learner group

Review learner groups

Assign lessons

Final annotated syllabus assignment experience

Keep the same hierarchy on mobile

Primary navigation moves above the content, with secondary tabs below it. The design starts at 360 × 800px to accommodate older Android devices.

Annotated desktop-to-mobile navigation and content adaptation

Outcomes

From separate wireframes to a launched feature

Launched in November 2022

The learner-group feature launched with connected flows for managing groups and assigning lessons, supported by navigation across desktop and mobile.

Reported capacity: up to 120 learners

The original project reports that educators could oversee up to 120 learners, choosing group sizes around their available volunteer time.

The 120-learner figure describes supported capacity. Changes in educator workload and learning outcomes still need validation.

Next steps

What to validate next

Make learning data actionable

Test which progress and skill signals help educators decide what guidance to give.

Evolve the group overview

Explore a modular dashboard as learner information grows, including its mobile layout.

Connect guidance to learners

Validate how educator assignments appear in learner-facing interfaces and motivate the next step.