Разработали сайт для музыкальной школы в Дубае и получили на 30% больше лидов

Одна из ключевых бизнес-задач сайта — набрать первый поток учащихся, запустив сайт для сбора заявок с рекламы.

Маркетинговые задачи:

— разработать креативный сайт для сбора заявок с рекламы;

— реализовать высококонверсионные воронки с продуманным UX;

— отразить и оживить в пользовательском интерфейсе визуальные элементы, отсылающие к культурному контексту, близкому местным жителям, тем самым отстроиться от конкурентов.

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

Глобально проект был разделен на два этапа:

1. MVP на Webflow.

2. Разработка фронтенда на Next.JS + разработка бэкенда на KirbyCMS.

Дедлайн для первого релиза — 2 недели. «Сборка» выкатила MVP спустя 5 дней с момента постановки задачи: лиды клиенту нужны были «еще вчера». В качестве лидосборника первый релиз хорош, но далее проект хотелось развивать и масштабировать без ограничений конструктора.

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

За основу кастомного сайта взяли первый релиз, а точнее — его визуальную составляющую.

Разрабатывали сайт на Next.js.

1. Начали с базовой верстки, ориентировались на дизайн готовой страницы на Webflow.

2. Разработали анимации.

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

4. Протестировали.

5. Интегрировали с админкой сайта.

6. Интегрировали формы на сайте с Kommo CRM для сбора лидов.

К слову о том, почему клиент решил реализовать нетипичную навигацию между страницами. Дмитрий Панов, ex-CEO Moscow Music School и наш клиент отмечает, что многие представители арабского общества привыкли воспринимать информацию через яркие, короткие фрагменты информации. По его мнению, удерживать внимание арабской целевой аудитории сложнее, чем российской, с которой он ранее работал в проекте Moscow Music School.

Гипотезу решили проверить: провели А/B-тест, замерили поведенческие показатели и выяснили, что креативная навигация действительно увеличивает глубину просмотра и повышает конверсию в целевое действие, по сравнению с обычной навигацией.

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

Навигация на сайте Digital Renaissance — комбинация как коробочных, так и нестандартных решений.

Как отмечали ранее, сайт написан на Next.js, в котором уже есть удобная система маршрутизации с возможностью реализовать навигацию по страницам без перезагрузки. Это популярный подход, но дизайнеры решили, что страницы должны загружаться в модальных окнах, вот как это выглядит:

1. Пользователь заходит на Главную страницу.

2. Переходит на Academics.

3. Academics открывается поверх «Главной».

Если внутри Academics пользователь переходит на страницу третьего уровня, та открывается во втором окне справа, при этом «Главная» все еще находится под открытыми окнами.

Страница в модальном окне — решение нестандартное, а модалка третьего уровня — ещё более нестандартное, ведь каждое окно должно иметь свой адрес и быть привязано к человекопонятному URL.

Сначала разработчики протестировали коробочные решения — вложенные Layouts и Parallel Routes, которые есть в Next.js. Спустя несколько часов экспериментов выяснили, что решения не подходят:

Parallel Routes не дают нужного «глянца», которого ожидал заказчик: переходы между страницами недостаточно плавные, отсутствует тотальный контроль над состоянием.

Вложенные Layouts негативно повлияют на SEO, т. к. подразумевают дублирование контента. Так, на странице третьего уровня будет присутствовать код страниц второго и первого уровней. Может показаться, что этого и требует задача — да, но только в рантайме. При «сухой» начальной загрузке страницы второго или третьего уровня контент не должен дублироваться.

От коробочного решения для роутинга отказались, решив разработать собственное:

1. Создали компонент вложенных модалок.

2. Создали глобальный контекст событий: перехватили клики по ссылкам и изменения в адресной строке.

3. При смене адреса считывали, какая страница необходима, какой у нее уровень.

4. Открыли столько уровней модалок, сколько потребуется.

5. Наполнили модальные окна кастомно подгружаемым контентом, соответствующим slug URL: для academics/article-1 в модалку слева загружается страница academics, а справа — article-1.

При закрытии окон пользователем редактировали URL в адресной строке.

Такое поведение работает в рантайме — когда пользователь переходит на внутренние страницы с помощью UI сайта.

Если же пользователь изначально загружает сайт с URL второго или третьего уровня, срабатывает следующая логика:

Загружается контент только текущей страницы — для поисковиков.

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

Дополнительно продумали логику загрузки обычных страниц, так как в перспективе не все страницы будут модалками. Составили реестр страниц и категорий, которые могут быть модальными окнами. Если текущая страница не входит в этот список, в работу вступает коробочный роутинг Next.js.

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

Как отмечали ранее, сначала был реализован прототип на Webflow. За основу взяли те анимации, что уже были на лендинге. Для работы над анимациями использовали AnimeJS, — достойная замена GSAP, еще и весит меньше.

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

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

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

Один из запросов клиента — реализовать простую, понятную среду для работы с содержимым сайта.

Внутри — упорядоченная система управления сайтом, выполненная на KirbyCMS. Примечательно, что админка получилась гибкой, не перегруженной, простой в навигации, при этом функциональной, в отличие, например, от админок, реализованных на Bitrix или Wordpress с достаточно сложной заложенной по дефолту структурой. В админке на Kirby есть исключительно то, что нужно клиенту для работы с сайтом, включая модуль работы с SEO.

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

Все курсы можно отфильтровать на странице Academics. Программы классифицированы по длительности и направлению. В этом проекте «Сборка» вынесла фильтры в админку: клиент может самостоятельно включать в фильтры новые курсы, менять названия, а также добавлять и удалять сами фильтры.

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

Маркетинговые цели, достигнутые с помощью сайта:

1. Привлечение целевой аудитории: школа уже набрала первый поток студентов, количество лидов по сравнению с московским проектом выросло на 30%;

2. Увеличение вдвое конверсии в заявку на сайте за счет продуманной воронки и грамотного UX;

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