5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F

Образователь­ные проекты Mail.Ru

Клиент

С 2012 года компания открыла шесть образовательных проектов для программистов. Это занятия на 2 года для студентов МГУ, МГТУ, МФТИ, Политеха и МИФИ. Курсы помогают студентам быстрее освоить профессию, университетам — давать актуальные знания, а компаниям — принимать специалистов, готовых к работе без повторного обучения.

Задача

Занятия идут в пяти вузах, и со временем проектов будет больше. Они отличаются названиями, сайтами, по стилю. Студенты в них запутались, поэтому пришло время объединиться — создать общий сайт и постепенно отказаться от остальных. Мы продумали структуру, содержание, личный кабинет и нарисовали все страницы.

Концепция

Страница об университетских проектах Mail.Ru Group
Короткие карточки-презентации проектов
Переход на сайт проекта

Работа шла в два этапа: разработка открытой части сайта и личного кабинета. Сперва мы продумали публичную часть, размышляя, для кого и каким должен быть сайт. Захотели двигаться в сторону презентации образовательного направления Mail.Ru Group — задумали одну страницу с краткими карточками каждого проекта, но этого оказалось мало.

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

Техносфера
Технопарк
Технотрек
Технополис

Образовательные проекты Mail.Ru

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

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

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

Прототипы

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

Публичная часть

Закрытая часть

Личный кабинет состоит из главной и страниц для каждого проекта. Их содержание меняется в зависимости от статуса: «поступаю», «жду начало отбора», «прохожу тест», «прохожу собеседование», «поступил», «не поступил». В прототипах показали первые два и систему оповещений.

Главная личного кабинета — карточки с курсами: записывайся сразу или смотри больше о поступлении
После подачи заявки главная меняется — теперь следить за поступлением можно в «Моих курсах»
Изменение данных по карточкам — выбирай категорию, редактируй или привязывай соцсети для быстрой авторизации
Страница курса для студентов, которые еще не отправили заявку на поступление
Подача заявки на обучение в первый раз
После каждого этапа поступления показываем результат

Дизайн

Выбрав неформальную подачу в текстах, мы поддержали настроение в макетах. Стиль придумали сами, учитывая стандарты Mail.Ru. Элементы интерфейса сделали нейтральными, чтобы они подходили для цветных фонов всех проектов.

Стремились быть ближе к студентам и в разных форматах повторяли, что программирование — это сложно, но круто. Будут испытания, нервы, победы и неудачи. Здесь ждут амбициозных. Визуально — комбинировали корпоративный стиль Mail.Ru и элементы каждого проекта.

Сроки были сжаты, но дизайнер не отпустил проект без адаптива — всё успел, всё подготовил.

Страница проекта

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

Единая структура страниц для всех проектов

Личный кабинет

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

Вёрстка и программирование

Следили за бюджетом и сроками проекта, поэтому анимацию оставили без хитростей, подобрав несколько аккуратных эффектов.

Отправьте заявку или напишите письмо selling@nimax.ru

Вместе мы подберём решение и подходящий инструмент

IBS
IBS
Ролик про аутсорсинг и цифровой HR от IBS.
эксплейнер, концепция, сценарий, съёмка, монтаж, цветокоррекция, озвучание, графика
Фора Банк
Сайт московского банка.
концепция, архитектура, дизайн, разработка
Conde Nast, SEO
Делаем SEO для крупнейших глянцевых СМИ России.
SEO
Промсвязьбанк
Видео о приложении Промсвязьбанка.
эксплейнер, концепция, сценарий, съёмка, монтаж, цветокоррекция, озвучание, графика, серия