Обучающий портал Строй-С

400 сотрудников, 200 000 товаров и тысячи рабочих инструкций. Без системы все это превращается в хаос, где легко потеряться даже опытному сотруднику. Вместе со «Строй-С» мы решили эту проблему и запустили портал, который объединил обучение и базу знаний в одном месте.

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

При этом чаще всего новичков обучали стихийно: если возникал вопрос, опытный коллега на него отвечал. Это приводило к тому, что одни и те же вопросы задавались снова и снова, а сотрудники усваивали материал неравномерно — кто-то вникал быстро, а у кого-то оставались серьезные пробелы.
При этом высококвалифицированные сотрудники тратили массу времени не на выполнение своих прямых обязанностей, а на постоянные разъяснения стажерам. Так возникла необходимость в обучающем портале — единой точке доступа ко всем материалам, нужным и новичкам, и действующим сотрудникам.
Цели и задачи
«Строй-С» нужен был единый портал, объединяющий все рабочие и обучающие материалы — базу знаний, документы, новости и курсы с тестами. Важно было не просто собрать всё в одном месте, но и выстроить систему, где обучение становится частью ежедневной работы.

Портал должен был поддерживать два формата тестов:
— обучающие — с подсказками и разбором ошибок;
— экзаменационные — без подсказок, для проверки знаний «на чистовую».
Ключевое требование — связать учебные материалы с тестами и дать возможность отслеживать прогресс сотрудников, чтобы компания могла видеть, как развивается каждый специалист.
Зачем вообще связывать тесты и материалы
Если материалы и тесты существуют отдельно, обучение превращается в формальность. Сотрудник может пройти тест, так и не изучив инструкции, или наоборот — прочитать статьи, но не подтвердить, что понял их.
В итоге тест как-то пройден, а на деле непонятно, готов ли человек работать самостоятельно.
Когда материалы связаны с тестами, обучение становится пошаговым. Сначала изучаешь первый блок информации, потом проходишь проверку, и только потом двигаешься к следующему блоку. Это как ключ и замок: пока не откроешь одно, дальше не пойдешь.

Для ритейла это имеет большое значение. Любая ошибка продавца или кассира обходится дорого. Если консультант путается в характеристиках товара или кассир не знает правил возврата, компания теряет и деньги, и лояльность покупателей.
Связка «материал — тест — результат» помогает избежать этого и дает руководителям понимание компетенций сотрудников. Видно, что именно сотрудник прошел, где ошибся и какие темы вызвали сложности.
Как мы подошли к разработке портала
Сперва мы изучили готовые решения — Notion и Teamly. В итоге именно Notion подсказал нам основу: боковую панель для навигации и рабочую область справа. Этот принцип стал каркасом, на который мы «нанизали» собственное решение.
В основе проекта — Битрикс, уже используемый в компании для интернет-магазина, мобильного приложения и структуры в Битрикс24. Чтобы сохранить единую экосистему и упростить интеграцию, обучающий портал тоже создали на этой платформе. Поверх неё собрали интерфейс на собственном UI-ките.

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

Центральная часть экрана при этом дублирует ключевые элементы — это было важно, поскольку на первых тестах сотрудники путались в структуре. Так мы разместили все важные разделы прямо перед глазами, чтобы пользователь с первых секунд понимал, куда идти
.
Это снижает когнитивную нагрузку, особенно для сотрудников без опыта работы с обучающими платформами.
Раздел новостей и редактор контента
В портале есть отдельный раздел с новостями, где сотрудники всегда могут увидеть важные обновления. Чтобы ничего не терялось, новости можно сортировать по дате или по статусу «прочитано/непрочитано», а при необходимости быстро найти нужную публикацию через встроенный поиск.

Каждая новость открывается в полноэкранном режиме и оформлена с помощью встроенного блочного редактора. Это внутренний инструмент, похожий по логике на WordPress или Notion (хотя и чуть проще). Администратор может собирать страницу из разных блоков: текстовых параграфов, изображений, таблиц, списков и файлов.
Профиль пользователя и доступ к материалам
Каждый сотрудник на портале имеет личный профиль. В нем отображаются основные данные — почта, аватарка, список назначенных курсов и их текущий прогресс. Кроме того, мы внедрили наглядный таймлайн прохождения курсов: видно, сколько процентов уже освоено, какие блоки завершены и какие еще предстоит пройти.

Платформа интегрирована с основным сайтом: сотрудник может войти в свою учетную запись и получить доступ ко всем нужным разделам. При этом используется отдельная система прав — интерфейс и возможности зависят от роли пользователя. Например, у обычного сотрудника одна зона доступа, у руководителя — другая.
Зачем это сделано? Продавцу важно быстро находить инструкции, документы и свои курсы. Руководителю же необходим доступ к статистике и прогрессу команды, чтобы управлять обучением. Если открыть все для всех, начнется хаос: сотрудники будут теряться в ненужных разделах, а конфиденциальные данные останутся без защиты.
В личном кабинете также доступна вкладка с внутренними документами: соглашения, инструкции, регламенты. Все материалы рассортированы по папкам и отображаются с иконками форматов (PDF, Excel и т.д.). Файл можно открыть прямо в браузере, прочитать, распечатать или отправить коллеге.

Важно: это не ЭДО, а внутренняя база документов, работающая по принципу корпоративного «диска» внутри портала.
Такой подход позволяет хранить всю рабочую информацию в одном месте — без необходимости собирать сотрудников офлайн, пересылать документы по почте или искать нужные файлы в мессенджерах. Все уже есть на портале, и каждый видит только то, что касается его работы.
Умная фильтрация, контроль ознакомления с материалами и mobile-first
В портале реализована система фильтрации и отслеживания материалов. Сотрудники сразу видят, какие статьи они уже прочитали, а какие еще нет, а администраторы могут отмечать обновленные материалы, если в них появились важные изменения. Такие материалы автоматически поднимаются вверх списка.
Вся активность фиксируется в админпанели: видно, кто ознакомился с материалами, а кто пока не открыл их. Для руководителей это ценно — можно контролировать внимательность к обновлениям в базе знаний.
Чтобы работать с материалами было проще, в статьях сделали удобную навигацию. Если сотрудник помнит, что нужная информация была, например, в пятом параграфе, он может сразу перейти к нужному месту с помощью якорей или иконок.

Понимая, что большинство сотрудников «Строй-С» работают в торговых залах и не имеют доступа к компьютерам, мы сразу сделали ставку на mobile first. Мобильная версия здесь не упрощенная копия, а полноценный инструмент со всем функционалом, доступным и на десктопе.
От материалов к проверке знаний
Портал устроен так, чтобы сотрудники не просто читали материалы, но и сразу могли закрепить знания. Если статья связана с курсом или тестом, к ним можно перейти напрямую — прямо после прочтения. Это превращает обучение в последовательный процесс: изучил материал — проверил себя.
Чтобы нужные документы всегда были под рукой, статьи можно добавлять в избранное. А система лайков помогает быстро вычленить полезные материалы: сотрудники видят, что чаще всего отмечают коллеги, и это становится дополнительной мотивацией открыть материал.

Нужная информация в пару кликов
Чтобы сотрудники не тратили время на блуждание по разделам, в портал встроено несколько вариантов поиска. Есть общий поиск, который работает сразу по всему порталу: по статьям, курсам, тестам, документам и новостям. Достаточно ввести ключевое слово — и система выдаст все совпадения.

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

Внутри теста реализована навигация по вопросам — если ответ правильный, индикатор становится зеленым, если нет — красным. Есть вопросы с одиночным или множественным выбором, текстовые поля, а также возможность прикрепить файл — например, скрин, таблицу или отчет.
Проверка проходит автоматически для тестов с выбором ответов. А текстовые задания проверяет администратор вручную — чтобы учесть более сложные формулировки и нестандартные решения.
Система не дает случайно завершить тест — при нажатии на кнопку «Закончить» появляется поп-ап с подтверждением. Так снижается риск потери результатов из-за случайного клика.

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

Техническая основа портала
Как уже упоминали выше, обучающий портал для «Строй-С» был реализован на базе CMS 1C Битрикс24. Это позволило встроить систему прямо в существующую админку сайта: управление обучающим контентом и настройка прав доступа осуществляются в том же интерфейсе, что и управление основным сайтом.
Frontend-часть построена на HTML, CSS и JavaScript. Изначально использовался стандартный UI-кит, но в процессе мы внедрили собственный, разработанный под фирменный стиль «Строй-С».
Благодаря этому визуальные элементы сайта и портала стали единообразными, а фронтенд-разработчики получили удобный набор компонентов, которые легко переиспользовать и настраивать.

Одной из ключевых задач был выбор редактора для создания материалов. Стандартный инструмент в Битриксе оказался слишком ограниченным и неудобным. Делать собственный редактор с нуля — слишком дорого и долго, а большинство готовых решений либо не давали нужной гибкости, либо были устаревшими. В итоге мы нашли модуль с открытым кодом и удобным интерфейсом, который смогли доработать под задачи клиента.
Интеграция редактора в портал была непростой: пришлось искать технические обходные решения. Но позже мы расширили его возможности — добавили нумерованные списки, кастомные абзацы, улучшили блочное форматирование. Теперь в редакторе можно собирать удобные и структурированные статьи, которые по восприятию близки к привычным системам вроде Notion или WordPress.
Вместо итогов
Сегодня у сотрудников есть единая точка входа ко всей информации, обучение идет пошагово и закрепляется проверкой знаний, а руководители видят прогресс команды и могут быстро реагировать на пробелы. Портал стал не просто «хранилищем инструкций», а инструментом, который экономит время, снижает нагрузку на наставников и помогает компании сохранять и масштабировать опыт.
Для «Строй-С» это означает больше, чем удобство. Это контроль над знаниями, защита от их утраты и база для дальнейшего роста бизнеса.
Стек технологий
HTML
CSS
JS
PHP
1C Битрикс