Сайт абитуриента «не как у всех»: кейс Томского Политеха и digital-агентства «Паравеб»

Смена поколений перестала быть для вузов абстрактным выражением: университеты профессионально ведут аккаунты в TikTok и Инстаграм, изучают тренды веб-дизайна, выпускают мобильные приложения. Томский Политех — один из флагманов в работе с абитуриентами на всероссийском уровне.

Совместно с digital-агентством «Паравеб», ТПУ запустил новый сайт для абитуриентов, объединив дух нового поколения и традиции топового технического университета.

Главная страница сайта «Абитуриент ТПУ»
Главная страница сайта «Абитуриент ТПУ»

Новое «лицо» старого сайта

Томский политехнический университет, старейший технический вуз Сибири, увидел необходимость «осовременить» свой сайт для поступающих, чтобы соответствовать запросам нового поколения к «цифровому лицу» организации.

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

Мария Моисеенко, начальник управления корпоративных и внешних связей ТПУ

— У ТПУ уже была запущена рекламная кампания «Инженеры придумали все», ориентированная на ребят-технарей. Потенциальная аудитория сайта — это, в основном, молодежь от 14 до 23 лет, играющая в компьютерные и мобильные игры, активно использующая соцсети. Сайт должен быть интересен пользователям, находящимся на волне этих информационных трендов.

Эмиль Ахтямов, директор digital-агентства «Паравеб»

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

Страница бакалавриата/специалитета и калькулятор ЕГЭ
Страница бакалавриата/специалитета и калькулятор ЕГЭ

Разница аудиторий

Объединение под одним сайтом всех групп поступающих вызвало вопрос — а будет ли отличаться подача материала для этих групп? Ведь каждый приходит на сайт за «своей» информацией.

Так, в разделе бакалавриата размещается как можно больше общих сведений, ведь сюда в основном заходят те, кто еще не учился в Томском политехе. Им важно и про программу узнать, и про кампус, уточнить даты подачи документов, выбрать траекторию обучения в вузе. Здесь уместно использовать элементы геймификации, чат-бот, интерактивные эмодзи, чтобы «подсвечивать» ключевые элементы страницы.

Раздел с направлениями подготовки
Раздел с направлениями подготовки

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

— На старте мы планировали делать значительно более унифицированный по содержанию сайт. Думали, все будет проще. Но запросы уточнялись и команда генерировала множество идей, как сделать по-настоящему круто: динамические 3D-объекты, параллакс-эффекты, карты глубины страницы, анимации в игровом стиле и многое другое. Распределяли между разделами, где будет уместнее выглядеть. Работы прибавилось.

Эмиль Ахтямов, директор digital-агентства «Паравеб»

Взгляд изнутри

По правилам набора, каждый абитуриент может подать документы максимум в 5 учебных заведений. Задачей Паравеба было сделать такой сайт, который выделил бы ТПУ в этой «топовой» пятерке и замотивировал глубже изучить направления Политеха, его программы, место в рейтингах и историю. Конечно, выделиться — не значит, что человек гарантированно сюда поступит, но с задачей вовлечения сайт однозначно должен справляться.

Проверить, насколько правильной была ставка команды на использование игровых трендов, помогли фокус-группы. Исследование проводили с девушками и юношами 14-16 лет, отдельно — со студентами разных курсов. Фиксировали, что участники отмечали как удобный или неудобный в использовании формат, как реагировали на интерактивы в разных разделах, что говорили про дизайн.

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

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

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

Раздел с преимуществами вуза
Раздел с преимуществами вуза

«Автопилот» управления сайтом

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

Также для дизайнеров и контент-менеджеров ТПУ были составлены подробные инструкции, как оформлять различные публикации, чтобы они не «выбивались» из общего стиля. Например, как в фотографии добавить параллакс (эффект трехмерного изображения), как визуально оформлять разные разделы, насколько «молодежными» могут быть иллюстрации к новостям и т.д.

Раздел новостей в десктопной и мобильной версии
Раздел новостей в десктопной и мобильной версии

Админ-панель также позволяет создавать новые структуры на сайте в пару кликов, автоматически «подтягивать» на страницы нужные эффекты анимации. Дизайнеры Паравеба сгенерировали целую библиотеку динамических 3D-эмодзи и отдельных элементов на все случаи университетской жизни, чтобы контент-менеджерам не пришлось ничего дополнительно моделировать.

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

Эмиль Ахтямов, директор digital-агентства «Паравеб»

Результаты работы

Университетам, в которых сильны традиции обучения сложным наукам, бывает нелегко решиться на более свободный стиль общения с абитуриентами, есть сомнения насчет «несерьезности».

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

Эмиль Ахтямов, директор digital-агентства «Паравеб»

Паравебом также была проработана и мобильная версия сайта: адаптировали дизайн, верстку, оптимизировали вес страниц, скорость воспроизведения анимаций, динамичность элементов.

Раздел с направлениями подготовки в мобильной версии сайта
Раздел с направлениями подготовки в мобильной версии сайта

Вся работа над сайтом заняла 8 месяцев, начиная от концепции и до финального запуска. Что было сделано за это время:

  • Переработали структуру уже имеющегося, но устаревшего сайта, и представили в одном месте все направления обучения в ТПУ;

  • Сделали для бакалавриата, специалитета, магистратуры и аспирантуры различающийся дизайн разделов с собственными интерактивными «фишками» направлени;

  • Упростили и автоматизировали работу с контентом для специалистов вуз;

  • Проработали добавление новых разделов, конструирование страниц и оформление их в стилистике сайта без программировани;

  • Разработали сложные шаблоны верстки для страниц новостей и мероприяти;

  • Создали библиотеки элементов, которые можно использовать для конструирования и оформления страниц в едином стил;

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

Еще на стадии дизайна Абитуриент ТПУ получил «серебро» Tagline Awards и был отмечен на конкурсе CSS DA. Команда была рада, что такой «нетипичный» и смелый подход к сайту абитуриента вуза был высоко оценен даже через «чистый» статичный дизайн без верстки.

Сайт Абитуриента ТПУ получился по-настоящему крутым. Он сильно отличается от всех своих конкурентов, особенно на российском образовательном рынке. И это невозможно было бы сделать, если бы ТПУ, один из топовых вузов России, не осмелился запустить такое сильное и смелое решение. За это стоит сказать им спасибо.

Эмиль Ахтямов, директор digital-агентства «Паравеб»
35
38 комментариев

Дальше первой картинки идет типичная структура сайта из 2000 с   бесконечными гиперссылками.  И так до конца страницы
Что тут революционного вы сделали?

6
Ответить

Конкретно на вашем скрине раздел с официальными документами приемной кампании, необходимые сайту образовательной организации, без них никак. Инновации в менее официальных и регламентированных законодательством разделах

6
Ответить

Вы смотрите, аккуратней. Эта дорожка опасна.

5
Ответить

Ох, крутой сайт и интересные решения, ощущается рост! Сразу видно, что он «идет в ногу со временем» и главное - сайт технического вуза. Потенциальный абитуриент может найти все, что ему нужно. В свое время, когда поступала, я вообще ничего найти на сайте не могла, да и не завлекало :)
Аж на секунду перепоступить захотелось...

3
Ответить

Спасибо! 

Ответить

Комментарий недоступен

2
Ответить