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

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

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

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

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

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

• Каталог курсов по направлениям. Помогает удобно представить образовательные программы и упростить выбор.

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

• Формы заявки и заказа звонка. Сокращают путь от интереса к обращению в институт.

• Адаптивная версия сайта. Сайт удобно использовать с компьютера, планшета и смартфона.

• SEO-основа. Помогает привлекать целевую аудиторию из поиска.

• Удобная админ-панель. Сотрудники института могут самостоятельно обновлять программы, материалы и страницы.

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

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

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

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

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

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

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

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

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

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

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

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

• 4 аватара клиента

• анализ 12 конкурентов

• 36 идей для реализации

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

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

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

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

• Об институте

• Сведения об образовательной организации

• Программы обучения

• Каталог курсов

• Карточки программ

• Клиенты

• Оплата

• Расписание занятий

• Вакансии

• Специалисты

• Новости

• Блог

• Контакты

• Каталог курсов. Помогает быстро перейти к нужной программе или направлению.

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

• Форма заявки. Позволяет отправить обращение без лишних переходов.

• Форма заказа звонка. Дает быстрый способ связаться с институтом.

• Раздел с документами и сведениями. Закрывает требования к образовательной организации и повышает доверие.

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

Неоднозначные функции описали в техническом задании (ТЗ), сделав его лаконичным.

• прототипы страниц

• документ ТЗ

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

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

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

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

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

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

• Подготовили адаптивные макеты. Сайт удобно просматривать с телефона, планшета и компьютера.

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

• дизайн-макеты всех страниц

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

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

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

• Выполнили вёрстку основных разделов сайта. Перевели подготовленные макеты в рабочие страницы на HTML, CSS и JavaScript.

• Настроили адаптивность. Страницы корректно отображаются на разных устройствах и экранах.

• Оптимизировали изображения и элементы интерфейса. Это помогает ускорить загрузку страниц.

• Проверили стабильность отображения. Сайт должен выглядеть корректно в разных браузерах.

• готовые HTML-страницы сайта

• сайт стал быстрым, стабильным и удобным для пользователей на разных устройствах

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

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

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