Virtual School templates for Sberbank Corporate University

Overview
Task:
to make an employee educational service more convenient and organized.


Sberbank has a Corporate University, an educational system created for the bank’s employees. It’s a real university with it’s own campus that offers over a hundred educational programs, invites lecturers from world’s best business schools, and requires its students to take exams and defend projects.

The Virtual School is the university’s remote education portal. The website contains a variety of materials: a vast online library of business literature, electronic courses, articles, videos and podcasts.

We created a new interface for the website, organized the content and rearranged the structure.

Main information for the main page

The main page contains recent announcements, programs that the student is currently taking and educational materials. No account pages, all can be seen right from the start! The student doesn’t have to remember where they stopped the last time, the program’s card contains all the necessary information.

Personal recommendations were created for those who are visiting the school for the first time and don’t know where to start.



Knowledge base. Truly visual

The website contains a huge number of educational materials. Books, magazines, articles, videos, podcasts! We carefully studied them all, came up with an elegant classification system and redesigned the visual appearance. Now it’s really easy to distinguish a book from a podcast or an interactive course.

To inspire students to use different types of educational materials, all cards are displayed together, but sorting and filtering them by format can be done in one click.

sberbank-school.ru
The most recent materials are on top. Students learn about updates from emails
Cards of various sizes were created for all purposes
Lecturers come to life on mouse hover

Recommendations and collections

Previously taken educational programs and courses are used to create personal recommendations for each student.

Books, articles and videos are selected for different study areas and levels.

Is that all for me?!

Collections help explore a specific topic in-depth.

It’s a bomb!

Smart patterns

A system of patterns was developed for educational programs. Colors are used to code the type of the program while the shape the ornament denotes the target management level.

Large waves show that the program is designed for ordinary employees, small waves are for middle management and sharp toothy waves are for top managers.

Internal page mock-ups

Smart mock-ups were created for different types of internal pages. Lessons, workshops, tests, training courses, certifications—all of them are equally easy to complete.

The user moves on to the next lesson using the course structure or a link at the end of the previous lesson. Checkmarks show covered topics
Email letters are written in a simple language and always have a button for a primary action
The material page is utterly simple
On error pages even patterns break down!

Adaptive design and guidelines

The website adapts to any device making it easy to take tests in a traffic jam or watch a lecture while on the plane.

All elements used in the design are collected in a detailed guide.

art director

  • Pavel Gerasimchuk

designers

  • Maksim Rozov
  • Alena Sofina
  • Sergey Kostov
  • Maria Pavlova

technical designers

  • Anastasia Ageeva
  • Zorigto Sansaraymayev

technologist

  • Alyona Malashenko

beta tester

  • Dmitry Muratov

project managers

  • Diana Shamba
  • Alexandra Novikova
  • Karolina Sokolova
Made in 86 days