Когда UX, Bitrix и 1С договариваются: кейс интернет-магазина Бетар Волга

Заказчик

«Бетар Волга» — один из ведущих поставщиков сантехники в Волгоградской, Астраханской, Саратовской и Ростовской областях.

Задача

Перед нами стояла задача собрать MVP интернет-магазина с продуманной структурой каталога, фильтрацией и поиском, а дальше сверстать все это на 1С-Bitrix с рабочей связкой с 1С.

Задача: 

«Бетар Волга» — один из ведущих поставщиков сантехники в Волгоградской, Астраханской, Саратовской и Ростовской областях.

Пётр и Светлана  пришли к нам еще два года назад. Тогда они сделали ребрендинг и искали подрядчика, который разработает дизайн для интернет-магазина на 5000+ товаров. Мы разработали дизайн под MVP-версию сайта и передали его внутреннему разработчику «Бетар Волги».

Дальше у сайта началась длинная и непростая история выхода сайта в продакшен. Внутренний разработчик уволился одним днем, не передав проект, и компании пришлось срочно искать подрядчиков на верстку. За 2 года сменилось 3 организации: каждый брал свою часть задач, возникали трудности с тем, чтобы перенести визуал в верстку 1 в 1 по макетам, как и планировались, поэтому агентства упрощали визуал. 

На финальном этапе дизайн, который изначально делался под верстку «с нуля», пытались собрать в Elementor — конструкторе WordPress. В результате сайт оказался в тяжелом состоянии: много лишнего кода, не оптимизированные изображения весом по 1 МБ, долгая загрузка и проседающая производительность.

В 2025 году мы начали работать с 1С-Bitrix, и «Бетар Волга» вернулась к нам спустя 2 года, чтобы реализовать проект так, как задумывали изначально. То есть перед нами стояла задача собрать MVP интернет-магазина с продуманной структурой каталога, фильтрацией и поиском, а дальше сверстать все это на 1С-Bitrix с рабочей связкой с 1С.

Решение: 

У «Бетар Волги» уже был UI-кит и дизайн, который мы сделали 2 года назад. Тогда основательно изучили нишу: проанализировали рынок, конкурентов, пользовательские сценарии. Также обратились к опыту маркетплейсов и крупных интернет-магазинов, чтобы понять, как свести процесс поиска товара и оформления заказа до нескольких кликов.

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

Ниже тезисно, что сделали на проекте:

• Провели новый анализ конкурентов и крупных интернет-магазинов: навигация, каталог, фильтры, поиск, карточка товара;
• Освежили дизайн: упростили карточки, обновили иконки, почистили палитру, доработали список разделов и выпадающее меню;
• Поработали с каталогом: изменили приоритетные разделы в соответствии с разделами в 1С. Настроили фильтрацию для каталога на десктопе и мобильной версии;
• Улучшили UX-копирайтинг: подсказки, статусы, тексты авторизации, избранного и технических страниц;
• Спроектировали и задизайнили новый личный кабинет под B2B: история заказов, реквизиты юрлиц, адреса;
• Проработали поиск: подсказки при вводе, выдача по запросу, необычный сценарий со страницей 404 со строкой поиска;
• Сверстали проект на 1С-Bitrix, настроили связку с 1С и выгрузку 5000+ карточек товаров, которые мы изменяли и загружали вручную;
• Пересобрали UI-кит: убрали лишнее, добавили новые компоненты и привели все к единой системе.

В итоге мы собрали рабочий интернет-магазин под оптовую аудиторию: с загрузкой сайта за 0,9 секунд, понятным путем пользователя и интеграцией с 1С.

Часть 1. Далекий 2023 год 

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

Дальше погрузились в аналитику. Смотрели крупных игроков рынка, интернет-магазины и маркетплейсы:

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

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

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

• главную страницу;
• общий каталог;
• страницу категорий;
• карточку товара;
• страницу оформления заказа для юридических и физических лиц.

Когда структуру согласовали, перешли к дизайну всех страниц и не забыли добавить технические: «Спасибо за заказ», политику конфиденциальности, страницу «404», пустую корзину и пустое избранное.

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

Затем сделали адаптивы под ключевые разрешения и подготовили UI-кит, чтобы у разработчиков были все элементы и интерфейсы: кнопки, поля, карточки, состояния.

Мы передали UI-кит и проект ушел в разработку. За следующие два года сайт так и не вышел в том виде, в котором задумывался: менялись подрядчики, каждый реализовывал отдельные части проекта. В 2025 году Бетар Волга вернулись к нам, и наконец сайт вышел в продакшен! Что изменилось — рассказываем дальше.

Часть 2. 2025 год: свежий взгляд, анализ и прототип

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

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

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

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

Цель анализа: показать заказчику, что конкретно изменилось на рынке и проиллюстрировать, как компании пошли в упрощение интерфейса. 

В анализе обратили внимание на каталог и «Избранное». Смотрели, какие подходы используют конкуренты: 

• компактные списки с 2D-иконками, более привычные для молодой аудитории; 
• крупные блоки с большим расстоянием между категориями и настоящими фотографиями, которые удобны для более взрослой ЦА.

У «Бетар Волги» основная аудитория — зрелая, поэтому мелкие списки с крошечными иконками сразу отпали. Логичнее было сделать каталог более «воздушным» и наглядным.

В навигации ориентировались на сильные примеры. Например, у DNS аккуратно распределены разделы по навигации — без перегруза и понятно. А у Яндекса — современный, дружелюбный интерфейс, пусть и под другую аудиторию. Мы аккуратно собрали все увиденное и через призму задач «Бетар Волги» выбрали то, что действительно поможет их пользователям.

В прототипе и работе с текстами был скорее микрокопирайтинг: 9 страниц уже были готовы, а 20 проектировалась в ранее заданной структуре.

Так как это интернет-магазин, текстов на сайте немного, и большая часть уже была подготовлена нами 2 года назад. Мы не переписывали все с нуля, а точечно дорабатывали формулировки — это была именно UX-редактура.

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

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

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

Изменения в старых решениях 

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

Ниже расскажем о том, что изменилось в старых решениях!

Перегруженные и частично неинформативные карточки категорий

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

Карточка и страница товара 

Дальше занялись упрощением визуала, уделив особое внимание улучшению их дизайна и функциональности. Не только на странице товара или в навигации, а по всему сайту. Убрали лишние обводки и декоративные элементы, сделали карточки легче и чище для восприятия. Это позволило снизить перегруз интерфейса и сконцентрироваться на главном.

Обновили и значок «избранного» — теперь он заметнее и понятнее, поэтому добавить товар в закладки можно в один уверенный клик.

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

Заказчик планировал переход на другую версию 1С и чтобы лишний раз не раздувать бюджет, для каталога придумали такое решение: новые позиции сначала попадают в папку «Разобрать», которая не отображается на сайте. Из 1С на сайт подтягиваются заголовки товаров, вариант цены, который устанавливает менеджер и остатки на складе. Мы заполняем недостающие поля, после чего товар переезжает в основной каталог. Как только Бетар Волга перейдет на новую версию 1С, то интеграция будет работать напрямую, без нашей помощи. 

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

Список разделов

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

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

Спустя 2 года по списку разделов стало неочевидно, что это вообще элемент навигации. Пользователь мог просто «проскроллить мимо» и не догадаться, что по разделам можно переходить и управлять просмотром каталога.

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

Быстрый доступ к разделам каталога

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

Мы обновили иконки на более современные и «чистые», а заодно убрали лишние обводки. Меню стало визуально привлекательным и однородным с дизайном всех страниц.

Палитра цветов

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

UI-кит

Пока обновляли дизайн и функционал, стало понятно: старый UI-кит тоже нужно привести в порядок. Мы пересобрали его так, чтобы с ним было удобно работать дальше — и дизайнерам, и разработчикам.

Сначала убрали неиспользуемые и дублирующиеся компоненты, которые только перегружали систему и мешали быстро ориентироваться. Чем меньше шума в UI-ките, тем проще поддерживать единый стиль на всем сайте.

Потом добавили новые элементы — те, что появились в обновленном дизайне и реально используются в интерфейсе. За счет этого UI-кит стал гибче, а страницы — более цельными и последовательными. Разработчикам проще собирать новые экраны, а пользователям — получать предсказуемый и понятный опыт на каждой странице.

Новые решения

Личный кабинет

От старого стандартного системного личного кабинета мы ушли довольно далеко. Задача была: разработать кабинет, в котором удобно работать b2b-сегменту.

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

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

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

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

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

Поиск

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

Поиск полностью реализован на Битриксе. При запросе можно как кликнуть по конкретной позиции, так и нажать «посмотреть все результаты» и открыть полноценную страницу с выдачей по запросу.

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

Отдельно проработали нестандартный, но важный сценарий — страницу 404. Если пользователь долго выбирал товар в каталоге и по какой-то причине оказался на странице с ошибкой, возврат только на главную не решает его задачу. В этот момент высок риск, что сайт просто закроют.

Поэтому на 404 добавили строку поиска под стандартным сообщением об ошибке. Пользователь может сразу ввести название товара и вернуться к нужной позиции через поиск, вместо того чтобы повторять весь путь по разделам. Это снижает раздражение, удерживает человека на сайте и дает дополнительный шанс дойти до заказа.

Фильтрация

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

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

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

В итоге путь «зашел — отфильтровал — нашел нужный товар» стал гораздо короче, а корзина — ближе.

Путь клиента

У сайта есть особенность: без регистрации пользователь не может добавить товары в корзину или в избранное. Так сделано потому, что в зависимости от оптовика менеджер назначает один из трех вариантов цен. Для MVP-версии — это единственный правильный вариант.

Есть 2 сценария:

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

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

Результат:

В результате у «Бетар Волги» появился работающий интернет-магазин на 1С-Битрикс, который собран вокруг потребностей оптовых клиентов и реальных процессов внутри компании.

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

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

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

При этом архитектура и UI-кит заложены с запасом: дальше можно масштабировать проект — развивать SEO, расширять ассортимент, добавлять отдельный личный кабинет для B2C, акции и новые разделы.

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

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

Перейти на сайт