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

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

Клиент

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

Задача

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

Концепция

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

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

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

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

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

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

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

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

Прототипы

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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