Бывает: сайт на 1С-Битрикс работает три года, конверсия падает, аналитика показывает — пользователи уходят из каталога на третьем клике. Дизайнер, который делал сайт, работал по ТЗ от маркетинга, не зная структуры компонентов и особенностей рендеринга шаблонов. В результате — красивые макеты в Figma, которые невозможно реализовать без переписывания половины шаблона bitrix:catalog.section. Мы решаем эту проблему, проектируя дизайн с учётом платформенных ограничений и бизнес-задач. Наш опыт: более 10 лет в Битрикс, 100+ реализованных проектов. Подробнее о UX-дизайне.
По данным Nielsen Norman Group, UX-дизайн, интегрированный с платформой, даёт прирост конверсии на 30% больше, чем дизайн без учёта особенностей CMS. Для Битрикс это особенно важно: неправильно спроектированный компонент bitrix:catalog.section может убить продажи. Дизайн-система ускоряет внедрение новых страниц в два раза по сравнению с разрозненными макетами.
UX/UI и конверсия в Битрикс
Исследования Baymard Institute показывают, что плохой UX заставляет 73% пользователей уходить с сайта до добавления товара в корзину. Правильно спроектированный интерфейс повышает конверсию в 1.5–2 раза. В Битрикс это достигается за счёт адаптации дизайна под структуру инфоблоков и компонентов.
Проблемы, которые мы решаем
Проблема нереализуемых макетов
Дизайнеры, не знакомые с Битрикс, часто рисуют нереализуемые элементы: анимированные меню, которые не работают с bitrix:menu, сложные фильтры, требующие кастомного JS, или карточки товаров с нестандартной сеткой, ломающие адаптивность. Мы избегаем этого — каждый макет проверяется на совместимость с компонентами.
Сложная навигация в каталоге
Для интернет-магазина ключевой сценарий — каталог → карточка → корзина. Типичная ошибка — перегруженные фильтры или отсутствие хлебных крошек. Мы проектируем сценарии отдельно для desktop и mobile, учитывая состояния bitrix:sale.basket.basket (пустая корзина, ошибка формы).
Дизайн без дизайн-системы
Без единой системы компонентов поддержка сайта превращается в хаос. Мы создаём дизайн-систему в Figma: цвета, типографика, отступы, состояния кнопок — всё задокументировано.
Преимущества дизайн-системы для Битрикс
Дизайн-система позволяет разработчикам быстрее внедрять новые страницы, используя готовые компоненты. Сравнение: с дизайн-системой время на вёрстку новой страницы сокращается на 50%, а количество ошибок при переносе макетов — на 30%.
Что входит в работу?
| Этап | Результат |
|---|---|
| Аудит | Анализ шаблонов, компонентов, аналитики. Wireframes по ключевым сценариям. ТЗ для дизайна. |
| Проектирование | User Flow, интерактивный прототип (опционально). Согласование сценариев. |
| Визуальный дизайн | Макеты в Figma (desktop + mobile, 3 брейкпоинта). Компоненты с состояниями. |
| Дизайн-система | Библиотека компонентов, спецификации для разработчика. |
| Передача | Figma-файл с Auto Layout, описание анимаций, список затрагиваемых компонентов. |
Важность UX/UI для интернет-магазина
Плохой UX заставляет пользователей уходить — 73% не доходят до кнопки «В корзину» (согласно исследованию Baymard Institute). Правильное проектирование сценариев и адаптивная вёрстка увеличивают время на странице и снижают количество звонков «помогите выбрать». Экономия бюджета на переделках — до 30% от стоимости проекта.
Кейс: редизайн каталога для производственной компании
У нашего клиента — компании, производящей промышленное оборудование, сайт на Битрикс «Бизнес». Проблема: менеджеры жаловались, что клиенты не могут найти модификацию товара — уходили со страницы, не поняв характеристики, звонили в отдел продаж.
Реализованное решение:
- Проанализировали воронку через Вебвизор — 73% пользователей не доходили до кнопки «В корзину».
- Изучили структуру инфоблока: товары имели 12 свойств-характеристик, но компонент
bitrix:catalog.elementотображал их простым списком. - Спроектировали новый UX: характеристики сгруппированы в табы, модификации выбираются через интерактивный конфигуратор на основе
CIBlockElement::GetProperty(). - Отдельно разработали мобильную версию: конфигуратор сворачивается в аккордеон, основные характеристики вынесены над fold.
Результат: время на странице товара выросло, количество звонков «помогите выбрать» снизилось — клиенты стали самостоятельно оформлять заказ. Средний чек на проектирование UX/UI для интернет-магазина — от 200 000 до 500 000 руб. в зависимости от сложности.
Сроки проектирования дизайна
Сроки зависят от объёма и сложности. Малый сайт (до 20 страниц): аудит + wireframes — 3-5 дней, визуальный дизайн — 1-2 недели. Средний (20-80 страниц): 1-2 недели и 3-5 недель соответственно. Крупный (80+ страниц): 2-4 недели и 6-12 недель. Точную оценку даём после аудита.
Процесс работы
- Аналитика — аудит текущего сайта, сбор данных из Метрики, интервью со стейкхолдерами.
- Проектирование — wireframes, user flow, согласование сценариев.
- Визуальный дизайн — макеты в Figma, дизайн-система.
- Тестирование — проверка на реализуемость, юзабилити-тесты (опционально).
- Передача — полный пакет документации разработчикам.
Мы также оказываем постпроектную поддержку: доработки по результатам A/B-тестов, обновление дизайн-системы под новые версии Битрикс. Закажите аудит UX/UI — мы предложим оптимальное решение для вашего проекта. Получите консультацию бесплатно.
Сроки
| Объём сайта | Аудит + ТЗ + wireframes | Визуальный дизайн | Дизайн-система |
|---|---|---|---|
| Малый (до 20 стр.) | 3–5 дней | 1–2 недели | — |
| Средний (20–80 стр.) | 1–2 недели | 3–5 недель | 1 неделя |
| Крупный (80+ стр.) | 2–4 недели | 6–12 недель | 2–3 недели |
Стоимость рассчитывается индивидуально, исходя из количества страниц, сложности компонентов и требуемой глубины прототипирования. Свяжитесь с нами для консультации — мы оценим ваш проект.