• Zaza School

  • Zaza School

ZazaSchool

Онлайн-школа по изучению
иностранных языков и дисциплин

Описание

Данный проект является образовательной платформой с элементами Интернет-торговли, а также туристическими модулями для предоставления возможности заказывать путевки на образование за рубежем.

Он разработан на CMS WordPress, рядом кастомных решений, включая фильтр на VUE.JS

ZaZa School в цифрах

12

лет обучаем
онлайн

16200

студентов прошли
обучение

13

языков

20+

авторских учебных
программ

О проекте

Также в рамках разработки были учтены особенности тестирования новых студентов, а также синхронизация с кастомной CMR системой заказчика.

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

Целевая аудитория

ЦА ZazaSchool обширна, так как клиенты компании - это люди, которые хотят повысить свои навыки и умения, а выбор языков, предметов и курсов больше сотни на данном ресурсе.

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

Программы проекта разработаны для:

  • Детей 7+

  • Подростков 13+

  • Взрослых 18+

  • Студентов 50+

Языковые программы имеются для любого уровня - от начинающего до продвинутого.

Site image

Zaza School

Задача проекта

Разработка LMS системы, системы каталогов курсов, а также электронной витрины образовательных туров и географических объектов.

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

Первый блок

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

Объективно, в рамках данной секции две формы:

1. Форма для выбора онлайн-курса, где при нажатии появляется попап окно, позволяющее выбрать либо язык, либо интересующий предмет.

Zaza School

2. Правая, синяя форма - нацелена на тех, кто ищет образотельные программы, чтобы поехать обучаться в другую страну. При выборе страны или языка пользователя перенаправляет на другую форму, где вводятся дополнительные данные

Zaza School
  • Интересующий промежуток времени нахождеждения в стране

  • Сортировка предложений по цене

  • Бюджет путешествия

  • Страна

  • Город

  • Язык

Также есть дополнительные поля, которые появляются при нажатии на "расширенный поиск":

Zaza School

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

Zaza School

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

Zaza School

В рамках данного интерфейса пользователю предоставляется возможность набрать интересующий пакет уроков в электронную корзину магазина и осуществить оформление / оплату заказа.

Zaza School

Корзина ZazaSchool

Корзина магазина на данном проекте реализована отдельно от чекаута. В рамках корзины пользователь может менять набор корзины, удалять или добавлять необходимое количество товаров. После подтверждения и нажатия на "оформление заказа" пользователь переходит в чекаут.

Zaza School

Чекаут ZazaSchool

Данная страница имеет следующие поля для заполнения:

  • Имя

  • Страна

  • Адрес

  • Населенный пункт

  • Область/регион

  • Почтовый индекс

  • Телефон

  • Email

  • Выбор метода оплаты

  • Капчу (для проверки отсутствия
    автоматизированных действий)

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

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

  • Эквайринг Альфа.Банка
    (банковские карты, Apple Pay, Google Pay)

  • PayPal

  • Альфа-клик

  • Qiwi Wallet

  • Webmoney

  • Сбербанк Онлайн

  • Яндекс Касса

  • Эквайринг интернет-банка Тинькофф

Zaza School
Zaza School
Zaza School

Модуль выбора предметов

Данный модуль дублирует лид-магнит и является фильтром

Это интерактивный модуль выбора предметов в виде псевдо диаграммы. Выбирая тот или иной предмет, например, английский язык подстраивается кнопка "оплатить сейчас", которая переносит на страницу "онлайн обучение" на фрейм фильтры с выбранным атрибутом предмета.

Zaza School

Блоки информирования

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

  • Сертифицированные преподаватели
  • Все учебные материалы включены
  • 24/7 онлайн-курс
  • Цель
  • Место назначения и продолжительность
  • Для любого возраста и языкового уровня
Zaza School

Корпоративный фрейм

Данная секция закрывает 4 задачи по предоставлению информации:

  • Данные о команде

  • История успеха

  • HR-составляющая

  • Сертификация со стороны онлайн-школы

Zaza School

Каталог преподавателей

На сайте также разработан каталог, где фигурируют все преподаватели школы.

Для данного каталога создан отдельный фильтр, который производит отбор по трем параметрам:

Языки или предметы:

  • Португальский

  • Итальянский

  • Китайский

  • Японский

  • Иврит

  • Турецкий

  • Корейский

  • Норвежский

  • Математика

  • История

  • Литература

  • Английский

  • Французский

  • Русский

  • Арабский

  • Немецкий

  • Испанский

Нативный носитель языка или нет

Zaza School

Направление преподавания:

  • Общий курс

  • Для детей

  • Разговорный курс

  • Бизнес

  • ОГЭ / ЕГЭ

  • IELTS / TOEFL

Zaza School

Разработка мобильной версии сайта

Учитывая, что 50% трафика на сайт - это мобильные устройства и планшеты, с особой тщательностью был проработан вопрос по адаптивности всех шаблонов на проекте.

Страница преподавателя

Это отдельно разработанный шаблон для каждого преподавателя онлайн-школы отдельно.

В рамках данного шаблона размещается аватар преподавателя, имя, специализация и категория знаний, описание и видео-отзыв.

Также можно персонально записаться к конкретному учителю на пробный урок с данной страницы.

Zaza School

Мультиязычность на сайте

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

  • Русский

  • Английский

  • Немецкий

  • Французский

  • Арабский

  • Португальский

  • Испанский

Zaza School

Страница тестов

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

Zaza School

Страница отзывов

На данной странице размещены отзывы нескольких форматов.

1. Это отзывы, которые подгружаемые при помощи API Инстаграмма и при нажатии на тот или иной отзвы появляется PopUp окно, с лентой Инстаграма на стороне сайта.

2. Это отзывы добавляемые на сайт при помощи админ-панели. В данный фрейм предусмотрено добавление видео-отзывов и текста слевой стороны.

Zaza School

Меню сайта

Zaza School

В header'е присутствует логотип компании, переключатели между осноными разделами сайта и языковыми версиями.

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

Подвал сайта

В footer размещены второстепенные страницы, ссылка на социальные сети и логотип без текстовых обозначений.

Стили сайта

  • #83C000
  • #C2DA6E
  • #048DCB
  • #47B9EC
  • #FFFFFF

Элементы сайта

Zaza School
Zaza School

Типографика

  • Заголовки и строчный набор

    Lato

    • Aa
    • Bb
    • Cc
    • Dd
    • Ee
    • Ff
    • Gg
    • Hh
    • Ii
    • Jj
    • Kk
    • Ll
    • Mm
    • Nn
    • Oo
    • Pp
    • Qq
    • Rr
    • Ss
    • Tt
    • Uu
    • Vv
    • Ww
    • Xx
    • Yy
    • Zz

Мы готовы взяться за проект
любой сложности

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

Получить консультацию Наше портфолио

Наши последние работы

Если у Вас появится желание с нами работать, мы всегда рады помочь и ответить на Ваши вопросы.