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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эмиль Ахтямов, директор digital-агентства «Паравеб»
0
38 комментариев
Написать комментарий...
Сидор

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

Ответить
Развернуть ветку
paraweb
Автор

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

Ответить
Развернуть ветку
Сидор

Есть регламент Минобра, что подобные документы должны быть представлены именно в виде текстовой гиперссылки?

Ответить
Развернуть ветку
Амбиент Музыкантов

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

Ответить
Развернуть ветку
Екатерина Коваленок

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

Ответить
Развернуть ветку
Екатерина Коваленок

:)

Ответить
Развернуть ветку
paraweb
Автор

Спасибо! 

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Павел Новайкин

Очень крутой сайт вышел! Хоть я и не абитуриент, но сайт буквально затянул на нём остаться, потыкать на кнопочки, посмотреть анимации. Супер :) 

Ответить
Развернуть ветку
paraweb
Автор

Спасибо, Павел!

Ответить
Развернуть ветку
Alex Ondre
Ответить
Развернуть ветку
paraweb
Автор

Ну как минимум жюри Tagline awards и CSSDA с вами не согласятся

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
paraweb
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Егор Ермаков

"Tagline кто такие?"

На этом можно закончить

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Artem Petrenkov

Есть предположение, что лет через 5-10 смайлики в стиле Эппла могут морально устареть, а на сайте они так и останутся.

Ответить
Развернуть ветку
paraweb
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
paraweb
Автор

Целевая аудитория пока реагирует хорошо. Вуз всегда может заменить такие элементы, если сочтет их устаревшими. А за скрин спасибо, это интересное наблюдение.

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Evgeniy Onegin

5-10 лет и сайт надо будет менять. Посмотрите на большинство сайтов, которым 10 лет без обновлений. Они не то что морально устарели, их давно утилизировать нужно. 

Ответить
Развернуть ветку
Artem Petrenkov

Одному craigslist.org всё нипочём.

Ответить
Развернуть ветку
Evgeniy Onegin

Немного скучноват на вид, чисто из-за цветовой схемы. Но с другой стороны, все понятно, все легко. Может для будущих инженеров большего и не нужно.. хотя можно было фантастики добавить, как никак создают будущее. Хороший, добротный кейс, не более. На бехансе таких тьма тьмущая:)
P.s. очень бесит бестолковая анимация, ради анимации. Но очень радует космонавт, залип летая курсором вокруг:) 

Ответить
Развернуть ветку
Николай Замотаев
P.s. очень бесит бестолковая анимация, ради анимации. Но очень радует космонавт, залип летая курсором вокруг:)

Ещё кнопочка "поступить" выбешивает на телефоне, мало того что анимированная и большая, так ещё и висит "под пальцами".

(вот реально, меня эти кнопки на сайтах - что "позвоните нам", что вот такое, что другие подобные бесят. сидишь, читаешь, и тут оно начинает дёргаться и отвлекать. хуже только открывающийся чат с имитацией неестественного интеллекта и "ой, давайте мы вас проконсультируем". ну и "подпишитесь на нас в соцсетях", пока не подпишетесь - будем насиловать вас попапом и мешать читать. Да и когда подпишетесь тоже, только вы ещё об этом не знаете).

Ответить
Развернуть ветку
paraweb
Автор

Николай, спасибо за подробное, корректное и аргументированное пользовательское мнение. Возьмем в копилку!

Ответить
Развернуть ветку
paraweb
Автор

Спасибо! Согласны, есть еще много вариантов, как обыграть тему

Ответить
Развернуть ветку
Коворкинг BLOKS

Только я вижу член под капюшоном? 

Ответить
Развернуть ветку
paraweb
Автор

Похоже на то

Ответить
Развернуть ветку
Сидор

А вот тут что случилось с буквой "И" в слове "Бакалавриат? Сместить так, чтобы она была полностью белой – непосильная задача?

Ответить
Развернуть ветку
paraweb
Автор

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

Ответить
Развернуть ветку
Николай Замотаев

Похоже на метку даты/времени в видеорегистраторах :)

Ответить
Развернуть ветку
Kraftwerk

По что фотографии зелёнкой облили?

Ответить
Развернуть ветку
лол лолов

А что по конверсиям?

Ответить
Развернуть ветку
BLVCK SQUARE

Извите конечно, но что поменялось?
Мое мнение: Старый пердолинг, с новой обтяжкой, не иначе🤮

Ответить
Развернуть ветку
Сидор

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

Неужели никого их принимающих этот сайт и у вас не возникло вопросов - нафига делать так с буквой "и"?  
В чем посыл такого недобелизны буквы "и"

Ответить
Развернуть ветку
paraweb
Автор

Сайт при приемке тщательно проверялся и согласовывался. С буквой все в порядке, поэтому вопросов и не возникло

Ответить
Развернуть ветку
35 комментариев
Раскрывать всегда