Redesign of Webinar Course Page (0-5 grades)
The task of redesigning the webinar course page and solving the problem of detecting the webinar block.
Improving visibility of information in the viewport for elementary school children.
The task of redesigning the webinar course page and solving the problem of detecting the webinar block.
Improving visibility of information in the viewport for elementary school children.
Context
The webinar course is сonduct as online and on record. The teacher leads a lesson on the blackboard and interacts with students only through chat. Each lesson has a summary, materials on the topic, theory, and homework. Recordings and materials of all classes are available on the course page. The teacher participates in the educational process. Some tasks are checked automatically, and some are reviewed by the teacher, who gives feedback.
The audience of this webinar course page is students of 0-11 grades and their parents. Children are fully or partially homeschooled.
The webinar course is сonduct as online and on record. The teacher leads a lesson on the blackboard and interacts with students only through chat. Each lesson has a summary, materials on the topic, theory, and homework. Recordings and materials of all classes are available on the course page. The teacher participates in the educational process. Some tasks are checked automatically, and some are reviewed by the teacher, who gives feedback.
The audience of this webinar course page is students of 0-11 grades and their parents. Children are fully or partially homeschooled.
The problem
We received feedback from users of 0-5 grades that the webinar block is invisible because it looks like the other blocks. It also doesn't have a special state at the moment when the student needs to connect to the lesson, and the banner above the webinar makes the situation worse. The webinar on this page is not prioritized as it should be.
We received feedback from users of 0-5 grades that the webinar block is invisible because it looks like the other blocks. It also doesn't have a special state at the moment when the student needs to connect to the lesson, and the banner above the webinar makes the situation worse. The webinar on this page is not prioritized as it should be.
There is also a problem that the position of the materials is controversial, as it takes up too much space and the theory with homework position remains somewhere below. It turns out that the important part does not fit in the viewport (most students use a laptop) and because of this, students missed important information, didn't do their homework, and came to class unprepared (based on parents' complaints that they didn't see the block). It was necessary to move the information, saving all the blocks and their states.
Summary:
Summary:
- the webinar block is invisible and had a non-priority position on the screen;
- viewport doesn't include important information for students with laptops;
- students miss homework and come to class unprepared.
Solution
At first, I set priorities and collected all possible states of this block. It's easier to understand the whole logic.
At first, I set priorities and collected all possible states of this block. It's easier to understand the whole logic.
I redesigned the blocks according to the grid and I came to the idea that information can not only be moved higher but also improve the external recognition of interface elements. For example, a webinar can be made visually more like a video. Also, I highlighted the main blocks — a webinar, homework, and theory.
Blocks with summary and materials were moved below, under the main blocks, because the height of these blocks changes depending on the amount of text.
Design
This interface is for elementary school children, so I have added larger blocks and beautiful icons. Also, I added the fox, his mood changes depending on the state of the webinar and now states looks more clearly. A summary and materials no longer take too much space, and even if the list is large, then part of it will be visible in the viewport.
This interface is for elementary school children, so I have added larger blocks and beautiful icons. Also, I added the fox, his mood changes depending on the state of the webinar and now states looks more clearly. A summary and materials no longer take too much space, and even if the list is large, then part of it will be visible in the viewport.
Design validation
To understand that the new solution is good, I tested it on 10 children of company employees who did not see the old and new designs. I showed the old version to the 5 children and showed the new version to the other 5 children and asked questions. In the new version of the page, children found the requested blocks faster and mentioned a more friendly environment.
To understand that the new solution is good, I tested it on 10 children of company employees who did not see the old and new designs. I showed the old version to the 5 children and showed the new version to the other 5 children and asked questions. In the new version of the page, children found the requested blocks faster and mentioned a more friendly environment.
Designing all other screens and states.
Release and Results
The release was carried out by a/b testing. The new design rolled out along with the new catalog to 20% of users. We received positive feedback and fixed small bugs from the development side (for some reason, the content in the blocks did not catch up in all courses). Then a release was made to all users, and the reaction was positive. Result of the release: feedback with problems finding a webinar block stopped coming, and the count of undone homework decreased.
The release was carried out by a/b testing. The new design rolled out along with the new catalog to 20% of users. We received positive feedback and fixed small bugs from the development side (for some reason, the content in the blocks did not catch up in all courses). Then a release was made to all users, and the reaction was positive. Result of the release: feedback with problems finding a webinar block stopped coming, and the count of undone homework decreased.
