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.
Popular materials are gathered and shown together. It helps self-development and allows to build relationship with coworkers.
—Have you seen Tschohl’s latest lecture in the Virtual School?
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.
Collections help explore a specific topic in-depth.
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.
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.
- Pavel Gerasimchuk
- Maksim Rozov
- Alena Sofina
- Sergey Kostov
- Maria Pavlova
- Anastasia Ageeva
- Zorigto Sansaraymayev
- Alyona Malashenko
- Dmitry Muratov
- Diana Shamba
- Alexandra Novikova
- Karolina Sokolova