Разработка сайта для института повышения квалификации

Институт повышения квалификации «ПРОФЕССИОНАЛ» — образовательный центр в Москве, который занимается профессиональной переподготовкой, повышением квалификации, профессиональным обучением, краткосрочными курсами и семинарами.

На сайте представлены очные, заочные, очно-заочные и дистанционные форматы обучения, включая электронное обучение и вебинары. В каталоге института размещено более 1000 курсов по разным направлениям.

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

• Понятная структура сайта. Пользователь легко понимает, куда перейти, выбрать обучающую программу и как оставить заявку на обучение.
• Каталог курсов по направлениям. Помогает показать образовательные программы и упростить выбор обучения.
• Карточки программ с ключевой информацией. Пользователь сразу видит описание, формат, стоимость и может перейти к заявке. 
• Формы заявки и заказа звонка. Сокращают путь к обращению и покупке образовательных программ.
• Адаптивная версия сайта. Сайт корректно открывается на компьютере, планшете и смартфоне.
• SEO-основа. Готовит сайт к индексации и дальнейшему продвижению.
• Удобная админ-панель. Сотрудники института могут самостоятельно обновлять программы, материалы и страницы.

Этап 1. Маркетинг

Перед проектированием мы изучили проект по методологии 3К: Компания, Клиенты, Конкуренты.

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

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

• Составили пользовательские сценарии. Например: педагог ищет курс повышения квалификации, инженер выбирает программу переподготовки, HR-специалист подбирает обучение для сотрудников компании.

• Изучили потребности целевой аудитории. В фокусе были практикующие специалисты, начинающие сотрудники, HR-отделы, руководители и представители организаций.

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

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

• Создали 6 аватаров клиента.

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

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

• Собрали 38 идей для проекта. Использовали их как основу для структуры, UX и функционала сайта.

• 6 аватаров клиента;
• анализ 10 конкурентов;
• 38 идей для реализации;
• сформирована база для проектирования: аудитории, сценарии выбора программы, структура будущего сайта и список решений, которые помогают увеличивать количество заявок.

Этап 2. Проектирование

На основе собранных данных спроектировали сайт-каталог, где большой объем образовательной информации разложен по понятным разделам.

• Главная страница
• Об институте
• Сведения об образовательной организации
• Программы обучения
• Каталог курсов
• Карточки программ
• Клиенты
• Оплата
• Расписание занятий
• Вакансии
• Специалисты
• Новости
• Блог
• Контакты

• Каталог курсов. Помогает быстро перейти к нужной программе или направлению.
• Карточка программы. Показывает описание, формат обучения, стоимость и условия записи.
• Форма заявки. Позволяет отправить обращение без лишних переходов.
• Форма заказа звонка. Дает быстрый способ связаться с институтом.
• Раздел с документами и сведениями. Закрывает требования к образовательной организации и повышает доверие.
• Расписание занятий. Помогает пользователям ориентироваться в доступных программах и датах.
• Функциональные требования описали в техническом задании (ТЗ).

• прототипы страниц
• документ ТЗ
• заложена логика сайта: от выбора направления до изучения программы и отправки заявки

Этап 3. Дизайн сайта

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

• Проработали каталог курсов. Пользователю проще ориентироваться в направлениях и программах.
• Сделали акцент на заявках. Кнопки «Оставить заявку» и «Заказать звонок» помогают быстрее перейти к обращению.
• Продумали карточки программ. Информация подана так, чтобы пользователь мог сравнить варианты и принять решение.
• Подготовили адаптивные макеты. Сайт удобно просматривать с телефона, планшета и компьютера.
• Подобрали иконки и иллюстрации. Они помогают визуально разделить направления и не перегружают страницы.

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

Этап 4. Верстка

После утверждения дизайна подготовили адаптивную верстку сайта.

• Выполнили вёрстку основных разделов сайта. Перевели подготовленные макеты в рабочие страницы на HTML, CSS и JavaScript.
• Настроили адаптивность. Проверили отображение страниц на разных экранах, чтобы каталогом было удобно пользоваться с компьютера, планшета и смартфона.
• Оптимизировали изображения и элементы интерфейса. Подготовили графику и визуальные элементы так, чтобы страницы быстрее загружались и не перегружали сайт.
• Проверили стабильность отображения. Убедились, что страницы выглядят корректно в популярных браузерах.
  

• готовые адаптивные HTML-страницы;
• корректное отображение на разных устройствах и в браузерах;
• оптимизированные изображения и элементы интерфейса. 

Этап 5. Разработка back-end

Разработали сайт-каталог на платформе 1С-Битрикс (лицензия «Стандарт»), развернули систему и настроили базу данных. На этом этапе собрали техническую основу проекта: каталог образовательных программ, карточки курсов, формы заявок и административную панель.

Отдельно настроили управление контентом, чтобы сотрудники института могли самостоятельно обновлять программы, цены, расписание, материалы и страницы без обращения к разработчикам.

• альфа-версия сайта;
• админ-панель для управления контентом.