Сайт абитуриента «не как у всех»: кейс Томского Политеха и digital-агентства «Паравеб»
Смена поколений перестала быть для вузов абстрактным выражением: университеты профессионально ведут аккаунты в TikTok и Инстаграм, изучают тренды веб-дизайна, выпускают мобильные приложения. Томский Политех — один из флагманов в работе с абитуриентами на всероссийском уровне.
Совместно с digital-агентством «Паравеб», ТПУ запустил новый сайт для абитуриентов, объединив дух нового поколения и традиции топового технического университета.
Новое «лицо» старого сайта
Томский политехнический университет, старейший технический вуз Сибири, увидел необходимость «осовременить» свой сайт для поступающих, чтобы соответствовать запросам нового поколения к «цифровому лицу» организации.
— При постановке задачи мы понимали, что информация сегодня стоит на 3 китах: доступность, удобство и красота. Визуальная часть задумывалась с учетом последних тенденций web-дизайна, мы ориентировались на лучшие образцы, в том числе зарубежных вузов. Сложность была в том, чтобы совместить нормативные требования к сайтам образовательных организаций и сделать его легким, полезным, интересным.
— У ТПУ уже была запущена рекламная кампания «Инженеры придумали все», ориентированная на ребят-технарей. Потенциальная аудитория сайта — это, в основном, молодежь от 14 до 23 лет, играющая в компьютерные и мобильные игры, активно использующая соцсети. Сайт должен быть интересен пользователям, находящимся на волне этих информационных трендов.
Требовалось переработать прежнюю структуру сайта для поступающих и объединить на одной «территории» все направления для поступления: бакалавриат, специалитет, магистратуру и аспирантуру. Важно, чтобы сайт был полезным и интересным как ребятам, которые закончат школу еще только через несколько лет, так и поступающим уже сегодня.
Разница аудиторий
Объединение под одним сайтом всех групп поступающих вызвало вопрос — а будет ли отличаться подача материала для этих групп? Ведь каждый приходит на сайт за «своей» информацией.
Так, в разделе бакалавриата размещается как можно больше общих сведений, ведь сюда в основном заходят те, кто еще не учился в Томском политехе. Им важно и про программу узнать, и про кампус, уточнить даты подачи документов, выбрать траекторию обучения в вузе. Здесь уместно использовать элементы геймификации, чат-бот, интерактивные эмодзи, чтобы «подсвечивать» ключевые элементы страницы.
А вот у будущих аспирантов в разделе уже другая картина: у них особый порядок подачи документов и формат экзаменов. Это взрослые поступающие, большинство хорошо знают кампус ТПУ, отлично представляют себе, на какое направление будут поступать — поэтому в таком разделе не нужна лишняя интерактивность, все должно быть более лаконично.
— На старте мы планировали делать значительно более унифицированный по содержанию сайт. Думали, все будет проще. Но запросы уточнялись и команда генерировала множество идей, как сделать по-настоящему круто: динамические 3D-объекты, параллакс-эффекты, карты глубины страницы, анимации в игровом стиле и многое другое. Распределяли между разделами, где будет уместнее выглядеть. Работы прибавилось.
Взгляд изнутри
По правилам набора, каждый абитуриент может подать документы максимум в 5 учебных заведений. Задачей Паравеба было сделать такой сайт, который выделил бы ТПУ в этой «топовой» пятерке и замотивировал глубже изучить направления Политеха, его программы, место в рейтингах и историю. Конечно, выделиться — не значит, что человек гарантированно сюда поступит, но с задачей вовлечения сайт однозначно должен справляться.
Проверить, насколько правильной была ставка команды на использование игровых трендов, помогли фокус-группы. Исследование проводили с девушками и юношами 14-16 лет, отдельно — со студентами разных курсов. Фиксировали, что участники отмечали как удобный или неудобный в использовании формат, как реагировали на интерактивы в разных разделах, что говорили про дизайн.
Интересно, что результаты работы фокус-групп подтвердили гипотезу ученых, изучающих сайты университетов: школьники действительно оценивают сайт вуза как аргумент «за» или «против» поступления, стилистика и качество исполнения «цифрового лица» университета влияет на отношение к предлагаемым образовательным программам.
Результаты работы фокус-групп обсуждались с представителями разных подразделений университета. Томский политех неизменно проявлял интерес к тому, какие идеи высказывает команда Паравеба, что интересного заметили участники фокус-групп, активно участвовал в разработке дизайн-концепции и вносил собственные идеи.
Однако назревал важный для всех вопрос: смогут ли рядовые сотрудники университета сами управлять многообразием разделов и контента на сайте, не нарушая его целостность.
«Автопилот» управления сайтом
Для того, чтобы специалистам ТПУ было удобно работать с сайтом и оставаться в рамках единой стилистики, была проработана админ-панель по работе с контентом, чтобы всем содержанием сайта можно было управлять без специальных технических знаний.
Также для дизайнеров и контент-менеджеров ТПУ были составлены подробные инструкции, как оформлять различные публикации, чтобы они не «выбивались» из общего стиля. Например, как в фотографии добавить параллакс (эффект трехмерного изображения), как визуально оформлять разные разделы, насколько «молодежными» могут быть иллюстрации к новостям и т.д.
Админ-панель также позволяет создавать новые структуры на сайте в пару кликов, автоматически «подтягивать» на страницы нужные эффекты анимации. Дизайнеры Паравеба сгенерировали целую библиотеку динамических 3D-эмодзи и отдельных элементов на все случаи университетской жизни, чтобы контент-менеджерам не пришлось ничего дополнительно моделировать.
— Мы не хотели отдавать университету просто «красивые картинки», мы стремились максимально упростить работу тем, кто в дальнейшем будет заниматься сайтом, множеству людей в разных ролях. С одной стороны, это дополнительная задача для команды разработки, с другой — важный для нас пункт, повышающий качество создаваемого проекта.
Результаты работы
Университетам, в которых сильны традиции обучения сложным наукам, бывает нелегко решиться на более свободный стиль общения с абитуриентами, есть сомнения насчет «несерьезности».
— Уникальность сайта абитуриента ТПУ еще и в том, что Томский Политех, сильнейший технический вуз Сибири, согласился отойти от традиционной «сдержанной» подачи, и начал использовать элементы современной цифровой среды, привычной новому поколению поступающих.
Паравебом также была проработана и мобильная версия сайта: адаптировали дизайн, верстку, оптимизировали вес страниц, скорость воспроизведения анимаций, динамичность элементов.
Вся работа над сайтом заняла 8 месяцев, начиная от концепции и до финального запуска. Что было сделано за это время:
Переработали структуру уже имеющегося, но устаревшего сайта, и представили в одном месте все направления обучения в ТПУ;
Сделали для бакалавриата, специалитета, магистратуры и аспирантуры различающийся дизайн разделов с собственными интерактивными «фишками» направлени;
Упростили и автоматизировали работу с контентом для специалистов вуз;
Проработали добавление новых разделов, конструирование страниц и оформление их в стилистике сайта без программировани;
Разработали сложные шаблоны верстки для страниц новостей и мероприяти;
Создали библиотеки элементов, которые можно использовать для конструирования и оформления страниц в едином стил;
- Настроили анимации кнопок и интерактивных элементов в стилистике игр и популярных мобильных приложений.
Еще на стадии дизайна Абитуриент ТПУ получил «серебро» Tagline Awards и был отмечен на конкурсе CSS DA. Команда была рада, что такой «нетипичный» и смелый подход к сайту абитуриента вуза был высоко оценен даже через «чистый» статичный дизайн без верстки.
— Сайт Абитуриента ТПУ получился по-настоящему крутым. Он сильно отличается от всех своих конкурентов, особенно на российском образовательном рынке. И это невозможно было бы сделать, если бы ТПУ, один из топовых вузов России, не осмелился запустить такое сильное и смелое решение. За это стоит сказать им спасибо.
Дальше первой картинки идет типичная структура сайта из 2000 с бесконечными гиперссылками. И так до конца страницы
Что тут революционного вы сделали?
Конкретно на вашем скрине раздел с официальными документами приемной кампании, необходимые сайту образовательной организации, без них никак. Инновации в менее официальных и регламентированных законодательством разделах
Есть регламент Минобра, что подобные документы должны быть представлены именно в виде текстовой гиперссылки?
Вы смотрите, аккуратней. Эта дорожка опасна.
Ох, крутой сайт и интересные решения, ощущается рост! Сразу видно, что он «идет в ногу со временем» и главное - сайт технического вуза. Потенциальный абитуриент может найти все, что ему нужно. В свое время, когда поступала, я вообще ничего найти на сайте не могла, да и не завлекало :)
Аж на секунду перепоступить захотелось...
:)
Спасибо!
Комментарий недоступен
Очень крутой сайт вышел! Хоть я и не абитуриент, но сайт буквально затянул на нём остаться, потыкать на кнопочки, посмотреть анимации. Супер :)
Спасибо, Павел!
Ну как минимум жюри Tagline awards и CSSDA с вами не согласятся
Комментарий недоступен
Вы, наверное, имели ввиду сайт международной премии в области веб-дизайна CSSDA. Теряемся в догадках, чьим клоном может быть их сайт. Предполагаем, что все-таки ничьим.
Комментарий недоступен
"Tagline кто такие?"
На этом можно закончить
Комментарий недоступен
Есть предположение, что лет через 5-10 смайлики в стиле Эппла могут морально устареть, а на сайте они так и останутся.
Вы совершенно точны в своем предположении, как раз на этот случай предусмотрена возможность убирать такие элементы или заменять их на другие
Комментарий недоступен
Целевая аудитория пока реагирует хорошо. Вуз всегда может заменить такие элементы, если сочтет их устаревшими. А за скрин спасибо, это интересное наблюдение.
Комментарий недоступен
5-10 лет и сайт надо будет менять. Посмотрите на большинство сайтов, которым 10 лет без обновлений. Они не то что морально устарели, их давно утилизировать нужно.
Одному craigslist.org всё нипочём.
Немного скучноват на вид, чисто из-за цветовой схемы. Но с другой стороны, все понятно, все легко. Может для будущих инженеров большего и не нужно.. хотя можно было фантастики добавить, как никак создают будущее. Хороший, добротный кейс, не более. На бехансе таких тьма тьмущая:)
P.s. очень бесит бестолковая анимация, ради анимации. Но очень радует космонавт, залип летая курсором вокруг:)
Ещё кнопочка "поступить" выбешивает на телефоне, мало того что анимированная и большая, так ещё и висит "под пальцами".
(вот реально, меня эти кнопки на сайтах - что "позвоните нам", что вот такое, что другие подобные бесят. сидишь, читаешь, и тут оно начинает дёргаться и отвлекать. хуже только открывающийся чат с имитацией неестественного интеллекта и "ой, давайте мы вас проконсультируем". ну и "подпишитесь на нас в соцсетях", пока не подпишетесь - будем насиловать вас попапом и мешать читать. Да и когда подпишетесь тоже, только вы ещё об этом не знаете).
Николай, спасибо за подробное, корректное и аргументированное пользовательское мнение. Возьмем в копилку!
Спасибо! Согласны, есть еще много вариантов, как обыграть тему
Только я вижу член под капюшоном?
Похоже на то
А вот тут что случилось с буквой "И" в слове "Бакалавриат? Сместить так, чтобы она была полностью белой – непосильная задача?
По задумке дизайнеров она и не должна была быть полностью смещена. В любом случае, спасибо, что зашли вглубь сайта и оставили комментарии со скринами!
Похоже на метку даты/времени в видеорегистраторах :)
По что фотографии зелёнкой облили?
А что по конверсиям?
Извите конечно, но что поменялось?
Мое мнение: Старый пердолинг, с новой обтяжкой, не иначе🤮
Задумка то так себе. "Кривоватость" буквы для меня прям сигнал - раз с буквой так плохо, то и все остальное сделано на "от.............сь"
Неужели никого их принимающих этот сайт и у вас не возникло вопросов - нафига делать так с буквой "и"?
В чем посыл такого недобелизны буквы "и"
Сайт при приемке тщательно проверялся и согласовывался. С буквой все в порядке, поэтому вопросов и не возникло