Разработка корпоративного сайта для интегратора IoT-решений AirBit

1. Вводная задача от заказчика, проблематика, цели

Компания «АирБит» — российский разработчик и интегратор IoT-решений для промышленности, ЖКХ, сельского хозяйства и других отраслей. К моменту обращения в агентство у компании уже был сайт, но он перестал отвечать бизнес-задачам и не отражал экспертный уровень.

Основные проблемы:

• Сложная и запутанная структура. Посетителям было трудно разобраться в иерархии: программное обеспечение (LoRaWAN, IoT-платформа), продуктовые решения (по отраслям), услуги (радиопланирование, подбор оборудования), реализованные проекты. Все это было смешано, навигация не работала.
• Отсутствие единой системы управления контентом. Клиент не мог самостоятельно вносить правки, обновлять версии ПО, добавлять новые устройства в каталог.
• Технические ограничения. Устаревший функционал не позволял интегрировать современные маркетинговые инструменты, настроить правильные URL для SEO и сделать сайт удобным на мобильных устройствах.

Ключевые требования клиента:

• Позиционирование AIR-BIT как технологического лидера в сфере IoT
• Структурированная подача сложного технического ассортимента (ПО, оборудование, услуги)
• Демонстрация экспертизы через кейсы и отраслевые решения
• Адаптивный дизайн для всех устройств
• Масштабируемая архитектура на 1С-Битрикс для дальнейшего развития
• SEO-подготовка на этапе проектирования (семантическое ядро, метатеги, URL)

Цели проекта:

• Создать прозрачную и логичную структуру сайта, которая объединит ПО, продуктовые решения, услуги и проекты.
• Разработать современный дизайн с понятным UI/UX, учитывая специфику B2B-аудитории — инженеров, технических директоров, руководителей предприятий.
• Внедрить функционал, который позволит клиенту самостоятельно управлять контентом: обновлять версии софта, добавлять товары в каталог, публиковать новости.
• Обеспечить удобство взаимодействия для разных сегментов ЦА: интеграторы, заказчики, партнеры.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

Этап 1. Аналитика и проектирование структуры

Мы провели аудит текущего контента и совместно с маркетологом клиента разработали новую, иерархически выверенную структуру с учетом типовых решений и URL.

Что сделано:

• Разделены понятия: «Программное обеспечение» (LoRaWAN Network Server, IoT-платформа), «Решения» (по отраслям: Производство, ЖКХ, Ритейл), «Продукция» (устройства), «Услуги».
• Спроектированы типовые шаблоны страниц: для раздела «Решения», для карточки товара, для реализованного проекта. Это позволило
• Разработана структура URL, дружественных для поисковых систем (например, /resheniya/proizvodstvo-i-promyshlennost/).

Этап 2. Дизайн-концепция и UX/UI

Перед дизайнером стояла задача сделать интерфейс «техничным», но не перегруженным, и учесть все требования из многочисленных правок. Мы ориентировались на лучшие практики B2B-сайтов.

Работа со сложными элементами:

• Меню и навигация: Исправили критичную ошибку с выпадающим меню, чтобы курсор можно было свободно перемещать на нужный раздел. Увеличили область срабатывания и отзывчивость.
• Визуальные эффекты: Реализовали фирменный фон, сделав его фиксированным, чтобы создать глубину и современный вид, не отвлекая от контента при скролле.
• Типографика и пространство: Везде увеличили межстрочное расстояние для улучшения читаемости технических текстов. Привели к единому виду заголовки (22px) на страницах услуг.
• Карточки товаров: Для страницы продукта переработали блок с ценами в соответствии с макетом, сделав его информативным и структурированным.

Этап 3. Техническая разработка и функционал

В качестве платформы была выбрана 1С-Битрикс — оптимальное решение для сложных корпоративных сайтов с каталогом. Мы не просто натянули верстку, а настроили множество индивидуальных функций.

Каталог продукции и фильтры:

• Создали структуру каталога: базовые станции, устройства LoRaWAN, NB-IoT, приборы учета и т.д.
• Настроили вывод блока с обратной связью под всеми товарами в каталоге, как требовал клиент.
• Интегрировали возможность вывода цен и характеристик на карточке товара.

Функционал страниц ПО:

• На странице «IoT-платформа» разместили кнопку «Подключиться» и добавили функционал загрузки файлов (документация, презентации) по примеру, с возможностью открытия в новом окне.
• На странице «LoRaWAN Network Server» добавили недостающие блоки и исправили нумерацию версий ПО (1.0.4) прямо в админке, научив клиента делать это самостоятельно.
• Все ссылки на документацию, Telegram-каналы (для LoRaWAN сервера — отдельный канал) и техподдержку настроили на открытие в новых вкладках.

Контент и SEO:

• Настроили возможность быстрого редактирования текста в админке без «вылетов» из системы (исправили критическую ошибку сессии).
• Прописали и дали возможность клиенту менять метатеги и заголовки для каждой страницы.
• Создали кастомную страницу 404, просто и со вкусом оформив ее.
• Сделали ссылки в формах обратной связи кликабельными и ведущими на актуальную страницу политики конфиденциальности.

Этап 4. Работа над ошибками и мобильная версия

Отдельным блоком работ стала обработка массива правок, касающихся мобильной адаптации и кросс-браузерности.

• Шапка и меню: Починили отображение крестика для закрытия меню на мобильных устройствах. Убрали лишние отступы.
• Закрепленная шапка: Реализовали липкую шапку при скролле на десктопе для быстрой навигации в любой точке сайта.
• Футер: Привели футер к единому стилю, выровняв все элементы в одну строку и добавив ссылку на Telegram-канал, как просил клиент. Также исправили порядок пунктов и иконки социальных сетей.
• Типовые страницы решений: Привели к единому макету 8 страниц решений (Производство, ЖКХ, Сельское хозяйство и др.), добавив недостающие блоки «Продукция» и убрав лишние тени.

3. Результаты сотрудничества

• Запущен современный сайт, который позиционирует компанию как технологического партнера, а не просто поставщика.
• Структурирована подача 30+ страниц контента: от технологий до кейсов, что упрощает навигацию для разных сегментов ЦА. Четко разделены ПО, решения под задачи, конкретные устройства и услуги компании.
• Клиент полностью управляет сайтом самостоятельно. Вносит изменения в карточки товаров, обновляет версии ПО, добавляет новые проекты и публикует новости без помощи программистов.
• Адаптивный интерфейс, одинаково удобный на десктопе, планшете и смартфоне.
• Настроены все кнопки, формы и ссылки. PDF-презентации и документация загружаются корректно.
• Сайт имеет правильную структуру URL, настроенные метаданные и готов к SEO-продвижению.