От немецкого движка к своей экосистеме: как мы спроектировали сайт OBI

Предыстория сайта и сложности в работе с ним

Сайт obi.ru, согласно требованиям немецкого головного офиса OBI, был разработан на их собственном движке, что накладывало большие ограничения и на российский офис компании, и на нас, как на подрядчика.

Поскольку мы не имели прямого доступа к CMS, все лендинги для акций, сезонные каталоги, ресурс с программой лояльности OBI CLUB, контентный проект с полезными статьями DIY.OBI и прочие инструменты создавались вне основного сайта. 

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

Построенный на опыте рынка Германии, UI ресурса уже не отвечал потребностям и привычкам российских покупателей. 

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

Продавец и покупатели, или задача главной страницы сайта

Любое изменение в устоявшихся интерфейсах приводит к стрессу пользователей, а полный редизайн обычно вызывает первичное неприятие. За более чем 10-летнее существование obi.ru, несмотря на неизбежное устаревание, постоянно посещало несколько миллионов покупателей, которые привыкли к существующему дизайну.

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

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

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

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

Поэтому мы разработали главную, которая является конструктором из всевозможных видов каруселей.

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

Каталог 

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

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

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

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

Сюда же мы добавили ссылки на вдохновляющие, актуальные товару статьи с контентного ресурса diy.obi.ru: например, про то, как самостоятельно выровнять пол, правильно установить двери и так далее. 

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

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

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

Войти или зарегистрироваться

OBI проводят большое количество масштабных акций. Плюс, клиенты регистрировались в программе лояльности, благодаря чему накопился значительный пул данных в CRM, но привязка шла к e-mail, как к основному виду данных. Если же эта информация отсутствовала, то лид считался незаполненным. Ранее e-mail-рассылка была основным маркетинговым инструментом для контакта с пользователями.

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

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

Корзина

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

В связи с этим перед нами, среди прочих, стояли задачи:

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

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

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

Доставка и чекаут

Централизованность стока и автоматическое оформление доставки из нескольких магазинов позволили нам предусмотреть логику абсолютно нового чекаута.

Еще мы учли, что при строительстве нового дома его просто может не оказаться на карте, из-за чего раньше доставку приходилось заказывать до ближайшего адреса. Неудобно, согласитесь? Теперь же достаточно указать координаты места и курьер привезет заказ, ориентируясь по точке GPS. Добавилась опция сообщить об особых условиях доставки, если, например, к строению нетипичный подъезд. Это, к слову, помогло снизить нагрузку на операторов, так как раньше все эти детали приходилось узнавать им.

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

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

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

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

Гибкость системы

И, наконец, мы смогли прийти к той самой омниканальности, к которой так стремились: к объединению obi.ru, программы лояльности OBI CLUB, мобильного приложения и проекта DIY. Нашей целью было создать одинаково понятный и приятный опыт покупателя — в офлайн-гипермаркете, на сайте и в мобильном приложении.

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