Разработка сайта для Учебно-информационного центра "ВКС"

Проектирование, дизайн, frontend- и backend-программирование

Клиент

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

Задача

Онлайн обучение - набирающий популярность формат образовательных услуг. В каталоге учебно-информационного центра “ВКС” представлены более 250 курсов. Сайт компании - ключевой канал коммуникации с клиентами, посещение которого предполагает оформление заявки на обучение.

Поэтому, главной задачей стало следующее: разработать и запустить сайт, доступно преподносящий потенциальным клиентам информацию о разнообразии курсов, плюсах дистанционного формата обучения и преимуществах учебы непосредственно в УИЦ “ВКС”.

Цели
  • создать сайт, адекватно работающий на различных устройствах - ПК, планшетах и смартфонах;
  • спроектировать и разработать дизайн ресурса с интуитивно понятным каталогом курсов, достаточно подробным, но не перегруженным описанием обучающих программ;
  • интегрировать новые сервисы: быстрый и понятный поиск курсов по ключевому запросу или направлению профессиональной деятельности, сервис онлайн подачи заявок на обучение, формы обратной связи и многое другое;
  • привлечь на сайт новых пользователей;
Аналитика

Мы начали работу со сбора информации о конкурентах и текущих ресурсах заказчика. Да, сайт у ВКС был, но ему была необходима серьезная реновация, плюс - он плохо работал на смартфонах. Стоит отметить, что старый сайт содержал и продуктивные, хорошо сделанные элементы. Аналитика помогла команде выявить лучшие решения для разработки и дизайна нового ресурса.

Также, мы помогли заказчикам структурировать информацию о клиентских группах, создать портрет ключевых уровней целевой аудитории. Это дало понять каким образом курсы могут быть объединены по направлениям, как их лучше представить посетителям сайта, выявить, что, собственно, они хотят увидеть, попадая на ресурс ВКС.

Этапы работы
Дизайн и проектирование

При разработке дизайна нового ресурса, мы ставили перед собой главную цель - доступность информации для потенциальных клиентов. Так как курсов ВКС более 250, была продумана логика удобного сервиса по выбору обучающих программ.

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

Согласно аналитике, более 60% посетителей предыдущей версии сайта обращались к ресурсу с мобильных устройств - смартфонов и планшетов. Поэтому мы приняли решение разрабатывать дизайн по методологии “mobile first”. Для каждой страницы сайта мы готовили и согласовывали дизайн для смартфона, потом для планшета и уже потом для ПК.

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

Основная часть целевой аудитории - медики, которые хотят получить дополнительную квалификацию. Представителям данной профессии просто необходимо быть уверенными в качестве образования на все 100. Поэтому, на страницы с детальным описанием курсов мы интегрировали дополнительные маркетинговые блоки: отзывы, разрешающие деятельность документы, информацию о преподавателях, краткие видеообзоры курсов.

На каждой странице мы поместили сервис мгновенного оформления заявки на обучение, реализовав эту задачу ненавязчиво. Так, чтобы формы заявки не мешали воспринимать информацию и в тоже время всегда были “под рукой”.

Frontend-разработка

После согласования дизайна ключевых страниц сайта в 3-х версиях - ПК, планшет и смартфон была проведена верстка в HTML-формате. Заказчик смог увидеть то, как будут отображаться итоговые HTML-страницы в браузере у пользователя на каждом из устройств, посмотреть работу механик меню и слайдеров, а также увидеть в действии интерактивные элементы при взаимодействии с пользователем - формы поиска курсов, подсказки, поведение элементов форм при их заполнении.

Вся графика проекта была выполнена в векторном формате и внедрена, как SVG-изображения с использованием SVG-спрайтов. Это позволило достичь максимально качественного восприятия на экранах с большим разрешением (Retina, 4K и т.д.).

По завершении работ по верстке итоговые HTML-страницы были протестированы в сервисе Google PageSpeed Insights и дополнительно оптимизированы для максимально быстрой работы на стороне пользователя.

Программирование

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

В работе над проектом был использован фреймворк Symfony, на основе которого была разработана система управления курсами и выделено API для дальнейших разработок компании (мобильное приложение слушателя курсов или чат-бот). Тестовые и рабочие окружения были реализованы с использованием Docker.

Стек проекта: Docker, PHP7, Symfony/Doctrine, MySQL

Результат.

Несмотря на обилие информации, которую необходимо донести до клиентов “ВКС”, нам удалось создать логичный ресурс с простой и интуитивно понятной навигацией. Мы достигли одной из основных целей - адекватной работы сайта на мобильных платформах, т.к. на данный момент более 60% трафика приходится на смартфоны.

Мы помогли Заказчику с переносом контента со старого сайта на новый с помощью специально разработанного скрипта, а также установили и настроили аналитику Яндекс Метрика и Google Analytics.

Назад в портфолио