Редизайн сайта
на 1С-Битрикс

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

Разберём честно, где редизайн решает, а где ты просто выкинешь 300 тысяч на «стало посимпатичнее».

/Когда редизайн реально нужен

Мобильная версия сделана по остаточному принципу. 70% трафика магазинов — с телефонов. Если сайт рисовали под десктоп в 2018-м, а мобильную «адаптировали как получилось» — ты теряешь большую часть покупателей на входе. Это сегодня причина редизайна номер один.

Люди доходят до корзины — и не покупают. Трафик есть, товары смотрят, в корзину кладут, а заказ не оформляют. Чекаут в пять шагов, обязательная регистрация, поля «отчество» и «индекс» со звёздочкой — каждый лишний экран отваливает часть покупателей. Это не про «устарел», это про деньги, которые уже пришли на сайт и развернулись на кассе.

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

Дизайн мешает функциональности. Хочешь добавить фильтры, быстрый заказ, B2B-кабинет — а старый шаблон трещит по швам, каждая доработка вставляется костылём. Редизайн с обновлением шаблона дешевле, чем вечная борьба со старым.

Скорость. Старые шаблоны с горой ненужных скриптов грузятся по 5–6 секунд. Каждая секунда загрузки — минус к конверсии и минус к позициям в поиске.

/Когда редизайн НЕ нужен — и мы так и скажем

«Директор сказал, что сайт скучный». Вкус директора — не метрика. Если конверсия в норме для ниши, отказы вменяемые, продажи растут — не трогай. Серьёзно. Мы видели, как «освежили дизайн» роняло конверсию: покупатели привыкли, всё находили с закрытыми глазами, а после редизайна — заблудились.

Проблема не в дизайне, а в трафике. Конверсия нормальная, просто посетителей 30 человек в день. Редизайн умножит на ноль ровно так же, как и старый дизайн. Тут нужен не дизайнер, а SEO и реклама.

Проблема в ценах или ассортименте. Если ты дороже конкурентов на 30% без внятной причины — никакой UX не спасёт. Покупатель не «не понял сайт», он всё понял и ушёл туда, где дешевле.

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

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

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

/Вебвизор: смотрим кино про твоих покупателей

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

Типичные находки: человек трижды тычет в картинку, которая выглядит кликабельной, но не кликается. Ищет кнопку «купить» под длинным описанием. Заполняет форму, получает ошибку «неверный формат телефона» — и уходит. Ни один дизайнер «из головы» это не придумает. А запись показывает.

/Карты кликов и скроллов: куда смотрят и докуда доходят

Тепловая карта кликов показывает, куда реально жмут. Регулярная картина: половина кликов — по элементам, которые никуда не ведут, а важная кнопка, гордость прошлого дизайнера, собирает полтора клика в неделю. Карта скролла показывает, докуда доезжают: если ключевой блок «почему мы» видит 8% посетителей — он не существует, сколько бы денег ни стоил его дизайн.

Отдельная песня — «мёртвые зоны» и rage-клики: места, где люди яростно кликают по несколько раз, потому что интерфейс не отвечает. Каждый rage-клик — это покупатель на грани ухода.

/Воронка: где именно отваливаются

Метрика с электронной коммерцией показывает воронку по шагам: каталог → карточка → корзина → чекаут → оплата. Ищем самую дырявую ступеньку. Если из корзины в чекаут проходит 30% — проблема не в «устаревшем дизайне главной», а конкретно в корзине. Туда и бьём в первую очередь. Это и есть разница между редизайном по данным и редизайном по вкусу: бюджет тратится на страницы, где течёт, а не на те, что просто «хочется освежить».

/Гипотезы и A/B: проверяем, а не верим

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

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

Наш порядок обратный — mobile first. Сначала проектируем телефонную версию: один столбец, крупные зоны нажатия, минимум полей в формах, липкая кнопка «в корзину», упрощённый чекаут. Потом раскладываем то же самое на планшет и десктоп. Так главные решения принимаются для того экрана, где происходит покупка, а не для того, где сидит дизайнер.

На что смотрим в мобильном аудите отдельно: скорость на реальном 4G, а не на офисном Wi-Fi; удобство большого пальца — до ключевых кнопок должно доставаться одной рукой; поведение форм — автоподстановка, правильные клавиатуры (цифровая для телефона, а не буквенная); вес страниц — каждый лишний мегабайт картинок на мобильном это секунды ожидания и ушедшие покупатели.

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

Неделя 1. UX-аудит. Смотрим Метрику, вебвизор, карты кликов и скроллов, воронку e-commerce. Интервью с твоими менеджерами — они знают о клиентских затыках больше любой аналитики. На выходе — список проблем с приоритетами: что теряет больше всего денег.

Недели 2–3. Прототип. Wireframes ключевых страниц в Figma — пока без красоты, только структура и логика. Каждое решение аргументируется данными аудита, а не «мне так видится». Согласовываем с тобой на уровне «где что лежит и почему».

Недели 4–5. Дизайн. Прототипы одеваются в фирменный стиль. Адаптив под четыре разрешения — mobile first, потому что трафик там. Дизайн-концепция сначала на одной-двух страницах: утверждаем направление, потом тираж на остальные.

Недели 6–7. Внедрение. Вёрстка и интеграция в шаблон Аспро на стейдже. Отдельный чек: 1С-обмен, эквайринг, доставки, фискализация — всё, что работало, продолжает работать. SEO-чек по метатегам и скорости.

Неделя 8. A/B и запуск. Запускаем новый дизайн на часть трафика, меряем конверсию против старого. Если цифры за нас — раскатываем на 100%. Если где-то просело — разбираемся по вебвизору и докручиваем. Через месяц после релиза — контрольный замер и отчёт «до/после».

Производитель снеков, ~3200 SKU. Корзина и чекаут жили на шаблоне 2019 года: семь шагов оформления, обязательная регистрация, корзина не сохранялась. Половина покупателей отваливалась на вводе адреса — это было видно прямо в вебвизоре.

Что сделали: переехали на Аспро Премьер, перерисовали корзину и чекаут по данным — меньше шагов, гостевой заказ, автоподстановка адреса. Результат: конверсия в заявку +38%, общая конверсия магазина выросла с 0.6% до 1.4%, выручка через сайт — в 2.1 раза за 6 месяцев. Полный разбор с цифрами — в кейсе Семушки.

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

Редизайн по вкусу директора (или дизайнера). Никто не смотрел в аналитику. Перерисовали то, что «выглядело старым», а не то, что теряло деньги. Итог: сайт свежий, конверсия та же. В лучшем случае.

Снесли старое до проверки нового. Выкатили редизайн сразу на 100% трафика, старую версию удалили. Конверсия упала — а откатываться некуда и сравнивать не с чем. Мы всегда запускаемся рядом со старой версией и меряем.

Забыли про SEO. Поменяли URL «для красоты», выпилили тексты, заголовки превратили в картинки. Через месяц трафик −40%, и виноватых нет: дизайн-студия за поиск «не отвечала».

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

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

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

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

Rage-клик — серия яростных кликов по одному месту, когда интерфейс не отвечает. Верный признак: здесь покупатель страдает.

Воронка — путь покупателя по шагам: каталог → карточка → корзина → чекаут → оплата. На каждой ступеньке часть людей отваливается; задача — найти самую дырявую.

A/B-тест — половине посетителей показываем старый вариант, половине новый, сравниваем конверсию. Спор «какой дизайн лучше» решают не вкусы, а цифры.

Прототип (wireframe) — черновик страницы без дизайна: блоки, кнопки, логика. Дешевле десять раз передвинуть блоки в прототипе, чем один раз в готовой вёрстке.

Адаптив — сайт подстраивается под экран: телефон, планшет, ноутбук, широкий монитор. Mobile first — сначала проектируем телефонную версию, потому что покупают там.