Разработка концепции дизайна нового сайта для центра "Талисман"
Концепция
Стиль сайта
Дизайн сайта должен вызывать приятные эмоции, быть дружелюбным и тактильным. Поэтому мы выбрали яркий стиль с активным паттерном, цветами и жирным шрифтом.
Основные цвета сайта
Цвет детских курсов
Цвет курсов для взрослых, ссылок, элементов управления и Call to Action
Цвет курса для организаций
Цвет вспомогательных элементов оформления
Талисманы
В основу концепции сайта легла идея Талисманов. Они перекликаются с названием компании и создают дружелюбную атмосферу на сайте. Талисманы помогают ориентироваться по сайту, обращают внимание на нужную информацию, дают советы в учёбе.
У каждого курса и каждого возраста есть свой Талисман на сайте. Их внешний вид и поведение зависят от возраста и целей аудитории.
Брендирование курса
Каждому курсу соответствует один цвет, который используется для его внутреннего брендинга. На блоках используются контрастные управляющие элементы, фотографии и Талисманы.
Фирменные паттерны
Для дополнительного оформления используются фоны с паттернами из колец и линий. Есть два типа фирменных паттернов с общими правилами:
Иконки
Мы использовали округлые иконки, нарисованные жирной линией без заливки. Для детских курсов подойдут более округлые формы с имитацией объёма, для врослых — менее округлые и более строгие.
Сайт
Мы проанализировали аудиторию, пообщались с клиентами языковых центров, в результате решили перестроить подачу информации на сайте — спроектировали его как историю, которую посетитель может читать как рассказ. Каждый тезис подкрепили фактами, видео и фотографиями, чтобы пользователи могли найти всю нужную информацию на сайте.
Главная страница
Мы выделили отдельный блок про преимущества курсов Талисмана. В нём есть информация про успехи, которых достигнут студенты: с видео, текстом и ссылкой на страницу с подробной информацией.
У нас есть отдельный блок про преподавателей. В нём мы рассказываем, как их отбираем. У каждого преподавателя можно узнать стаж, опыт работы, с кем он работает и в чём силён.
Мы отрисовали карту: фон и цвет дорог уведены в серый цвет, а парки и вода сделаны яркими акцентными цветами. Это поддерживает общий стиль сайта, в котором белое пространство и цветные элементы играют на контрасте. Также мы отрисовали геотеги.
На сайте есть видео с демонстрацией учебного процесса и отзывами студентов, рассказывающих о преимуществах центра, особенностях курсов. Благодаря видеоотзывам возникает чувство эмпатии и повышается доверие к центру. Мы предлагаем беззвучно проигрывать видео при наведении на отзыв, а при клике расширить видео до полного размера и включать звук.
Также на главной странице можно оставить заявку на тестирование.
Страница курса
На странице представлено подробное описание курса и того, что в него входит.
В левом блоке рядом с предложением записаться на тест находится информация о периодичности и длительности занятий. На макетах есть отдельный наглядный блок об учебниках. О каждом учебнике можно узнать подробнее и почитать отзывы. Мы сделали блок об экзаменах Кембриджа и личный кабинет, в котором родители могут видеть оценки своих детей.
Также мы сделали мобильную версию сайта.
Результаты
Количество заявок с нового сайта выросло в 4,67 раза.
За год использования сайта продуктовый трафик вырос в 4 раза.
Талисманы используют в работе с клиентами, в т. ч. в личных кабинетах педагогов и учеников как мотиваторы и виртуальные ачивки.
Полный текст статьи читайте на CMS Magazine
