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