Academy

Информация о проекте

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

Цели создания сайта
Перед командой стояла задача разработать с нуля лендинг для бесплатного онлайн-курса «Кибергигиена», который должен:

• представить курс потенциальным слушателям в привлекательном и понятном формате- обеспечить удобный доступ к видеоурокам с возможностью навигации по таймкодам
• предоставить пользователям возможность проверять знания с помощью интерактивных тестов и скачивать памятки в формате PDF
• органично вписаться в общий стиль сайтов «Лаборатории Касперского», но при этом быть достаточно дружелюбным для неспециализированной аудитории
• быть полностью адаптивным для комфортного просмотра на мобильных устройствах

Особенности проекта
Проект отличался высокой степенью вовлечённости заказчика и нестандартными требованиями к функционалу:

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

Решение:
Работа над проектом велась поэтапно и итеративно. На старте была проведена серия встреч для уточнения целевой аудитории и стилистики: было решено сохранить общую стилистику сайтов «Лаборатории Касперского», но сделать визуал более дружелюбным и доступным для неспециалистов. На основе прототипов, созданных в Miro, мы подготовили несколько вариантов оформления первых экранов, которые после обсуждения были доработаны с учётом замечаний.

Параллельно с дизайном велась разработка фронтенда на Vue.js. Был создан кастомный видеоплеер с поддержкой таймкодов, который позволял переходить к нужным фрагментам урока. Для каждого урока реализован блок с тестом: после просмотра видео пользователь мог ответить на вопросы и сразу увидеть пояснения к правильным и неправильным ответам. Также под каждым видео размещалась памятка в формате PDF, доступная для скачивания.

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

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

Сайт органично вписалась в экосистему «Лаборатории Касперского».