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

Заказчик

Сеть лингвистических центров «Талисман».

Задача

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

Концепция

Стиль сайта

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

Основные цвета сайта

Цвет детских курсов 

Цвет курсов для взрослых, ссылок, элементов управления и Call to Action

Цвет курса для организаций

Цвет вспомогательных элементов оформления

Талисманы

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

У каждого курса и каждого возраста есть свой Талисман на сайте. Их внешний вид и поведение зависят от возраста и целей аудитории. 

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

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

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

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

Иконки

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

Сайт

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

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

Мы выделили отдельный блок про преимущества курсов Талисмана. В нём есть информация про успехи, которых достигнут студенты: с видео, текстом и ссылкой на страницу с подробной информацией. 

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

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

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

Также на главной странице можно оставить заявку на тестирование.

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

На странице представлено подробное описание курса и того, что в него входит.

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

Также мы сделали мобильную версию сайта.

Результаты 

Количество заявок с нового сайта выросло в 4,67 раза.

За год использования сайта продуктовый трафик вырос в 4 раза.

Талисманы используют в работе с клиентами, в т. ч. в личных кабинетах педагогов и учеников как мотиваторы и виртуальные ачивки.