Лендинг для онлайн-школы астрологии
О проекте
К нам обратилась астролог-практик Светлана Шатаева, создатель Школы Астрологии. Мы уже несколько месяцев работаем со Светланой по направлению SMM, а теперь у неё возникла необходимость в создании Школы астрологии, где она бы могла делиться опытом и накопленными знаниями с начинающими специалистами.
Команда Вебнавтов отправилась «бороздить просторы» веб-пространства для решения этой профильной для нас задачи.
Задача
Необходимо было разработать сайт школы астрологии — для продажи курсов начинающим астрологам. Мы должны были не просто сделать информативный сайт, описывающий услуги школы, но и предусмотреть возможность записи на обучение, а также покупки пакета обучения на выбор.
Решение
Совместно с заказчиком мы приняли решение разработать landing page с индивидуальным дизайном и функционалом, который бы позволял проводить набор студентов для обучения в школе астрологии. Как нам это удалось? Читайте далее.
Индивидуальный дизайн
При разработке сайта можно пойти по одному из двух путей: выбрать шаблонный вариант или разработку индивидуального дизайна. Мы сделали ставку на индивидуальный подход, который отличается от шаблонного такими преимуществами:
- Отсутствие каких-либо компромиссов по структуре и внешнему облику веб-страниц, полностью индивидуальная проработка дизайна под потребности конкретного клиента и его аудиторию, а значит — максимально возможная конверсия.
- Акцент на статусности проекта, эксклюзивный и полностью уникальный облик сайта.
- Плюс к узнаваемости бренда.
- Более высокое быстродействие за счет отсутствия лишнего кода и компромиссов в реализации.
У шаблонных сайтов есть и свои плюсы, главные из которых — цена и скорость разработки. Но более дорогой сайт позволяет повышать цены на услуги или товары, а значит — вполне оправдан.
Мы учли специфику отрасли и большие планы клиента по развитию проекта, ведь для такой специфической области как астрология подходящих шаблонов в принципе не так уж много. Поэтому, взвесив все «за» и «против», приступили к разработке индивидуального дизайна с учетом запросов и пожеланий клиента.
Мы разработали уникальную «межпланетную» графику, покорили «космическую» анимацию и использовали ненавязчивые «галактические» виджеты.
Даже без линзы Барлоу можно рассмотреть мельчайшие детали кропотливой работы наших дизайнеров. Это и «движение планет по орбите» вокруг заголовков, и «блики далеких звезд» Бетельгейзе и Альдебаран.
Изучая информацию о том, как проходит курс, каждый пользователь сайта может попробовать себя в роли конструктора Вселенной и «поиграть» Венерой, Сатурном и другими планетами.
К цветовой гамме сайта мы также подошли обоснованно. Изучив исследование международной команды астрофизиков, опубликованное в журнале The Astrophysical Journal, мы узнали предполагаемый цвет нашей Вселенной. Им оказался бледно-коричневый оттенок, напоминающий цвет кофе со сливками. Ученые название его «космическим латте», а мы взяли этот цвет на вооружение в качестве основного на сайте.
Общий цветовой ансамбль дизайнеры дополнили золотым звездным цветом и оттенком морской волны в честь нашей голубой планеты. Мы отошли от уже приевшихся астрологических цветов: фиолетового и розового, создав собственную уникальную астро-палитру.
Структура
Следующей остановкой нашей «веб-космической миссии» стала четкая структура landing page. Дизайн и структура — взаимосвязанные вещи, поэтому мы начали работу с UX — вначале проработали прототипы страниц, утвердили их с клиентом, а после приступили к стилистике, концепту и созданию полноцветного дизайнерского макета.
Мы не просто создали рандомный перечень информационных блоков, а проанализировали сайты конкурентов, в том числе зарубежные. В итоге, мы предусмотрели логичную последовательность информации, согласно ключевым маркетинговым стратегиям и воронкам продаж.
Тексты
Мы написали эффективные продающие и информационные текстовые блоки, которые равномерно распределили по сайту, уделив внимание мельчайшим моментам, лучшим продающим практикам и просто здравому смыслу.
Всплывающие окна
Часть информации, чтобы не перегружать сайт, мы скрыли за всплывающими окнами и выпадающим текстом. В частности, это касается вариантов обучения и перечня результатов, которые получат студенты после обучения. В виде выпадающего текста мы также оформили список частых вопросов.
Всплывающее окно появляется и если нажать кнопку «Узнать больше» в блоке об основательнице школы.
По точно такому же принципу появляется форма для записи на курс, если нажать кнопку «Хочу на курс» в блоке с вариантами обучения.
Такие решения наших дизайнеров и верстальщиков избавили сайт от текстовой перегруженности и позволили разместить на странице всю необходимую информацию. Ведь лаконичность — основа микрокосмоса, даже если речь идет о сайте.
Оплата и рассрочка
Перед нами была поставлена еще одна задача: добавить возможность оплаты курса на сайте. Мы внедрили на сайт виджеты для оплаты — 3 варианта в соответствии со стоимостью каждого тарифа курса. Чтобы перейти к оплате, достаточно нажать кнопку «Хочу на курс», заполнить короткую форму и перейти к процессу оплаты.
Помимо стандартной оплаты курса мы подключили возможность рассрочки. Для каждого тарифа — отдельное окно с возможностью оплаты или рассрочки. В качестве платежной системы мы интегрировали виджет от Тинькофф Банка.
А вы знали, что именно Тинькофф — первый российский банк, который «побывал в космосе» и на недавние съемки фильма «Вызов» отправил на МКС свои платежные карты? А главная героиня во время съемок совершила перевод прямо с борта Космической станции.
Программа курса в PDF
На сайте предусмотрено три пакета курсов, программы которых можно скачать в формате PDF. Этот документ также сгенерировали наши дизайнеры. Это не просто белый лист с текстом шрифта Times New Roman, а стилизованный и иллюстрированный файл, который можно сохранить на любом устройстве и даже распечатать.
Разработка логотипа
В рамках дизайнерских работ сайта мы также разработали логотип школы астрологии. Главным элементом логотипа стал Лев (вероятно, знак зодиака основательницы школы). Готовый логотип — это грамотно продуманная геральдика с неотъемлемыми элементами герба: геральдической короной, расположенной над щитом. Мы учли фирменный стиль и задали некий средневековый флёр этой истории.
Личный кабинет
Для удобного обучения студентов, на сайте необходим был личный кабинет. Мы предусмотрели специальную кнопку в шапке сайта, которая ведет на страничку авторизации.
Подробнее о личном кабинете мы рассказали в отдельном кейсе.
Разработка личного кабинета студента для онлайн-школы
Адаптивность
Конечно же, мы предусмотрели максимальную адаптивность сайта для всех распространенных устройств, включая смартфоны. Сайт легко и удобно читается как с больших мониторов, так и с маленьких экранов, сохраняя свою информативность и уникальный дизайн.
Выводы
В итоге «звездная миссия» выполнена командой Вебнавтов на 10 из 10. Мы следовали всем пожеланиям и рекомендациям заказчика и синхронизировали каждый шаг с клиентом. Мы изучили конкурентов, проанализировали успешный опыт других онлайн-школ — их контент, структуру и дизайн сайтов.
Готовый продукт основан на глубоком анализе конкурентных преимуществ и изучении пользовательского поведения. В данном конкретном случае это обеспечивает максимально возможную конверсию.
