Геймификация охраны труда: как мы создали интерактивный сайт-активность для МТС

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

Подготовительный этап:

• Нарратив и концепция: Определены цели проекта, целевая аудитория (сотрудники МТС), структура сайта и механики взаимодействия.
• Прототипы дизайна: Созданы wireframes для главной страницы и активностей.
• Дизайн-макет: Разработан дизайн со строгим соблюдением гайдлайна МТС (цвета, типографика, геометрия элементов, согласованные иллюстрации).
• Контент: Написаны тексты для сайта, ребусов, кроссворда и квиза, а также креативы для email-рассылки.
• Графика: Отрисованы иллюстрации, баннеры и элементы интерфейса.

Техническая реализация выполнена на HTML, CSS и нативном JavaScript для фронтенда, с использованием PHP для обработки данных.

• Frontend: HTML, CSS, нативный JavaScript (без фреймворков для оптимизации скорости).
• Backend: PHP (обработка данных форм, запись в CSV-файлы).

Сайт содержит три основных раздела: ребусы, классический кроссворд по тематике охраны труда и квиз из 12 вопросов. После прохождения каждой активности система сохраняет ФИО участника, его порядковый номер и результат в соответствующий CSV-файл. Это решение оказалось оптимальным, так как не требовало сложной системы администрирования — организаторам достаточно было просто скачать готовые файлы с результатами для проведения розыгрыша.

• Главная страница с описанием мероприятия и кнопками перехода к активностям.
• Ребусы: Статичные изображения с полем для ввода ответа.
• Кроссворд: Классическая сетка с вопросами по охране труда.
• Квиз: Тест с вопросами и вариантами ответов.
• Сохранение результатов: После прохождения данные участника (ФИО, порядковый номер, результат) записываются в соответствующую таблицу.

Проект успешно прошел тестирование, был сдан в срок и использовался компанией МТС для проведения внутреннего корпоративного мероприятия. Основными преимуществами реализованного решения стали строгое соответствие бренд-стандартам, простота выгрузки результатов и стабильная работа всех элементов сайта.

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

• Сайт с тремя активностями, полностью соответствующий бренд-стандартам МТС.
• Автоматизированный сбор результатов через CSV-файлы (без БД).
• Простое администрирование: организаторы скачивали готовые файлы для розыгрыша.

Эффект для заказчика:

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

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