От немецкого движка к собственной e-commerce экосистеме: как агентство BrandStudio сделало редизайн сайта OBI

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

Мы покажем:

1. с какими системными ограничениями сталкиваются крупные бренды;
2. какие продуктовые решения работают в e-commerce для ритейла;
3. какие выводы стоит учитывать при редизайне интернет-магазина;
4. как выстраивать омниканальную digital-экосистему.

Предыстория сайта OBI и ограничения CMS

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

Какие проблемы это создавало на практике:

1. лендинги акций, сезонные каталоги, OBI CLUB, контентный проект DIY.OBI и другие инструменты часто делались вне основного сайта;
2. размещение баннеров было процессом со строгим таймингом и согласованиями;
3. любые доработки и интеграции оформлялись через техподдержку Германии;
4. баги и изменения внедрялись дольше, чем требовал рынок.

Плюс UI, построенный на немецкой модели потребления, перестал соответствовать российским ожиданиям (доставка, скорость выбора, сценарии «быстрой покупки»). После нескольких лет запросов центральный офис одобрил разработку самостоятельного сайта для России.

Как мы работали: процесс, который помог не «сломать» привычки пользователей

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

1) Диагностика и рамки

1. зафиксировали бизнес-цели (скорость запуска акций, автономность, интеграции, омниканальность);
2. описали ограничения платформы и зависимостей (наследие старой CMS, внешние системы, процессы согласований).

2) UX/UI-ресерч и аналитика

1. провели ресерч крупных e-commerce игроков: навигация, каталоги, поиск, фильтры, рекомендательные блоки, паттерны главной и карточки товара;
2. отдельно проверили, какие элементы старого интерфейса являются «якорями узнаваемости», которые нельзя резко убирать.

3) Проектирование ключевых сценариев

Мы начинали с задач пользователя: найти товар → понять наличие и доставку → оформить → вернуться и повторить.

4) Итерации и согласование

В крупном ритейле многое упирается в согласования и риск-менеджмент. Поэтому решения упаковывались как проблема → гипотеза → как влияет на конверсию/поддержку/маркетинг → что меняем → как измеряем.

Редизайн главной страницы e-commerce сайта

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

Мы начали с масштабного UX/UI-ресерча e-commerce проектов крупных ритейлеров. Проанализировали навигацию, каталоги, поиск, рекомендательные блоки и визуальные паттерны.

Пример разработки прототипа нового сайта OBI

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

1. сохранили узнаваемый хедер;
2. адаптировали меню под поведение пользователей на основе аналитики;
3. реализовали главную страницу как конструктор из каруселей с актуальными предложениями;
4. сохранили визуальную преемственность с офлайн-гипермаркетами, включая стилистику ценников.

Главная страница интернет-магазина OBI после редизайна. Узнаваемость сохранена, а структура стала более гибкой

Каталог и фильтрация товаров

Одна из главных проблем старого сайта — жесткая привязка ассортимента к конкретному магазину. Такая логика работала для рынка Германии, но в России с ростом доставки — особенно в пандемию — стала неудобной и мешала покупке.
Решение: перейти к логике, где ассортимент формируется на уровне города, а магазин становится источником доставки.

Как это выглядит в продукте:

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

Трудность: при изменении логики стока и цены легко потерять доверие пользователя.

Как решили: сделали изменения прозрачными — с понятными уведомлениями и прогнозируемым поведением корзины и чекаута.

Карточка товара: как мы усилили продажи и не перегрузили интерфейс

Карточка товара стала одной из самых крупных зон редизайна: это место, где решается и конверсия в покупку, и средний чек, и нагрузка на поддержку (вопросы про доставку, наличие, характеристики).

Что добавили:

1. рекомендательные карусели («похожие товары», «рекомендуем», «товары из серии») — как аккуратный драйвер допродаж;
2. интеграцию контента DIY.OBI: связанные статьи и инструкции, которые помогают выбрать и использовать товар;
3. переработанную структуру отзывов;
4. наглядное отображение тарифов и условий доставки;
5. кастомные карточки под разные категории (например, ламинат и двери — разные по логике выбора и атрибутам);
6. отдельные слоты под задачи бизнеса (например, баннерные места для вендоров).

Трудность: найти баланс между «больше полезного» и «не перегрузить карточку».

Как решили: группировали информацию по важности сценария покупки, оставляя ключевое на первом экране, а второстепенное — ниже.

Карточка товара OBI: рекомендации, доставка и отзывы собраны в понятную структуру

Авторизация и программа лояльности: как снизили порог входа

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

Мы перешли к логике, которая уже была привычна пользователю по мобильному приложению:

1. вход и регистрация по номеру телефона;
2. подтверждение по SMS-коду;
3. e-mail — опционален (и может запрашиваться только под конкретные выгоды, например скидку на первый заказ);
4. сценарии унифицированы между сайтом и приложением.

Корзина, доставка и чекаут

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

Корзина: что поменяли

1. предусмотрели уведомления о товарах, которые выходят из наличия (это стало встречаться чаще из-за большего городского стока);
2. отображаем актуальные цены в зависимости от адреса доставки;
3. учли особенность складского учета: товар может быть доступен «в теории», но не доступен к доставке — добавили бейдж/сигнал, чтобы пользователь узнавал это до финального шага;
4. если товара больше нет в наличии — показываем pop-up с каруселью аналогов, чтобы не терять покупку.

Товары, которых больше нет в наличии, показываются иначе — с подсказками и альтернативами

Доставка и чекаут: какие решения внедрили

1. автоматизировали сценарии доставки из нескольких магазинов;
2. добавили GPS-точку для случаев, когда нового дома еще нет на карте (курьер ориентируется по координатам);
3. сделали поле для особых условий доставки (нетипичный подъезд, комментарии) — это снижает нагрузку на операторов;
4. автоматический расчет дополнительных услуг (грузчики, манипулятор, подъем и т.д.) — максимум прозрачности без «сюрпризов»;
5. реализовали модульный чекаут: каждый логический шаг — отдельный модуль/поп-ап, данные сохраняются, можно вернуться назад и изменить без потери прогресса;
6. добавили сценарии, связанные с лояльностью: оформить виртуальную карту, увидеть свой уровень и преимущества с учетом геолокации (в разных городах механики могли отличаться).

Страница корзины OBI в новом интерфейсе с товарами, ценами и параметрами доставки

Омниканальность и гибкость системы

Наша основная цель была в том, чтобы объединить покупателя во всех точках контакта. В итоге мы объединили сайт, программу лояльности, мобильное приложение и контентные проекты OBI в единую e-commerce экосистему.

Отдельно важная для бизнеса часть — скорость маркетинга: мы внедрили конструктор лендингов, который заметно ускорил запуск акций и сезонных каталогов (то, что раньше съедало ощутимый ресурс, теперь собирается быстрее и проще).

Результаты проекта

Для бстд как digital-агентства с многолетней экспертизой в e-commerce и ритейле этот проект стал возможностью реализовать накопленный продуктовый опыт и закрыть задачи бизнеса системно.

Редизайн и разработка сайта OBI позволили:

1. упростить вход и регистрацию пользователей;
2. повысить удобство онлайн-покупок;
3. ускорить запуск маркетинговых активностей;
4. создать масштабируемую архитектуру сайта;
5. обеспечить единый пользовательский опыт онлайн и офлайн.

Показатели за 2020 год:

1. 32,5 млн уникальных пользователей сайта obi.ru;
2. 609,5 тыс. активированных карт OBI CLUB.

Чек-лист: что важно учесть при редизайне e-commerce сайта крупного ритейлера

На основе проекта OBI команда бстд сформулировала практические выводы, которые будут полезны бизнесу, планирующему редизайн или разработку e-commerce платформы.

1. Оцените ограничения CMS до старта проекта

Если сайт работает на закрытой или централизованной CMS, это почти всегда:

1. замедляет запуск новых функций;
2. усложняет интеграции;
3. повышает стоимость изменений.

Вывод: гибкая и масштабируемая CMS — фундамент развития e-commerce.

2. Сохраняйте узнаваемость интерфейса

Полный отказ от привычных паттернов может вызвать негативную реакцию постоянных пользователей.

Вывод: редизайн должен развивать интерфейс, а не ломать пользовательские привычки.

3. Проектируйте каталог под доставку, а не под магазин

Логика ассортимента, привязанная к конкретной торговой точке, плохо работает в условиях роста доставки.

Вывод: городская или региональная модель стока повышает удобство и конверсию.

4. Используйте карточку товара как инструмент продаж

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

Вывод: карточка товара — ключевой элемент e-commerce, а не просто описание продукта.

5. Снижайте порог входа в личный кабинет

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

Вывод: авторизация по номеру телефона и SMS — стандарт для современного e-commerce.

6. Делайте чекаут модульным и прозрачным

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

Вывод: прозрачный чекаут = меньше поддержки и выше доверие.

7. Стройте e-commerce как часть экосистемы

Сайт, мобильное приложение, программа лояльности и контент должны работать как единое целое.

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