Интернет-магазин для продажи очных лекций, вебинаров и онлайн-курсов
ЗаказчикЛитературная школа Creative Writing School, которая проводит обучение творческому письму, писательскому делу, русской словесности в очном и онлайн-форматахЗадачаРазработать современную онлайн-платформу для продажи обучающих курсов, предоставляющую информацию о мастерах школы, проводимых конкурсах и новостях, а также хранящую базу данных студентов
Creative Writing School — это очные лекции и онлайн-курсы, которые позволяют слушателям научиться работать с письменным словом, а также создают живую среду для общения как начинающих авторов, так и опытных мастеров.
Занятия проводят именитые писатели, лауреаты премий, известные журналисты, литературные критики, сценаристы, драматурги, среди которых Дмитрий Быков, Майа Кучерская, Ольга Славникова, Марина Степнова, Татьяна Толстая, Михаил Шишкин.
Очные мастерские проходят в Москве и Санкт-Петербурге, а онлайн-курсы и вебинары доступны в любой точке России и для русскоговорящей аудитории зарубежья.
ПОЖЕЛАНИЯ ЗАКАЗЧИКА
- Лаконичный дизайн с использованием фирменных цветов — красного, черного и белого.
- Адаптация для мобильных версий и больших экранов.
- Информативные превью и карточки курсов.
- Удобная навигация и подбор нужных курсов (поиск по сайту, фильтры по тегам и характеристикам курсов).
- Программа лояльности, позволяющая устанавливать различные скидки на курсы.
- База данных для хранения информации о студентах с возможностью в дальнейшем расширить ее функционал.
АНАЛИЗ
Основные минусы рассмотренных нами сайтов прямых конкурентов и организаций схожего профиля:
- перенасыщенность информацией, сложная структура и, как следствие, трудности в навигации и с подбором подходящего курса,
- устаревшая верстка, некачественная адаптация под мобильные устройства (или ее полное отсутствие).
В школе CWS действует более 150 обучающих программ различного направления, поэтому целевая аудитория сайта обширна: возраст от 8 до 80 лет, независимо от пола, семейного положения и сферы деятельности. Среди потенциальных учеников могут быть как новички, так и опытные писатели. В целом, это люди, стремящиеся к творческой реализации, желающие получить новую профессию и завести знакомства с интересными людьми, в том числе школьники, студенты вузов, домохозяйки, женщины в декрете, пенсионеры. 90–95% — физические лица, редко — сотрудники организаций.
Таким образом, нашей задачей была разработка современного сайта с понятной навигацией, инструментами удобного подбора обучающих курсов, предназначенного для широкой аудитории потенциальных клиентов. Дизайн сайта должен быть ярким и запоминающимся, чтобы привлечь внимание творческих людей, но в то же время довольно лаконичным и выдержанным, чтобы не отпугнуть старшее поколение.
ПРОЕКТИРОВАНИЕ
Совместно с заказчиком мы составили описание всех бизнес-процессов школы, на основе которых разработали возможные сценарии взаимодействия с сайтом как учеников, так и сотрудников школы, составили перечень необходимых функциональных модулей, которые будут решать сформулированные задачи.
На основе этого разработали структуру, отрисовали и согласовали с заказчиком прототипы главной и затем внутренних страниц сайта.
ДИЗАЙН
Использовали цвета в соответствии с пожеланиями заказчика, добавив спокойный серый, смягчающий и уравновешивающий контрастность цветового решения.
- Черный текст на белом или сером фоне: для наполнения основных текстовых блоков.
- Белый текст на черном фоне: для оформления хедера, футера, текстовых перебивок.
- Красный цвет: для расстановки смысловых акцентов в тексте.
- Контрастные сочетания для выделения UI-элементов.
В команде CWS есть художник, создающий иллюстрации в ярком фирменном стиле школы. Поэтому, чтобы не перегружать визуальное восприятие пользователя, мы реализовали дизайн, основанный на простых формах, сочетающий текстовые блоки с бложными списками и слайдерами изображений, добавив минимум анимации.
ГЛАВНАЯ СТРАНИЦА
Один из вариантов сценария.
Мама 13-летнего подростка, мечтающего стать писателем-фантастом, ищет, где детей учат писательскому мастерству. В результате попадает на главную страницу нашего сайта. Знакомится с компанией, среди мастеров видит именитых писателей, убеждается в высоком уровне школы и переходит в каталог для выбора конкретного курса.
Чтобы с первых секунд увлечь пользователя событиями школы, на Главной странице мы разместили слайдер с анонсами, блоки с Популярными и Ближайшими курсами в форме плитки из превью курсов.
Блоки с краткой информацией вызывают доверие и располагают пользователей к покупке курсов:
- краткая справка-визитка компании,
- преимущества школы,
- карточки мастеров,
- публикации и новости,
- отзывы.
В главное меню вывели основные разделы каталога курсов, во вспомогательном боковом — информационные блоки о компании.
КАТАЛОГ КУРСОВ
Один из вариантов сценария.
Пользователь хочет научиться писать рассказы определенного жанра. С главной страницы сайта, с поискового запроса или с контекстной рекламы он заходит на страницу Каталога курсов. Выбирает формат обучения, применяет фильтры и подбирает нужный курс.
Основное внимание, как и в любом интернет-магазине, мы уделили Каталогу курсов. Реализовали его бложным списком карточек, содержащих тематическую обложку, краткое описание курса, даты проведения, стоимость и ссылку на страницу курса.
Для удобства пользователей добавили сортировку списка по дате старта, популярности или цене. Также для упрощения выбора настроили фильтры по тегам, продолжительности, жанру и другим характеристикам курсов.
КАЛЕНДАРЬ КУРСОВ
Один из вариантов сценария.
Пользователь уже проходил обучение в школе и хочет развивать свои навыки дальше. Он является студентом вуза и ищет подходящий курс на летние каникулы. С главной страницы сайта он переходит на Календарь курсов и видит расписание на ближайшие три месяца. Определяет формат обучения и выбирает нужный курс.
Для пользователей, которые хотят запланировать свое обучение на ближайшие месяцы мы сделали альтернативный каталог, представляющий собой Календарь курсов. Здесь курсы сгруппированы по месяцам старта и располагаются в порядке запуска. Также к списку можно применить фильтрацию по формату проведения.
СТРАНИЦА КУРСА
Один из вариантов сценария.
Пользователь хочет научиться писать стихи, через поиск или каталог курсов переходит на страницу конкретного курса, изучает его программу, знакомится с преподавателями. Сомневается, изучает отзывы, сравнивает тарифы на курсы, оставляет контакты для консультации с менеджером или добавляет курс в корзину и оплачивает его.
Специфичность интернет-магазина заключается в том, что в качестве товара выступает участие в очных лекциях и онлайн-курсах. Изображений, позволяющих детально изучить товар, нет, поэтому нужно наполнить карточку товара подробными текстовыми описаниями, организовав логичную, структурированную подачу информации.
На странице курса мы разместили
- тексто-графический блок (фото или видео) с описанием курса,
- слайдер «Мастера курса» с переходом на страницы мастеров,
- блок «Вы научитесь», описывающий умения и навыки, которые приобретают выпускники курса,
- блок «Кому подойдет курс»,
- подробная Программа курса,
- блок с акциями, в которых участвует курс,
- отзывы слушателей.
Курсы можно проходить с различными вариантами обратной связи, соответственно, это влияет на их стоимость, поэтому на странице курса мы добавили выбор Тарифа курса, реализовав его в виде карточек, наглядно показывающих различия тарифов.
ЛИЧНЫЙ КАБИНЕТ
Авторизованным пользователям доступен Личный кабинет. Мы реализовали его в минималистичном дизайне. Переход между разделами ЛК осуществляется с помощью расположенного слева меню из 4 вкладок. Основная область страницы содержит соответствующие поля.
В Личном кабинете можно посмотреть историю приобретенных курсов, изменить адрес, необходимый для оформления покупки, и свои учетные данные.
CRM
В рамках реализации базы данных студентов мы подключили к сайту CRM-систему, которая решает сразу несколько проблем клиента.
- Хранит информацию об учениках школы, обработанных заказах, полученных заявках, проведенных и запланированных курсах.
- Полностью автоматизирует процесс обработки заявок. Для этого мы настроили роботов, которые в соответствии с бизнес-процессами берут часть работы на себя.
К примеру, при получении заявки они создают в системе нового студента (или по email находят существующего). Если заявка на бесплатный курс, то формируют и отправляют письмо с информацией и ссылкой для подключения к трансляции. В случае заявки на платный курс, они формируют договор, выставляют счет и после зачисления оплаты отправляют студенту информационное письмо. При поступлении заявки куратор соответствующего направления получает уведомление и может подключиться к процессу на любом этапе, чтобы предоставить консультацию или скорректировать данные. - Обеспечивает получение заявок из различных каналов в одном окне. Заявки с сайта, письма электронной почты, сообщения из соцсетей и мессенджеров поступают в систему в форме задач. Это позволяет обрабатывать 100% поступающих заявок, а также контролировать работу менеджеров.
- Позволяет собирать и анализировать данные по заказам и проведенным курсам, автоматически генерирует отчеты по различным показателям.
CRM-система доступна на ПК, мобильных устройствах и в форме приложения, что обеспечивает ее доступность в любом месте и в любое время.
АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
Мы сделали адаптацию сайта под различные технические условия и актуальные разрешения. Сайт корректно отображается на любом десктопном мониторе, на планшетном компьютере, на экране смартфона. При этом качество отображения не зависит ни от диагонали, ни от позиционирования экрана.
Таким образом, мы обеспечили сохранение функциональности сайта при загрузке с различных устройств.
В ИТОГЕ у нас получился современный интернет-магазин, для наполнения которого от персонала не требуются специальные технические навыки, знания технологий или программных продуктов, за исключением общих навыков работы с персональными компьютером и стандартным веб-браузером.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
