Создание сайта

Barline

Barline — российский производитель профессиональных сиропов и ингредиентов для баров, кафе и ресторанов, поставляющий продукцию в более чем 70 стран. Продукты компании широко используются в индустрии HoReCa и высоко ценятся за стабильное качество, разнообразие вкусов и соответствие международным стандартам.

К моменту обращения к нам компания уверенно закрепилась на рынке, однако существующий сайт не отвечал задачам современного цифрового продвижения и автоматизации бизнес-процессов. Онлайн-канал не выполнял функции центра продаж, взаимодействия с дистрибьюторами и аналитики. Отсутствовали инструменты отслеживания остатков, кабинет партнёра, онлайн-управление заказами и глубокая интеграция с 1С.

Перед нашей командой стояла задача не просто создать новый сайт, а разработать единую цифровую экосистему, объединяющую:

• интернет-магазин для розничных покупателей,
• личный кабинет для дистрибьюторов с региональной логикой,
• внутреннюю панель менеджера с аналитикой, ABC-анализом и управлением заказами,
• систему синхронизации с 1С,
• интеграции с CRM, мессенджерами, телефонией и сервисами аналитики,
• и одновременно — SEO-ориентированный проект с масштабируемой архитектурой.

Проект Barline стал одной из самых комплексных и технологически насыщенных разработок в нашей практике — сочетающей B2B, B2C и внутренние процессы в одной платформе, с упором на надёжность, удобство и развитие. В кейсе мы подробно покажем, как именно мы реализовали этот проект: от стратегии и UX до интеграций, SEO и роста трафика.

Цель проекта заключалась в создании многофункциональной цифровой платформы для компании Barline, объединяющей в себе:

• корпоративный сайт, представляющий бренд, философию и линейку продукции;
• интернет-магазин, ориентированный на конечного потребителя (B2C);
• инструменты для дистрибьюторов, позволяющие оформлять оптовые заказы, видеть остатки, свои цены и историю взаимодействий;
• внутреннюю систему для менеджеров, включающую аналитику продаж, источники заказов, ABC-анализ по товарным позициям и контроль за действиями партнёров;
• надежную и гибкую интеграцию с 1С, CRM и внешними сервисами;
• масштабируемую SEO-структуру с возможностью расширения ассортимента и продвижения в поиске по широкому семантическому ядру.

Проект должен был решать сразу несколько стратегических задач:

📦 Для B2B:

• Автоматизировать приём заказов от партнёров по регионам;
• Упростить работу с менеджерами: контроль, распределение, аналитика;
• Обеспечить партнёрам удобную и безопасную работу с системой в личном кабинете.

🛒 Для B2C:

• Создать современный интернет-магазин с удобной навигацией и фильтрацией;
• Интегрировать инструменты онлайн-заказа, уведомлений и отслеживания;
• Поддержать рост прямых розничных продаж.

🚀 Для маркетинга и SEO:

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

Таким образом, сайт должен был стать не просто витриной, а универсальной цифровой инфраструктурой для продаж, аналитики, дистрибуции и продвижения.

Задачи

1. Унификация B2C и B2B в одной системе

• Объединить интернет-магазин и личные кабинеты дистрибьюторов на одном домене;
• Реализовать различные ценовые уровни, скидки и остатки — в зависимости от типа пользователя;
• Разграничить доступ и функционал для розничных клиентов, партнёров и менеджеров.

2. Автоматизация дистрибуции и работы с заказами

• Встроить функционал оформления оптовых заявок через ЛК дистрибьютора;
• Подключить автоматическое обновление остатков и цен из 1С;
• Обеспечить отображение всех заказов в кабинете менеджера с расширенной аналитикой.

3. Гибкая система аналитики и контроля

• Настроить в ЛК менеджера отображение:

— ABC-анализа по продуктам;

-источников заказов (откуда пришёл клиент);

-KPI по партнёрам и динамики продаж.

4. Масштабируемость и готовность к развитию

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

5. SEO и органический рост

• Создать SEO-дружественную структуру, способную нарастить ассортимент до сотен товарных карточек;
• Обеспечить полную техническую оптимизацию: от скорости загрузки до микроразметки;
• Сформировать контентную стратегию для роста органического трафика.

Основные вызовы

• 💼 Сложная логика работы с партнёрами: ценообразование, видимость остатков, маршрутизация заявок.
• 🔁 Интеграция с 1С: необходимо обеспечить стабильный обмен данными и мгновенное обновление данных.
• ⚙️ Высокие требования к точности и контролю: ошибка в отображении остатков или цен может повлиять на партнёрские отношения.
• 🌐 Поддержка разных типов пользователей в единой системе: потребовалась проработка UX на уровне сценариев и ролей.
• 🚀 SEO-архитектура с заделом на рост: проект сразу создавался с прицелом на серьёзное расширение по товарам и семантике.

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

Исследование и аудит

Комплексный анализ включал в себя:

• 🔎 Аудит прежнего сайта Barline с выявлением всех слабых сторон: низкая конверсия, устаревший интерфейс, отсутствие структурированной каталогизации и SEO-основы.
• 🧩 Исследование конкурентов — как локальных, так и международных брендов сиропов и ингредиентов для HoReCa. Анализ показал, что большинство из них либо не охватывают B2B-сегмент, либо делают это через внешние системы.
• 👥 Сбор потребностей целевых групп: розничные покупатели, дистрибьюторы, бариста, управляющие, менеджеры по продажам, региональные представители.
• 💬 Интервью с отделом продаж и логистики клиента, чтобы учесть реальные бизнес-процессы и сценарии использования системы.

Проектирование архитектуры

На основе аналитики была выстроена масштабируемая архитектура сайта, сочетающая в себе:

• 🛍️ Интернет-магазин B2C с каталогом, фильтрацией, акциями и корзиной;
• 🧾 Кабинеты дистрибьюторов с отображением остатков, цен и заказов;
• 📊 Кабинеты менеджеров, где отображаются источники заказов, ABC-анализ, история клиентов;
• 🔄 Интеграционные модули — для связи с 1С, CRM и аналитикой;
• 🌍 Техническая база для мультирегиональности и мультиязычности.

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

Техническое задание

На выходе мы сформировали:

• Полноценное ТЗ для разработки на базе Bitrix с описанием всех ролей, логики, бизнес-правил, сценариев работы;
• Подробную матрицу прав доступа и ролей;
• Структуру URL, навигации и каталогов — с учётом SEO;
• Блок-схемы бизнес-процессов: от заказа и подтверждения до аналитики и обновления остатков.

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

Проработка пользовательских сценариев

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

🔸 Для розничных покупателей:

• Быстрый просмотр каталога сиропов и добавок;
• Подбор вкуса по назначению (бар, кофе, десерт и т.д.);
• Оформление заказа без регистрации;
• Уведомления о наличии, скидках и новых вкусах.

🔸 Для дистрибьюторов:

• Вход через защищённую авторизацию;
• Просмотр личных закупочных цен и остатка на складе;
• Быстрое оформление повторных заказов;
• Загрузка документации и актов сверки.

🔸 Для менеджеров:

• Просмотр всех заказов по дистрибьюторам;
• ABC-анализ по продуктам;
• Контроль KPI, статистика по регионам;
• Видимость источника каждого заказа.

Прототипирование

На базе сценариев мы создали интерактивные прототипы более 30 ключевых экранов:

• Главная страница;
• Каталог товаров и карточка продукта;
• Корзина и оформление заказа;
• Кабинеты партнёра и менеджера;
• Модуль аналитики и фильтрации;
• Интеграционные окна 1С, уведомления, статусы доставки.

Все прототипы были согласованы с клиентом и доработаны по итогам совместных обсуждений с IT-отделом и отделом продаж компании.

UX-решения

Особое внимание было уделено:

• 💡 Упрощённой навигации: пользователь быстро попадает к нужному продукту или функции.
• 📱 Мобильному сценарию B2B: партнёры часто оформляют заказы с телефона, находясь вне офиса.
• 🔐 Защите данных: каждый тип кабинета имеет уникальные уровни доступа и отображения информации.
• ⚙️ Контекстной логике: отображение только тех функций, которые доступны конкретному пользователю.

На этапе дизайна мы стремились объединить фирменную эстетику бренда Barline с удобством цифрового сервиса. Дизайн должен был быть одновременно современным, «вкусным» и профессиональным — отражающим премиальность продукции и серьёзный подход к работе с дистрибьюторами.

Концепция

Основу визуальной концепции составили три ключевых направления:

• 🍓 Эмоциональный визуал для B2C — яркие, сочные изображения сиропов, аппетитных напитков и коктейлей, которые вызывают интерес и доверие у конечных потребителей;
• ⚙️ Структурная чистота для B2B — строгая сетка, акценты на функциональности, лаконичные иконки и графики;
• 📱 Полная адаптивность — сайт одинаково удобен на смартфоне, планшете и десктопе.

Элементы дизайна

Были разработаны и реализованы:

• 🌐 Главная страница — с фокусом на ключевые линейки продукции и навигационные блоки по направлениям;
• 🛒 Карточка товара — с фото высокого разрешения, характеристиками, рекомендациями по применению и мгновенным добавлением в корзину;
• 👤 Личный кабинет партнёра — с табами для заказов, аналитики, документов, поддержки и сообщений;
• 📊 Кабинет менеджера — с дашбордом, фильтрами, отчётами и поиском по активности дистрибьюторов;
• 🧾 Страницы об оплате, доставке, бренде и производстве — имиджевые разделы, подчёркивающие международный масштаб компании.

Цветовая палитра и типографика строились на основе корпоративных стандартов Barline, а иконки и визуальные модули были созданы индивидуально, без использования шаблонных решений.

Утверждение и подготовка к вёрстке

После нескольких итераций презентаций и внутреннего тестирования мы финализировали:

• Дизайн-систему для будущих разделов и адаптации;
• Интерактивные макеты для всех ключевых страниц;
• Готовые UI-компоненты для повторного использования в разработке.

Сайт Barline разрабатывался как единая платформа, объединяющая корпоративный сайт, интернет-магазин и B2B-систему дистрибуции. Основной стек — CMS 1С-Битрикс, выбранная за надёжность, гибкость и мощную экосистему для крупных бизнесов с глубокими интеграциями.

Front-end разработка

На этапе вёрстки мы реализовали:

• 💻 Адаптивную вёрстку для всех экранов (мобильные, планшеты, десктопы);
• 🧩 Интерактивные элементы — фильтры по вкусам, всплывающие корзины, быстрые действия в личных кабинетах;
• ⚙️ Интеграцию с кнопками связи (телефон, e-mail, Telegram, WhatsApp) в зависимости от сегмента пользователя;
• 🔍 Поиск и фильтрация в каталоге и в B2B-аналитике.

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

Back-end разработка

Функциональность платформы строилась вокруг трёх ключевых направлений:

🛒 1. Интернет-магазин (B2C):

• Каталог продукции с фильтрацией по вкусам, применению, объёму и акции;
• Интеграция с корзиной и системой онлайн-оплаты;
• Уведомления о наличии и скидках;
• Система регистрации и отслеживания заказов.

🏢 2. Личный кабинет дистрибьютора (B2B):

• Заказ продукции по индивидуальным ценам;
• Отображение остатков по складам;
• Загрузка прайсов и документации;
• Отображение истории взаимодействий и заказов;
• Интеграция с 1С для автоматического обновления остатков и цен.

📊 3. Кабинет менеджера:

• Дашборд по активности дистрибьюторов;
• Источники трафика по заказам;
• ABC-анализ по товарам;
• Отчёты по регионам и клиентам.

Интеграции

Реализован широкий набор интеграций:

• 🔄 1С — для обмена остатками, статусами и заказами в режиме онлайн;
• 📩 Почтовые уведомления и авторассылки (через SMTP и внутреннюю CRM);
• 📈 Яндекс.Метрика и Google Analytics — для отслеживания конверсий, поведения и эффективности каналов;
• 🧠 Bitrix24 — интеграция с CRM и задачами отдела продаж;
• 💬 Мессенджеры — Telegram и WhatsApp для быстрых коммуникаций.

Перед релизом проекта мы провели комплексное тестирование, охватывающее все пользовательские сценарии, бизнес-логики и интеграционные модули. Наша задача — не просто «запустить сайт», а запустить безошибочную цифровую систему, где B2B, B2C и внутренние процессы работают синхронно.

Тестирование пользовательских сценариев

Проверили корректную работу:

• 💼 Регистрации, авторизации и восстановления доступа для дистрибьюторов и менеджеров;
• 🛒 Добавления товаров в корзину, оформления и отслеживания заказов;
• 📊 Отображения аналитики, динамики продаж и ABC-отчётности;
• 🔄 Обновления остатков и цен через 1С;
• 📥 Получения уведомлений, писем, автосообщений и данных через CRM.

Также выполнено A/B-тестирование ключевых элементов интерфейса (например, кнопок «Купить», фильтров, карточек товаров) для повышения конверсии в заказ.

Техническая оптимизация

Проект прошёл следующие доработки:

• 🚀 Оптимизация скорости загрузки всех страниц (в том числе тяжёлых разделов каталога);
• 🛡 Настройка HTTPS, защита форм и авторизаций, антиспам;
• 🗺 Генерация карты сайта и robots.txt для SEO;
• 🧱 Настройка кэширования и CDN — для ускоренной работы сайта в регионах.

Запуск и подключение аналитики

Сайт был перенесён на продакшн-сервер, где:

• 🔌 Активированы все интеграции;
• 📈 Подключены Яндекс.Метрика, Google Analytics, цели и события;
• 🧩 Установлены SEO-модули, трекеры трафика и поведенческих показателей.

Также внедрён внутренний мониторинг ошибок, отказов и метрик нагрузки.

В результате:

• Сайт начал стабильно функционировать как единая B2B+B2C платформа;
• Личный кабинет дистрибьютора стал активным каналом заказов;
• Скорость обработки заявок и контроль над партнёрами существенно повысились.

Следующим этапом проекта стало SEO-продвижение и цифровой маркетинг, которое мы реализовали параллельно и продолжаем до сих пор.

Итоги проекта:

• ✅ Разработан корпоративный сайт и интернет-магазин на единой платформе;
• ✅ Внедрена мощная B2B-система с кабинетами партнёров и менеджеров;
• ✅ Интеграция с 1С, Bitrix24, CRM и мессенджерами автоматизировала бизнес-процессы;
• ✅ Сайт стал удобным инструментом для заказов, аналитики, сопровождения сделок и коммуникаций;
• ✅ Реализована SEO-оптимизация, обеспечившая приток трафика (25 000+ уникальных посетителей в месяц).

Постпроектное развитие

Проект не завершился на запуске — напротив, он стал платформой для дальнейшего роста:

• 📈 Проводится системное SEO-продвижение и контентная стратегия;
• 🛠 Постепенно внедряются новые возможности (динамическое ценообразование, рекомендации, персонализация);
• 🌍 Ведётся подготовка к международной локализации платформы;
• 📦 Расширяется ассортимент и функциональность витрины, подключаются новые партнёрские сервисы.