Цель «Изучение формата» поделена на следующие действия:
1. Просмотр ролика с теорией о мультимедийном формате.
На этом этапе студент академии должен иметь функциональную возможность воспроизвести видео с теорией, включить субтитры (при необходимости), изменить скорость воспроизведения видео, задать вопрос преподавателю и видеть индикатор прогресса прохождения урока.
Ассистент онлайн-академии должен иметь возможность загрузить новый урок на образовательный портал, загрузить сценарий работы чат-бота преподавателя и выгружать необходимую статистику. Преподаватель онлайн-академии должен получать уведомления о вопросах студентов и иметь возможность отправлять ответы студентам.
2. Изучение гайда по работе с онлайн-сервисом.Образовательный портал должен предоставлять возможность студенту переключаться между этапами урока, переходить по ссылкам, задавать вопросы преподавателю или сообщать о технических проблемах.
Ассистент академии должен иметь функциональную возможность загрузить на портал текст гайда и GIF-изображения с инструкциями, а также получать уведомления о проблемах студентов и отвечать на их обращения. Преподаватель академии онлайн-сервисов также должен видеть сообщения студентов и давать им обратную связь.
3. Выполнение практического задания.
Студент академии видит информацию о практическом задании и при готовности включает таймер на его выполнение. Он также может сообщить преподавателю или ассистенту о проблемах. После выполнения задания он загружает файл с выполненной работой преподавателю (через чат) и отправляет задание на проверку. Преподаватель получает выполненное задание и приступает к проверке.
4. Переход к изучению следующего формата.
Студент академии онлайн-сервисов в своем личном кабинете может увидеть количество изученных мультимедийных форматов и может приступить к изучению нового, продлить подписку на материалы академии или поделиться созданной работой в социальных медиа.
5. Получение обратной связи.
Студент получает уведомление об оценке преподавателя, читает отзыв и видит начисленные баллы. В случае высокой оценки, он может опубликовать свою работу в разделе «Мультимедийные форматы» в качестве успешного примера использования мультимедийного формата. Работу в этот раздел могут предложить и другие пользователи портала, не только студенты. Контент-менеджер получает уведомление о публикации работы студента в «Мультимедийных форматах».
6. Использование накопленных баллов.
Накопленные за успешное выполнение практических заданий баллы студент может потратить на промокоды к платным онлайн-сервисам или на изучение новых форматов -- оплатить подписку для доступа к академии онлайн-сервисов. При этом ассистент академии должен иметь возможность загружать информацию о промокодах (с помощью панели администратора) и выгружать статистику использованных промокодов.
3.2.3 Платформы и каналы проекта
Основная и единственная (на момент запуска проекта) платформа -- это веб-сайт в формате образовательного портала «Как просто?Медиа».
Для продвижения проекта среди целевой аудитории используются поисковые системы, профильные интернет-издания и социальные медиа (подробнее в пункте 3.5).
3.2.4 Путь пользователя
Для визуализации пользовательского пути была составленаCustomer Journey Map, ознакомиться с ней можно на Рисунке 3.4. Карта в оригинальном масштабе доступнав приложениях (Приложение №5).
Создание карты позволило автору работы проанализировать опыт взаимодействия с продуктом от лица клиента, конкретного представителя целевой аудитории -- школьного учителя.
Столбцы карты -- это точки взаимодействия пользователя с продуктом: возникновение у учителя интереса к использованию онлайн-сервисов; исследование материалов для обучения; просмотр блога образовательного портала «Как просто? Медиа»; решение изучить мультимедийный формат; оплата обучения; прохождение первого урока; применение полученных знаний и навыков на уроке со школьниками; рекомендация портала коллегам и друзьям; решение о повторном обучении - изучении нового формата.
ВстрокахCustomerJourneyMap расположились цели пользователя в каждой точке взаимодействия; наглядная визуализация процесса; описание процесса; каналы, которые использует учитель для достижения цели; барьеры, с которыми он может столкнуться; идеи того, как можно решить эти барьеры; позитивные и негативные моменты, которые могут возникнуть во время взаимодействия педагога с продуктом; график с наглядным изменением эмоционального опыта пользователя и результаты, которых стремится достичь учитель в каждой точке взаимодействия с образовательным порталом.
3.2.5 График работы над проектом (диаграмма Ганта)
Для повышения производительности и эффективности при проектировании и создании образовательного портала «Как просто? Медиа», а также для обеспечения своевременного выполнения поставленных задач была разработана диаграмма Ганта (Рисунок 3.5).Ознакомиться с диаграммой в оригинальном масштабе можно в приложениях(Приложение №6).
Реализовать проект образовательного портала «Как просто? Медиа» планируется за 8 месяцев.Этапы работы над проектом можно поделить на три части: проектирование и создание WEB-каталога (релиз №1), проектирование и создание академии онлайн-сервисов (релиз №2), продвижение и поддержка WEB-каталога и академии онлайн-сервисов.
Этапы работы над проектом можно поделить на три части: проектирование и создание WEB-каталога (релиз №1), проектирование и создание академии онлайн-сервисов (релиз №2), продвижение и поддержка WEB-каталога и академии онлайн-сервисов.
На момент защиты выпускной квалификационной работы автором был проделан этап проектирования и создания WEB-каталога (релиз №1).
3.3 Дизайнерские характеристики проекта
Для повышения узнаваемости портала, выделения его среди конкурентов, привлечения внимания и лояльности со стороны потенциальных клиентов автором работы был разработан фирменный стиль образовательного портала. Фирменный стиль «Как просто? Медиа» (Рисунок 3.6) состоит из следующих элементов:
1. Логотип образовательного портала;
2. Фирменные цвета;
3. Основной шрифт;
3.3.1 Обоснование дизайнерской концепции проекта
Логотип образовательного портала включает в себя изображения четырех типов контента: текст, аудио, видео и изображения. В совокупности они являются отсылкой к основным объектам WEB-каталога -- мультимедийным сервисам. Помимо четырех иконок, он также содержит и название образовательного портала. Логотип разработан в трех версиях: по умолчанию используется основной вариант логотипа, однако его нельзя размещать на светлом фоне.Для размещения на светлом фоне был разработан дополнительный вариант лого. Также в ходе работы над брендингом портала был разработан однотонный вариант логотипа, который может быть использован при изготовлении сувенирной продукции с логотипом образовательного портала.
Один из ключевых трендов 2020 года в сфере WEB-дизайна -- этосочные кричащие цвета Основные тренды веб дизайна 2020 // Веб-студия дизайна Impulse-design [Электронный ресурс]. URL: https://impulse-design.com.ua/osnovnye-trendy-veb-dizajna-2018.html(дата обращения: 20.03.2020).. Поэтому основная цветовая стилистика сайта выполнена в аспидно-синих, сине-фиолетовых и блестяще зеленовато-желтых цветах. В качестве дополнительных цветов (которые используются в редких случаях для визуального выделения объектов) были использованы одуванчиковый цвет и ярко-сиреневый.
Сочетание цветов было подобрано с помощью Цветового круга Иттена с использованием принципа «Контраст» Цветовая схема проекта "Как просто? Медиа" // colorscheme.ru [Электронный ресурс]. URL: https://colorscheme.ru/#4521Tp2WTw0w0(дата обращения: 21.03.2020). (Рисунок 3.7).
Не менее важный атрибут фирменного стиля, в особенности текстового блога -- грамотно подобранный шрифт. В качестве основного шрифта для проекта был выбран WEB-шрифт TTNorms (семейство «Sans Serif» -- рубленные шрифты), который поддерживает как кириллицу, так и латиницу. Он входит в стандартный набор CSS-шрифтов, поэтому будет отображаться на любых устройствах пользователей. Ктомужебогатоеколичествоначертаний («Thin», «ThinItalic», «ExtraLight», «ExtraLightItalic», «Light», «LightItalic», «Regular», «Italic», «Medium», «MediumItalic», «Bold», «BoldItalic», «ExtraBold», «ExtraBoldItalic», «Black», «BlackItalic», «Heavy» и«HeavyItalic) позволяет использовать его без сочетания с дополнительным шрифтами.
3.3.2 Сториборд проекта
Для визуализации логической связи между страницами образовательного портала была разработана Website-map (Рисунок 3.8) полномасштабное изображение которой представлено в приложениях (Приложение №7).
3.3.3 UI платформ проекта
Пользовательский интерфейс образовательного портала, в частности -- навигационное меню (Рисунок 3.9), помогает с первых секунд ознакомить пользователя с разделами сайта. Меню расположено на всех страницах и не исчезает при скроллинге контента. Оно помогает пользователю перемещаться между основными разделами. В нем расположены иэлементы поисковой системы по всему порталу, а также элементы интерфейса, позволяющие пользователю зайти в свой личный кабинет. На каждой странице предусмотрена горизонтальная полоса прокрутки, которая помогает пользователюв процентном соотношении понять, сколько контента на данной странице располагается ниже текущего места просмотра.
3.3.4 Полный список элементов проекта
Для описания списка элементов образовательного портала ниже приведен список страниц с их структурой и подробным описанием функциональных возможностей элементов.
«Главная страница»-- в формате landingpage, контент которых меняется в зависимости от сегмента целевой аудитории. Страница состоит из следующих блоков:
Ш Индикатор прокрутки страницы. Располагается в верхней части экрана и необходим для навигации;
Ш Главное меню портала. Включает в себя логотип, перечень основных разделов портала, а также элементы интерфейса, позволяющие посетителю портала выполнить поиск по сайту или войти в «Личный кабинет».
Ш Обложка. Содержит краткое описание образовательного портала -- уникальное торговое предложение, а также тематическое изображение;
Ш Графическая вставка, на которой публикуется динамическая информация о количестве статей, мультимедийных форматов и мультимедийных сервисов, опубликованных на образовательном портале;
Ш Интерактивный слайдер «До/после», который наглядно показывает преимущества использования онлайн-сервисов (меняется в зависимости от сегмента целевой аудитории);
Ш Блок «Блог». Краткое описание раздела, подборка из 6 актуальных статей блога, а также кнопка «Перейти в блог»;
Ш Блок «Библиотека мультимедийных форматов».Интерактивный слайдер, который позволяет узнать базовую информацию о мультимедийных форматах, кнопка «Открыть библиотеку»;
Ш Блок «Каталог мультимедийных сервисов».Примеры карточек мультимедийных сервисов с базовой информацией о них, классификатор «По задачам», кнопка «Перейти в каталог»;
Ш Блок «Поделиться проектом в социальных медиа» -- возможность для пользователя рассказать о проекте на своих личных страницах в социальных медиа;
Ш Кнопка «Наверх», позволяющая пользователю автоматически переместиться в начало страницы;
Ш Pop-up уведомление об использовании Cookies;
Ш «Подвал». Ссылки на юридические документы, контакты редакции образовательного портала, ссылки на страницы проектов в социальных медиа.
Страница «Блог» (Рисунок 3.10)-- короткие статьи-гайды, а также рассказы об успешном опыте использования онлайн-сервисов. Страница состоит из следующих блоков:
Ш Индикатор прокрутки страницы;
Ш Главное меню портала;
Ш Обложка раздела. Содержит краткое описание раздела, а также тематическое изображение;
Ш 12 карточек статей. Обложка, заголовок, лид, дата публикации, рубрики-теги, кнопка «Добавить в закладки» и кнопка «Читать»;
Ш 5 популярных (по числу просмотров) статей. Обложка, заголовок. рубрика-тег и дата публикации;
Ш Классификатор статей по типу медиа. Название рубрики («Текст», «Изображения», «Видео», «Аудио», «Данные», «Интерактив») и счетчик количества статей для каждого раздела;
Ш Классификатор по тематическим рубрикам-тегам;
Ш «Предложить статью». Кнопка для перехода в личный кабинет для создания авторской статьи для блога;
Ш «Лучшие авторы». Список соавторов портала (фотография, фамилия, имя и текст «о себе»), чьи статьи были опубликованы в блоге образовательного портала;
Ш Список номеров страниц. Возможность перейти на другую страницу каталога;