Разработка мобильного e‑commerce приложения OBI: кейс BrandStudio
Мобильное e‑commerce приложение — это не только интерфейсы и дизайн, но и работа с бизнес‑логикой, ИТ‑ограничениями, процессами ритейла и поведением пользователей. В этом кейсе BrandStudio рассказывает, как разрабатывали мобильное приложение OBI для российского рынка: почему понадобился отдельный продукт, как команда принимала решения в условиях централизованной архитектуры, какие гипотезы проверяли, с какими трудностями столкнулись и к каким результатам пришли.
Вводные проекта по разработке мобильного приложения OBI
На момент старта проекта компания OBI присутствовала на российском рынке через офлайн‑гипермаркеты и интернет‑магазин. Сайт работал на централизованной немецкой CMS, что накладывало серьезные ограничения на развитие цифровых сценариев: любые изменения в интерфейсе, логике каталога или оформлении заказа требовали согласования с международной командой и внедрялись централизованно.
Как отмечает Павел Кузьмин, на тот момент начальник отдела электронной коммерции и программ лояльности в OBI, было важно, чтобы клиент получал одинаково удобный и понятный опыт во всех каналах — в интернет‑магазине, физическом гипермаркете и мобильном приложении. На практике это означало не просто «сделать приложение», а выстроить самостоятельный продукт, который учитывает локальные ожидания пользователя и при этом не ломает существующую экосистему ритейлера.
Поэтому мобильное e‑commerce приложение команда BrandStudio изначально рассматривала как параллельный канал развития: продукт, который можно быстрее улучшать и адаптировать под российский рынок, не завися от длинных циклов обновления основной платформы.
Рассылка: как вести бизнес в России
Пять полезных писем пришлем сразу после подписки. В них — бизнес‑идеи, готовые промпты для нейросетей, советы, как выбрать налоговый режим и получать пассивный доход
Ограничения и условия разработки e‑commerce приложения
Разработка мобильного приложения для интернет‑магазина OBI велась с учетом следующих вводных:
- централизованная ИТ‑архитектура;
- сайт на немецкой CMS;
- ассортимент порядка 5 миллионов SKU;
- привязка наличия товаров и способов доставки к конкретным магазинам;
- существующие операционные процессы доставки и самовывоза.
Главной сложностью было то, что «правильный UX» нельзя было спроектировать в отрыве от процессов: любое решение упиралось в данные о наличии, правила комплектования заказа, ограничения по доставке, особенности самовывоза и то, как устроена работа магазинов на земле. Поэтому команда принимала продуктовые и технические решения по принципу «как будет работать в реальности» и где пользовательский путь не развалится из‑за инфраструктуры.
Проектирование логики мобильного e‑commerce приложения
Перед началом разработки команда BrandStudio провела комплексную продуктовую аналитику. Был собран Customer Journey Map, охватывающий ключевые сценарии:
- поиск и подбор товара;
- навигация по каталогу;
- работа с карточкой товара;
- добавление в корзину;
- оформление заказа и выбор доставки.
Дополнительно были изучены лучшие практики российского e‑commerce: структура каталогов, логика фильтрации, сценарии выбора товаров и оформления покупки. Эти данные легли в основу проектирования интерфейсов мобильного приложения.
Дальше этот анализ переводили в решения: что обязательно должно быть в карточке товара, какие подсказки и сервисы уменьшают сомнения, какие элементы экономят время при выборе из огромного ассортимента. Чтобы не «угадать» продуктовую логику на этапе разработки, все ключевые сценарии собрали в кликабельные прототипы и проверили до начала реализации — внутри команды и на пользователях, которые проходили весь путь покупки целиком.
Результат этой стадии — прототипы и согласованные принципы продукта: где сценарий должен быть бесшовным, какие действия нельзя выносить на сайт, и какие изменения дадут заметный эффект без ломки процессов.
Как был собран пользовательский путь в приложении
Навигация и поиск. В мобильном приложении была реализована отдельная структура каталога. Поиск перевели на движок Elasticsearch — в первую очередь из‑за масштаба ассортимента и требований к релевантности выдачи. Фильтры сделали динамическими: они формируются автоматически в зависимости от категории и ассортимента, чтобы пользователь быстрее приходил к результату.
Отдельным сценарием стала работа приложения в гипермаркете. Приложение определяет, в каком магазине находится покупатель, и показывает актуальную выкладку товара. Дополнительно реализовали навигацию по магазину — маршрут прокладывается прямо до нужной полки. Для DIY‑ритейла это важный продуктовый момент: приложение начинает помогать не только «купить онлайн», но и решить задачу здесь и сейчас — найти, сравнить, понять, что подходит, и не тратить время на поиски в торговом зале.
Карточка товара и сервисные сценарии. Карточку товара усилили функциональностью, которая помогает принять решение о покупке и уменьшает количество сомнений. Появились:
- подборки сопутствующих товаров;
- ссылки на инструкции и обучающие материалы;
- сервисные калькуляторы для расчета количества материалов.
Логика здесь была прагматичной: в строительных категориях пользователь покупает не «товар», а решение задачи (поклеить обои, положить ламинат, рассчитать расход). Если приложение помогает посчитать и подобрать, оно снимает барьер выбора и снижает риск ошибки — а значит, повышает вероятность покупки и уменьшает количество моментов, когда пользователь «передумал» на этапе оформления корзины.
Оформление заказа. Отдельным и самым чувствительным блоком стал чекаут. Один из важных выводов на проекте — что даже качественный каталог и карточка не спасают, если финальный этап распадается на разные системы и логики. Поэтому команда бстд разработала автономный мобильный чекаут, в котором оформление заказа происходит внутри приложения.
В чекауте были реализованы:
- доставка и самовывоз;
- доставка по координатам (GPS‑точке) — критичный сценарий для загородных участков и строящихся объектов;
- модульная структура оформления заказа;
- автоматический расчет дополнительных услуг (если применимо);
- возможность редактирования данных без перезагрузки страниц.
Важные решения здесь касались не только UX, но и операционной эффективности. Например, часть данных об условиях доставки пользователь вводит заранее, что снижает объем уточнений со стороны колл‑центра. Модульность и редактирование без перезагрузок решали другую проблему: пользователь не теряет контекст и не боится «сломать» заказ, если нужно поменять адрес или способ доставки.
Маркетинговые и сервисные функции приложения
В мобильное приложение заложили инструменты, которые сделали его не только каналом покупки, но и каналом коммуникации:
- баннерные зоны;
- промо‑блоки;
- push‑уведомления.
Приложение использовалось и в офлайн‑магазинах. В нем реализовали сканирование товаров для проверки актуальной цены и наличия. Сканер штрих‑кода стал частью сценария «увидел → проверил → добавил → оформил»: покупатель может отсканировать товар в магазине, добавить в корзину и продолжить оформление уже в приложении. Там же работал сценарий Click & Collect без очереди: заказ формируется в приложении, а получение происходит на стойке выдачи без прохождения общей кассы.
Дополнительно внедрили сервисные калькуляторы для выбора напольных покрытий, обоев, клея и других материалов, чтобы приложение также закрывало типовые DIY‑задачи.
Роль мобильного приложения OBI в период пандемии
В период пандемии мобильное приложение стало одним из ключевых каналов продаж. Пользователи использовали его для просмотра ассортимента, формирования корзины и оформления доставки. В приложении была доступна доставка по адресу или по точке на карте, включая загородные участки — это усилило ценность продукта в момент, когда аудитория массово сместилась в онлайн.
К концу 2020 года количество установок мобильного приложения OBI превысило 700 000.
Выводы и опыт BrandStudio
Опыт разработки мобильного e‑commerce приложения OBI позволил команде сформулировать выводы, полезные для других ритейл- и e‑commerce проектов:
- мобильное приложение для e‑commerce следует проектировать как самостоятельный продукт, особенно если основная платформа ограничивает скорость изменений;
- автономный мобильный чекаут критичен для бесшовного пользовательского пути и конверсии;
- сервисные функции в карточке товара (калькуляторы, инструкции, подборки) напрямую влияют на принятие решения о покупке;
- офлайн‑сценарии (сканирование, навигация, быстрый самовывоз) усиливают ценность мобильного продукта для DIY‑ритейла;
- ограничения ИТ‑архитектуры и бизнес‑процессов нужно учитывать на этапе продуктового проектирования — иначе стоимость изменений и переделок резко растет.
Этот подход был зафиксирован внутри BrandStudio как часть продуктовой методологии и в дальнейшем использовался при разработке мобильных и e‑commerce решений для других клиентов.
Результаты проекта
Для OBI:
- самостоятельный мобильный продукт для российского рынка;
- возможность развивать мобильное приложение отдельно от сайта;
- коммуникация с пользователями через push‑уведомления и промо‑блоки;
- автономный чекаут для оформления заказа и доставки.
Для пользователей:
- полный цикл покупки в мобильном приложении;
- сервисные функции для выбора и расчета материалов;
- доставка по адресу и по координатам.
Для BrandStudio:
- отработали подход к запуску сложного мобильного продукта;
- зафиксировали внутреннюю продуктовую методологию, которая в дальнейшем использовалась в других e‑commerce‑проектах;
- команда получила опыт разработки сложных сервисных сценариев в масштабе крупного ритейла.
