Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Digital-кейс дня

Концепция дизайна сайта для учебного центра

Вхождение в кейс дня

03 сентября ‘18

Заказчик: Сеть лингвистических центров «Талисман»
Страница кейса/результат: https://cases.beaversbrothers.ru/talisman/

Пожалуй, самая позитивная концепция дизайна сайта с Талисманами для учебного центра

Агентство-исполнитель кейса

BeaversBrothers

Мы делаем удобные, красивые и умные веб-проекты, интерфейсы, AR/VR и видео для крупных компаний. Создаём качественный, увлекательный, полезный контент и продвигаем его в социальных сетях.

1. Вводная задача от заказчика, проблематика, цели

Задача

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Стиль сайта

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

Талисманы

В основу концепции сайта легла идея Талисманов. Они перекликаются с названием компании и создают дружелюбную атмосферу на сайте. Талисманы помогают ориентироваться по сайту, обращают внимание на нужную информацию, дают советы в учёбе.

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

Брендирование курса

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

Фирменные паттерны

Для дополнительного оформления используются фоны с паттернами из колец и линий.

Иконки

Мы использовали округлые иконки, нарисованные жирной линией без заливки. Для детских курсов подойдут более округлые формы с имитацией объёма, для врослых — менее округлые и более строгие.

Сайт

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

Главная страница

  • Мы выделили отдельный блок про преимущества курсов Талисмана. В нём есть информация про успехи, которых достигнут студенты: с видео, текстом и ссылкой на страницу с подробной информацией.
  • У нас есть отдельный блок про преподавателей. В нём мы рассказываем, как их отбираем. У каждого преподавателя можно узнать стаж, опыт работы, с кем он работает и в чём силён.
  • Мы отрисовали карту: фон и цвет дорог уведены в серый цвет, а парки и вода сделаны яркими акцентными цветами. Это поддерживает общий стиль сайта, в котором белое пространство и цветные элементы играют на контрасте. Также мы отрисовали геотеги.
  • На сайте есть видео с демонстрацией учебного процесса и отзывами студентов, рассказывающих о преимуществах центра, особенностях курсов. Благодаря видеоотзывам возникает чувство эмпатии и повышается доверие к центру. Мы предлагаем беззвучно проигрывать видео при наведении на отзыв, а при клике расширить видео до полного размера и включать звук.
  • Также на главной странице можно оставить заявку на тестирование.

Страница курса

  • На странице представлено подробное описание курса и того, что в него входит.
  • В левом блоке рядом с предложением записаться на тест находится информация о периодичности и длительности занятий.
  • На макетах есть отдельный наглядный блок об учебниках. О каждом учебнике можно узнать подробнее и почитать отзывы.
  • Мы сделали блок об экзаменах Кембриджа и личный кабинет, в котором родители могут видеть оценки своих детей.

3. Результаты сотрудничества

После запуска сайта с новым дизайном:

  • в 4 раза вырос продуктовый трафик за год использования сайта,
  • в 4,67 раза увеличилось количество заявок.

4. Заключение

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

Агентство-исполнитель кейса

BeaversBrothers

Мы делаем удобные, красивые и умные веб-проекты, интерфейсы, AR/VR и видео для крупных компаний. Создаём качественный, увлекательный, полезный контент и продвигаем его в социальных сетях.