serbinov.com RUEN
frame/caseSberClass
← Work

A school platform’s learning flow: complex, dense with information, and clear even to a first-grader

CompanySberEducation, SberClass
Years2021–22
RoleSenior Product Designer
ProductSchool platform, version 4.0, learning process
SberClass, a platform for schools
2versions of the learning process: Lite and Pro
3roles in the product: student, teacher, school admin
from grade 1the youngest users: the interface works for first-graders

Context

SberClass is SberEducation’s learning platform. According to public data, by the end of 2020 it was running in pilot schools across 65 regions of Russia

In July 2021 I joined the version 4 design team as a Senior Product Designer. My area was the learning-process flow, from the timetable and gradebook to a student going through a lesson

Problem

The learning process is lessons, assignments, grades, comments and materials: a lot of information. Teachers and first-graders both had to use it. We needed to show everything that matters without overwhelming the student

  • Three roles with different jobs: student, teacher, school admin
  • School processes that can’t break: the electronic gradebook, timetable, terms
  • A mix of devices and screen sizes in schools

Approach

The core of the work was the learning-process flow: what a student needs during a lesson, and in what order. We designed for both versions, Lite and Pro, at once. Hypotheses were checked through research in schools, and nearly all of them held up. One didn’t: the motivation to learn turned out not to depend on whether a student lives in a village, a town or a big city

  1. CJM and user flows
  2. Prototypes
  3. Research in schools
  4. Figma reviews
  5. Handoff to engineering
  6. Iterating on versions

My area was the flow of the entire learning process. Mockups went through Figma reviews where we debated terminology, list density, empty states and the main scenarios

System

The product was built from three role-based files and a shared UI kit. Student screens revolve around the day: lesson, grades, assignments and comments sit on one card, and the current lesson is highlighted

StudentDiary, subjects, assignments, materials, profile, soft and digital skills
TeacherHome, module and lesson planning, assignment and content builders, class monitoring
AdminGradebook import, timetable, users, classes, departments, school settings
FoundationBreakpoints at 1280, 1024, 784 and 512, auto layout components, color styles, empty states
Student diary for a day: lesson cards with grades, assignments and comments, assignments by status on the right (in Russian)
Student diary, one day: lessons with grades, assignments and comments; assignments by status on the right
Today’s student diary: the current lesson is highlighted, lessons are tagged as a test or a video lesson (in Russian) The same screen with the “Done” assignment filter: two assignments remain on the right (in Russian)
Same screen: the current lesson stands out, assignments filter by status
A student’s lesson: theory lesson card, grades for the day, teacher, comments, current topic and materials (in Russian) A lesson in the “Absent” state: red lesson card, teacher, current topic and materials (in Russian)
Lesson: lesson type, grades for the day, teacher, current topic and materials; on the right, a missed lesson

Working with engineering

The frontend was built by an in-house team, with contractors brought in for specific pieces. The mockups I owned were built from components and states that could go into code without guesswork: sizes, responsive behavior, empty screens, errors

What happened to the project

There are no metrics. The project was scaled down and repurposed, and almost nothing reached schools. The timeline below is based on public sources

July 2021Work on version 4 begins
Fall 2021New leadership at the division and the company
2022The project shrinks and changes course. In June I leave: my work no longer matched where the project was heading
Todaysberclass.ru: an after-school learning platform for grades 3–11

Result

  • The learning-process flow designed in two versions, Lite and Pro, for three roles: screens and prototypes of version 4
  • A dense learning process turned into screens that work for students from grade 1
  • Research in schools confirmed nearly all hypotheses

The mockups belong to SberEducation

Message me on Telegram ↗Next case: Tetrika →