Корпоративный сайт для B2B-агентства мерчандайзинга, которое занимается выкладкой товаров в торговых сетях для производителей: описание услуги, этапы работы и форма запроса. Создание сайта целиком, от идеи до вёрстки, выполнил Евгений Росляков. Сайтами он занимается с 2016 года, оформлен как самозанятый и подписывает договор, а компаниям выдаёт закрывающие документы. Работает из Москвы и удалённо.
Клиенты агентства — производители продуктов, напитков и бытовой химии. Агентство отправляет мерчандайзеров в магазины, они выставляют товар по планограмме, проверяют наличие и ценники, присылают отчёт с фото. Старый сайт был визиткой: логотип, набор слов вроде «полный спектр услуг» и телефон. Бренд-менеджер, пришедший по рекомендации, не понимал, как всё устроено и сколько это займёт времени, и уходил смотреть других.
Хотели сайт, на котором производитель за пару минут понимает услугу и оставляет запрос. Без стоковых людей и тяжёлых эффектов. Решение о подрядчике принимают двое-трое, и каждому нужно своё.
Сперва разобрал, кто и как приходит на сайт. Составил Customer Journey Map для двух людей: закупщика, который ищет подрядчика, и бренд-менеджера, который потом отвечает за результат. Закупщик спрашивает, сколько точек, какие сети, как контролируется качество и какая цена. Бренд-менеджера волнует, как быстро он увидит отчёт и что делать, если полка пуста. Карту проговорил с руководителем агентства, он поправил несколько этапов по опыту продаж.
Из карты выросла структура. Прототипирование провёл в Figma, начав с серых блоков и настоящих заголовков: первый экран с формулой «что, где, как быстро», этапы работы от брифа до отчёта, примеры отчётов с фото полок, география сетей, вопросы и ответы, форма запроса. Руководитель посмотрел прототип и убрал два раздела, лишних для его клиентов.
Дизайн тоже нарисовал в Figma, по тому же прототипу. Спокойные цвета, крупные цифры там, где они есть (число точек, сроки выезда), настоящие фото выкладки вместо стоков. Карточки этапов, кнопки и поля собрал в библиотеку компонентов, чтобы новые страницы получались быстро и одинаково.
Вёрстка сделана на HTML и CSS, без тяжёлых библиотек. Страницы легко открываются на любом телефоне и в офисе с медленным интернетом. Форма запроса короткая: компания, категория товара, сети, контакт. Письмо с ответами приходит на почту отдела продаж. Вёрстку проверил в основных браузерах и на разных экранах.
На сайте агентства производитель за пару минут видит, как устроена услуга, как выглядит отчёт и что будет дальше. Запрос оставить просто, а отдел продаж получает заявку уже с категорией товара и списком сетей. Первый разговор начинается не с «расскажите, что вы хотите», а с конкретных точек и сроков.
Карта пути клиента пригодилась и вне сайта. Руководитель использует её на встречах с клиентами: по ней видно, какие вопросы закупщик и бренд-менеджер зададут в какой момент, и можно подготовить ответы заранее. Те же этапы легли в презентацию агентства, и сайт с ней говорит одним языком.
Сайт лёгкий и понятный в поддержке. Правки в тексты и цифры вносятся прямо в HTML, а макет в Figma остаётся под рукой для новых разделов. Библиотека компонентов избавляет от переделок: отдельная страница для нового направления, например мерчандайзинга в аптечных сетях, собирается из готовых карточек и блоков.
Дальше агентство планирует добавлять страницы с историями выкладки по категориям. Для них в прототипе уже оставлено место, а структура сайта не потребует перестройки.
Нужен сайт для B2B-услуги, который объясняет её без лишних слов? Напишите мне здесь, на freelance.ru, расскажите, кто у вас покупает, и начнём с карты пути клиента.
