Редизайн интернет-магазина «Новация»

«Новация» поставляет мебель и оборудование для школ и детских садов по всей стране — от парт и глобусов до оснащения медкабинетов и спортзалов.

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

Мы провели UX/ UI-аудит и предложили поэтапный, системный редизайн — без сноса до основания, но с акцентом на то, что критично для бизнеса и пользователей.

Что сделали:

 — почистили код, ускорили сайт и убрали баги;

 — упростили пользовательский путь и интерфейс, чтобы оформление заказа стало понятным;

 — обновили визуал и заложили дизайн-систему для будущего развития;

 — создали основу для автоматизации закупок в следующих итерациях.

В итоге не просто докрутили слабые места, но и добавили полезные фичи — например, мультикорзину. Теперь собирать и управлять заказами стало намного проще.

Раньше сайт грузился по 15–20 секунд, а в часы пик просто падал. Глобальные сбои случались по несколько раз в неделю, восстановление занимало часы. Клиент думал, что дело в атаках, но причина была в другом: легаси-код создавал лавину запросов, сайт перегружал сам себя.

Что сделали:

 — Почистили и переписали ключевые участки под Bitrix24 API, добавили кеширование. Страницы теперь загружаются за 2 секунды (и это ещё не предел).

 — Перевели сайт в облако, включили мониторинг и автобэкапы. Восстановление занимает меньше минуты.

 — Настроили экстренную поддержку.

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

Мы не меняли сценарии радикально, но сделали путь клиента проще и понятнее — особенно с учётом специфики B2G-аудитории.

Что улучшили:

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

 — Сгруппировали товары по типу помещений (кабинет географии, спортзал и т. д.) — так искать нужное проще.

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

Всё это помогает клиентам «Новации» быстрее ориентироваться и доводить заказ до конца.

В ecom-проектах всё начинается с карточки товара — туда идёт основной трафик, от неё зависит, купят или закроют вкладку. Поэтому начали именно с неё:

— Сделали фото крупнее, галерею — на привычном месте, управление — удобнее.

— Важные действия собрали в один блок, чтобы ничто не отвлекало от покупки.

— Убрали сайдбар — всё нужное разместили ниже, структура стала чище.

— Блок с преимуществами компактно разместили рядом с товаром.

— В мобильной версии закрепили кнопку «В корзину», чтобы не терялась.

— Добавили блок «Покупают вместе» — теперь проще собирать комплекты, а бизнесу — поднимать средний чек.

— Для поддержки сделали отдельный служебный блок с кнопкой «Запрос» и возможностью делиться товаром — удобно и покупателям, и сотрудникам.

Карточка стала проще, понятнее и удобнее. Именно то, что нужно для B2B e-com.

Каталог обновили аккуратно — улучшили, но не сломали привычную логику. Покупатели «Новации» ищут не «стулья» и «карты», а решения под задачи — например, «Оснащение школы» или «Медкабинет». Поэтому:

— Сделали превью категорий: сразу видно, что внутри и сколько там товаров.

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

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

Теперь каталог стал удобнее, визуально чище и больше ориентирован на реальные сценарии закупок.

На старом сайте была обычная корзина, как в любом интернет-магазине. Но у «Новации» свои сценарии: менеджеры формируют предложения, клиенты пересылают списки в PDF и Excel, вносят правки — всё вручную и долго. Мы это упростили.

Теперь корзиной можно делиться. Клиент и менеджер работают с ней вместе прямо на сайте: меняют состав, пересобирают — и всё обновляется в реальном времени. Никаких лишних файлов и пересылок.

Как это устроено:

— Обычная корзина работает как всегда.

— При нажатии на «Поделиться», и корзина становится общей. Любой, у кого есть ссылка, может редактировать содержимое.

— Новые товары по умолчанию попадают в личную корзину, а не в общую.

— У каждой общей корзины — своё имя (можно менять), переключение между ними — как вкладки в браузере.

— Нет ограничений по количеству корзин.

Полезные фишки:

— Уведомления: если изменилась цена, товар исчез или появился аналог — система скажет.

— Автогруппировка и сортировка: можно навести порядок в корзине, например, сначала крупные товары, потом — расходники.

— Отдел продаж теперь быстрее собирает КП, а пользователи — удобнее согласовывают сметы.

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

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

Что изменили:

— Добавили быстрые переходы в каталог и популярные категории — теперь проще понять, чем занимается «Новация».

— Вместо длинного описания — кликабельные теги с задачами (например, «Оснащение школы», «Библиотека», «Медкабинет»).

— Баннеры вместо слайдера: без листания, сразу видно акции и УТП.

— Категории товаров теперь ориентированы не на конкретные позиции, а на задачи клиента — как он мыслит в реальности.

— Разместили сторис: компактнее баннеров, цепляют внимание, ведут в каталог.

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

— УТП сверстали в виде 3 простых шагов — понятно и наглядно.

— SEO-тексты интегрировали так, чтобы они не мешали восприятию, но работали на продвижение.

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

Обновили шапку, меню, футер и «хлебные крошки», чтобы сайт стал понятнее и удобнее. Добавили теги рядом с логотипом — переход в каталог в один клик.

Что улучшили в поиске:

— Добавили плейсхолдер «Поиск» и показ популярных запросов при клике.

 — Поиск стал быстрее и умнее: автозаполнение, учёт опечаток и очистка одним кликом.

 — Ищет не только товары, но и отвечает на частые вопросы.

 — Если товар не найден — предлагает аналоги, популярные категории и скидки.

Так навигация стала проще, поиск — точнее, а путь к покупке — короче.

Потенциальные клиенты иногда сомневались, стоит ли работать с подрядчиком из другого города. Чтобы снять это возражение, мы добавили карту с фактами: куда «Новация» уже поставляла товары и сколько объектов оснастила.

Теперь сразу видно: компания работает по всей России, а расстояние — не преграда. Это повышает доверие и подчёркивает масштаб.

Для Brele дизайн-система — не отдельный этап, а часть рабочего процесса. Мы развиваем её постепенно, чтобы интерфейс был цельным, дешевле в разработке и легко масштабировался.

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

— Ускорили загрузку страниц в 10 раз.

— Оптимизировали базовые сценарии — рутинные задачи теперь занимают минимум времени.

— Создали дизайн-систему, чтобы легко масштабировать и развивать сайт по продуктовым стандартам.

— Повысили устойчивость сайта к сбоям в 12 раз.

— Восстановление из бэкапов стало быстрее в 240 раз.