Шаблоны «Виртуальной школы» Корпоративного университета Сбербанка

Описание
Задача.
Сделать образовательный сервис для сотрудников удобнее и системнее.


У Сбербанка есть Корпоративный университет — образовательная система, созданная для сотрудников банка. Это настоящий университет со своим кампусом: там более сотни учебных программ, лекции читают преподаватели из лучших бизнес-школ мира, проводятся экзамены и защищаются проекты.

«Виртуальная школа» — дистанционный портал этого университета. На сайте много материалов: обширная онлайн-библиотека деловой литературы, электронные курсы, статьи, видео, подкасты и подборки.

Мы задизайнили новый интерфейс сайта, все упростили, систематизировали и навели порядок в структуре.

Главное — на главную

На главной странице собраны свежие анонсы, программы, которые проходит студент, и учебные материалы. Никаких личных кабинетов, все на виду! Студенту не нужно вспоминать, где он остановился в прошлый раз — на карточке программы уже все написано.

Для тех, кто попал в школу впервые и не знает, с чего начать, подобраны персональные рекомендации.



База знаний. Невероятно наглядная

На сайте хранится огромное количество пособий. Книги, журналы, статьи, видео, подкасты! Мы их внимательно изучили, придумали стройную классификацию и задизайнили внешний вид. Теперь сразу понятно, где книга, где подкаст, а где интерактив.

Чтобы вдохновить студентов учиться по материалам разных типов, все карточки отображаются вместе. Но отсортировать и отфильтровать нужный формат — дело одного клика.

sberbank-school.ru
Самые свежие материалы — сверху. Студенты узнают о новинках с помощью рассылки
На всякий случай созданы карточки разных размеров
При наведении мышки лекторы оживают

Рекомендации и подборки

На основе учебных программ и уже освоенных материалов для каждого студента составляются индивидуальные рекомендации.

Книги, статьи и видео подбираются для разных учебных направлений и уровней подготовки.

Это все мне?!

Изучить какую-то конкретную тему помогают подборки.

Просто бомба!

Умные паттерны

Для учебных программ разработана умная система паттернов. Цветом закодирован тип программы, а формой узора — уровень менеджмента, на который она рассчитана.

Крупные волны показывают, что программа предназначена для рядовых сотрудников, мелкие — для руководителей и менеджеров среднего звена, а острые зубчатые волны — для топ-менеджеров.

Макеты внутренних страниц

Для разных типов внутренних страниц задизайнены умные макеты. Уроки, мастерские, тесты, тренинги, аттестации — все одинаково удобно изучать и проходить.

Пользователь переходит к следующему уроку по структуре или ссылке в конце предыдущего. Галочками отмечаются пройденные темы
Почтовые рассылки написаны просто и понятно. В письме всегда есть кнопка с главным действием
На странице материала ничего лишнего
На страницах ошибок даже паттерн ломается!

Адаптив и гайдлайн

Сайт адаптируется к любым устройствам. Удобно решать тесты в пробке или смотреть лекцию в самолете.

Все используемые в дизайне элементы собраны и заверстаны в подробном гайдлайне.