Мультиязычная онлайн-школа
Описание
Данный проект является образовательной платформой с элементами Интернет-торговли, а также туристическими модулями для предоставления возможности заказывать путевки на образование за рубежем.
Он разработан на CMS WordPress, рядом кастомных решений, включая фильтр на VUE.JS
ZaZa School в цифрах
лет обучаем
онлайн
студентов прошли
обучение
языков
авторских учебных
программ
О проекте
Также в рамках разработки были учтены особенности тестирования новых студентов, а также синхронизация с кастомной CMR системой заказчика.
Компания ZazaSchool имеет штат своих учителей, которые предоставляют образовательные услуги. А также специалистов, которые формируют туры и сопровождают студентов, которые желают отправиться обучаться в какую-либо страну.
Целевая аудитория
ЦА ZazaSchool обширна, так как клиенты компании - это люди, которые хотят повысить свои навыки и умения, а выбор языков, предметов и курсов больше сотни на данном ресурсе.
Данных пользователей может интересовать повышения своего скилла для трудоустройства, подготовка к международным экзаменам, прокачать языковые навыки для путешествий или осуществить образовательную поездку за рубеж.
Программы проекта разработаны для:
-
Детей 7+
-
Подростков 13+
-
Взрослых 18+
-
Студентов 50+
Языковые программы имеются для любого уровня - от начинающего до продвинутого.
Site image
Задача проекта
Разработка LMS системы, системы каталогов курсов, а также электронной витрины образовательных туров и географических объектов.
Выстраивалась работа штата таким образом, чтобы можно было осуществлять образовательную деятельность для студентов из любой точки мира.
Первый блок
На первом фрейме стартовой страницы размещена мульти-форма. Ее задача - это перенаправление лида на одну из 2 основных воронок продаж, а именно - на онлайн-курсы или на приобретение туров по учебе за рубежем.
Объективно, в рамках данной секции две формы:
1. Форма для выбора онлайн-курса, где при нажатии появляется попап окно, позволяющее выбрать либо язык, либо интересующий предмет.
2. Правая, синяя форма - нацелена на тех, кто ищет образотельные программы, чтобы поехать обучаться в другую страну. При выборе страны или языка пользователя перенаправляет на другую форму, где вводятся дополнительные данные
Интересующий промежуток времени нахождения в стране
Сортировка предложений по цене
Бюджет путешествия
Страна
Город
Язык
Также есть дополнительные поля, которые появляются при нажатии на "расширенный поиск":
Количество уроков в неделю
Тип проживания
Тип школы
Тип курса
Возраст
При вводе параметров формируется персональный перечень предложений из географических объектов и курсов, проводимых в них.
После блока с формами на сайте идет фрейс с преимуществами, оффер с скидкой и кнопка "начать сейчас", которая при нажатии переносит пользователей на посдочную страницу "учись онлайн" и переносит при помощи якоря на фрейм с перечнем индивидуальных занятий и фильтром.
В рамках данного интерфейса пользователю предоставляется возможность набрать интересующий пакет уроков в электронную корзину магазина и осуществить оформление / оплату заказа.
Корзина ZazaSchool
Корзина магазина на данном проекте реализована отдельно от чекаута. В рамках корзины пользователь может менять набор корзины, удалять или добавлять необходимое количество товаров. После подтверждения и нажатия на "оформление заказа" пользователь переходит в чекаут.
Чекаут ZazaSchool
Данная страница имеет следующие поля для заполнения:
Имя
Страна
Адрес
Населенный пункт
Область/регион
Почтовый индекс
Телефон
Email
Выбор метода оплаты
Капчу (для проверки отсутствия
автоматизированных действий)
Также отдельно дублируется перечень выбранных товаров с итоговой суммой, без возможности редактирования сформированных товаров.
Для того, чтобы создать комфорт при оплате было подключено множество методов оплаты и подключены следующие платежные шлюзы:
Эквайринг Альфа.Банка
(банковские карты, Apple Pay, Google Pay)PayPal
Альфа-клик
Qiwi Wallet
Webmoney
Сбербанк Онлайн
Яндекс Касса
Эквайринг интернет-банка Тинькофф
Модуль выбора предметов
Данный модуль дублирует лид-магнит и является фильтром
Это интерактивный модуль выбора предметов в виде псевдо диаграммы. Выбирая тот или иной предмет, например, английский язык подстраивается кнопка "оплатить сейчас", которая переносит на страницу "онлайн обучение" на фрейм фильтры с выбранным атрибутом предмета.
Блоки информирования
В данных блоках на стартовой странице размещена информация о проекте, форматах взаимодействия с пользователями и цели.
- Сертифицированные преподаватели
- Все учебные материалы включены
- 24/7 онлайн-курс
- Цель
- Место назначения и продолжительность
- Для любого возраста и языкового уровня
Корпоративный фрейм
Данная секция закрывает 4 задачи по предоставлению информации:
Данные о команде
История успеха
HR-составляющая
Сертификация со стороны онлайн-школы
Каталог преподавателей
На сайте также разработан каталог, где фигурируют все преподаватели школы.
Для данного каталога создан отдельный фильтр, который производит отбор по трем параметрам:
Языки или предметы:
Португальский
Итальянский
Китайский
Японский
Иврит
Турецкий
Корейский
Норвежский
Математика
История
Литература
Английский
Французский
Русский
Арабский
Немецкий
Испанский
Нативный носитель языка или нет
Направление преподавания:
Общий курс
Для детей
Разговорный курс
Бизнес
ОГЭ / ЕГЭ
IELTS / TOEFL
Разработка мобильной версии сайта
Учитывая, что 50% трафика на сайт - это мобильные устройства и планшеты, с особой тщательностью был проработан вопрос по адаптивности всех шаблонов на проекте.
Страница преподавателя
Это отдельно разработанный шаблон для каждого преподавателя онлайн-школы отдельно.
В рамках данного шаблона размещается аватар преподавателя, имя, специализация и категория знаний, описание и видео-отзыв.
Также можно персонально записаться к конкретному учителю на пробный урок с данной страницы.
Мультиязычность на сайте
Так как заказчик предоставляет услуги по всему миру. Сайт необходимо было сделать мультиязычным, в рамках данного проекта были добавлены следующие языки:
Русский
Английский
Немецкий
Французский
Арабский
Португальский
Испанский
Страница тестов
Также была реализована блоговая система для публикации тестов. На странице теста справа присутствует сайтбар с перечнем опросов. Они постоянно пополняются и создаются для разных тематик. В рамках конкретного опроса в конце пользователю предлагается ввести свою почту, чтобы получить результат тестирования.
Страница отзывов
На данной странице размещены отзывы нескольких форматов.
1. Это отзывы, которые подгружаемые при помощи API Инстаграмма и при нажатии на тот или иной отзвы появляется PopUp окно, с лентой Инстаграма на стороне сайта.
2. Это отзывы добавляемые на сайт при помощи админ-панели. В данный фрейм предусмотрено добавление видео-отзывов и текста слевой стороны.
Меню сайта
В header'е присутствует логотип компании, переключатели между основными разделами сайта и языковыми версиями.
В рамках технического задания было реализовано двухуровневое меню, однако второй уровень предусмотрен для навигации внутри страницы на которой находится пользователь и изначально он скрыт. Данный функицонал шапки сайта реализован на странице "учись онлайн". При нажатии, например, на "стоимость" происходит перемещение к якорю конкретной секции в рамках выбранной страницы.
Подвал сайта
В footer размещены второстепенные страницы, ссылка на социальные сети и логотип без текстовых обозначений.
Стили сайта
-
#83C000
-
#C2DA6E
-
#048DCB
-
#47B9EC
-
#FFFFFF
Элементы сайта
Типографика
-
Заголовки и строчный набор
Lato
- Aa
- Bb
- Cc
- Dd
- Ee
- Ff
- Gg
- Hh
- Ii
- Jj
- Kk
- Ll
- Mm
- Nn
- Oo
- Pp
- Rr
- Ss
- Tt
- Uu
- Vv
- Ww
- Xx
- Yy
- Zz