Техническое задание на разработку сайта «Школа эмоционального интеллекта»

Техническое задание на разработку сайта «Школа эмоционального интеллекта»

1. Общая информация

Название проекта – «Первый».

Руководитель проекта – Русецкий М.Ю.

Старт проекта –

Окончание проекта –

Доменное имя –

2. Цель проекта

Разработка сайта для продажи и продвижение курса «Первый»

Технические требования:

Проект должен быть реализован используя следующие технологии: Laravel + Html5 + CSS + JS

Поддержка браузеров:

1) Internet Explorer

2) Microsoft Edge

3) Mozilla Firefox

4) Google Chrome

5) Opera

6) Safari

Административная панель должна поддерживать три последние версии каждого из браузеров.

Административная панель должна корректно отображаться в браузерах с включенной поддержкой Javascrіpt и cookіes, при разрешении экрана 1366*768 и выше.

Карта сайта

Сайт состоит из пользовательской части и раздела администрирования.

В разделе администрирования предусматривается: создание и редактирование базы пользователей, её экспорт, отправка писем на Email пользователя, присвоение статуса пользователю (оплачен/не оплачен).

Сайт состоит из следующих страниц:

· Главная

· Блог

· О Нас

· Личный кабинет

· Контакты

Пользовательская часть

Главная страница

Главная страница состоит из следующих блоков:

· Заглавный блог

Предназначен для краткой презентации продукта. Включает в себя: Слайдер, кнопка регистрации, кнопка купить, краткое описание продукта.

· Блок о школе

Включает в себя заголовок, изображение и текстовое описание (о создателе и опыте).

· Блок о курсе

Включает в себя: Заголовок, текстовое описание (проблема и решение), видеоролик

· Программа курса

Включает в себя: Заголовок, подзаголовок, текстовое описание с изображениями (пошаговая визуальная программа курса - Чему научимся и как поможет дальше жить).

· Отзывы

Включает в себя: Заголовок, подзаголовок, Слайдер (изображение, заголовок и подзаголовок)

· Продажный блок

Включает в себя: Заголовок, подзаголовок, изображение, текстовое описание, кнопка купить или обратного звонка

· Блок о других направлениях

Включает в себя: Заголовок, подзаголовок, текстовое описание, ссылки на ресурсы

· Контакты

Включает в себя: Заголовок, подзаголовок, форма обратной связи, текстовое описание контактов.

Pop-up

· Регистрация: ФИО, Email, пароль, повторите пароль

· Авторизация: Email, пароль

Страница блога

Страница блога состоит из 6 превью новостей с возможностью перейти на внутреннюю страницу новости. В превью должны быть следующие элементы: Заголовок, подзаголовок, изображение, дата публикации, иконка кол-во просмотров, кнопка подробнее.

Дополнительные элементы: Кнопка «загрузить ещё», хлебные крошки

Внутренняя страница блога

Включает в себя: Заголовок, подзаголовок, изображение, дата публикации, иконка кол-во просмотров, текстово-визуальная ифнормация, 3 превью на другие новости.

Дополнительные элементы: Кнопка «загрузить ещё», хлебные крошки

О Нас

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

Личный кабинет

Личный кабинет состоит из следующих вкладок:

· Личная информация

· Статус оплаты

· Обучение

Визуальный референс:

Личная информация

Включает в себя: информация заданную при регистрации личного кабинета: email, ФИО; статусбар обучения (новичек, профессионал, эксперт), статус оплаты, кнопка изменить данные (включая смену пароля)

Статус оплаты

Включает в себя: статус оплаты, текстовый блок с описанием покупки и процесса оплаты, информация с сервиса оплаты (Email, данные карточки и тд- в зависимости от сервиса)

Обучение

Вкладка представляет собой программу курса в виде пунктов меню.

При нажатии на урок открывается новая вкладка с графическо-текстовой информацией. С левой стороны контейнера страницы находится полная программа курса. Пример:

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

Далее путь пользователя повторяется в таком же порядке и со следующими главами курса.

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

Опрос

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

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

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

Программная часть

Главная страница

На главной странице необходимо разработать функционал регистрации и авторизации пользователя.

Данные для регистрации:

· Email

· ФИО

· Пароль

Данные для авторизации:

· Email

· Пароль

Личный кабинет

Оплата

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

Обучение

В бесплатном аккаунте пользователю доступна глава «эмоциональный интеллект», без доступа к тестовому заданию и ссылки на чатбот.

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

Личная информация

В разделе должна быть возможность смены данных, которые пользователь указывал при регистрации

Административная панель

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

База пользователей состоит из следующих полей:

· Email

· ФИО

· Пароль

· Статус оплаты

Дополнительно

· На всех страницах сайта необходимо подключить виджет онлайн консультанта с тех поддержкой (например Jivo).

· Разместить код Яндекс метрики

· Разместить код google Analytics

· Разместить пиксель Facebook