Novaline — корпоративный сайт B2B-агентства мерчандайзинга

Евгений Росляков, разработчик сайтов с 2016 года. Я самозанятый: оформляем договор, после оплаты компания получает закрывающие документы. Живу в Москве, а работаю с заказчиками и в Москве, и удалённо по всей России. Сайт Novaline работает, всё, о чём ниже, можно открыть и посмотреть.

Novaline — агентство из Москвы, которое выводит команды мерчандайзеров в розничные сети по всей стране. Выкладка товара, монтаж торгового оборудования и POS-материалов, аудит полок и цен, а ещё подбор и сопровождение всего персонала, который этим занимается. Клиенты — производители товаров повседневного спроса. Им нужно, чтобы продукция стояла одинаково хорошо в Москве, Казани и Владивостоке и чтобы это можно было проверить.

Особенность ниши: результат работы агентства находится в тысячах магазинов, куда заказчик сам не придёт. Бренд-менеджер оценивает подрядчика по отчётам, срокам и дисциплине команды. А до первого отчёта — по сайту. Поэтому сайт здесь заменяет первую встречу: показывает масштаб, объясняет модель работы, снимает страх «сотрудники не будут ходить по маршрутам» и подводит к запросу расчёта.

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

Я сформулировал три задачи: показать масштаб, сделать контроль видимым и довести до расчёта. Работал один, от погружения в бизнес до запуска: структура, прототипирование, визуальный язык, вёрстка двенадцати страниц на HTML5 и CSS3, адаптив, анимации, формы.

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

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

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

часто заказывают разово. Плюс «О компании», вакансии, контакты, политика и аккуратная 404. Сначала всё это жило в прототипе: передвинуть блок там — минуты, переделать свёрстанную страницу — дни.

Главная по экранам. Каждый экран отвечает на следующий вопрос заказчика. Кто вы и чем полезны — полный цикл, запуск от 5 дней и цифры компании сразу. С кем работали — логотипы FMCG-брендов. Что делаете — четыре формата с понятной разницей. Кто будет работать — подбор, оформление и замена

сотрудника за 24 часа. Как это контролировать. Как быстро стартуете — четыре шага. Где работаете — восемь федеральных округов. В каких сетях. Остались вопросы. И форма расчёта.

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

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

Визуальный язык. Глубокий синий — надёжность и дисциплина, им сделаны тёмные блоки и заголовки. Оранжевый — сигнал: кнопки, важные слова, линии маршрутов. Его мало, поэтому взгляд цепляется за важное. Вместо стока — объёмные иллюстрации стеллажей, маршрутов с метками и витрин в той же палитре. Шрифты Manrope и Golos Text отдаются с собственного сервера.

Путь к заявке. В B2B мало кто покупает с первого визита, зато многие готовы запросить расчёт. Поэтому кнопки звучат по контексту: «Рассчитать проект» на первом экране, «Запустить проект» после этапов, «Запросить регион» рядом с географией. Форма собирает ровно то, что нужно для первой сметы: имя,

телефон, компанию и поле «регионы, сети, количество точек». Перед ней — частые вопросы про стоимость, минимальный объём и разовый аудит.

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

будет стоить именно им, и для этого есть кнопка.

Сайт собран вручную на HTML, CSS и JavaScript, без конструктора и тяжёлой CMS: нет базы данных, которую надо защищать, и плагинов, которые ломаются после обновлений. Оптимизация скорости страницы шла с первого дня: WebP для всей графики, локальные шрифты, иллюстрации ниже первого экрана подгружаются

при прокрутке. Я замерил живой сайт: HTML главной в сжатом виде 22 КБ, 27 запросов при загрузке и ни одного обращения к сторонним сервисам.

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

вертикальную ленту, кнопка «Рассчитать проект» всегда под рукой.

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

Если вы продаёте услугу, которую нельзя показать одной фотографией, — аутсорсинг, логистику, сервис, — напишите мне через freelance.ru. Расскажите, кто у вас принимает решение и чего он боится, и я предложу

структуру сайта, которая ответит на эти страхи раньше менеджера.