Разработка мобильного e-commerce приложения OBI: кейс BrandStudio

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

Вводные проекта по разработке мобильного приложения OBI

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

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

Павел Кузьмин

Экс-начальник отдела электронной коммерции и программ лояльности в OBI

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

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

Ограничения и условия разработки e-commerce приложения

Разработка мобильного приложения для интернет-магазина OBI велась с учетом следующих вводных:

1. централизованная ИТ-архитектура;
2. сайт на немецкой CMS;
3. ассортимент порядка 5 миллионов SKU;
4. привязка наличия товаров и способов доставки к конкретным магазинам;
5. существующие операционные процессы доставки и самовывоза.

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

Проектирование логики мобильного e-commerce приложения

Перед началом разработки команда BrandStudio провела комплексную продуктовую аналитику. Была собрана карта пути клиента, охватывающая ключевые сценарии:

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

Дополнительно были изучены лучшие практики российского e-commerce: структура каталогов, логика фильтрации, сценарии выбора товаров и оформления покупки. Эти данные легли в основу проектирования интерфейсов мобильного приложения.

Фрагмент анализа UX‑элементов у конкурентов

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

Примеры прототипов мобильного приложения для OBI

Как был собран пользовательский путь в приложении

1. Навигация и поиск

В мобильном приложении была реализована отдельная структура каталога. Поиск был переведен на движок Elasticsearch. Фильтры стали динамическими и формировались автоматически в зависимости от категории и ассортимента.

Павел Кузьмин

Экс-начальник отдела электронной коммерции и программ лояльности в OBI

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

2. Карточка товара и сервисные сценарии

В карточке товара появились дополнительные блоки:

1. подборки сопутствующих товаров;
2. ссылки на инструкции и обучающие материалы;
3. сервисные калькуляторы для расчета количества материалов.

3. Оформление заказа

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

В чекауте были реализованы:

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

Фрагмент оформления доставки по GPS-точке в новом приложении OBI

Маркетинговые и сервисные функции приложения

В мобильное приложение были заложены:

1. баннерные зоны;
2. промо-блоки;
3. push-уведомления.

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

Павел Кузьмин

Экс-начальник отдела электронной коммерции и программ лояльности в OBI

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

В приложении был реализован сценарий «Закажи и забери» для самовывоза

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

Роль мобильного приложения OBI в период пандемии

В период пандемии мобильное приложение стало ключевым каналом продаж. Пользователи использовали его для:

1. просмотра ассортимента;
2. формирования корзины;
3. оформления доставки.

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

К концу 2020 года количество установок мобильного приложения OBI превысило 700 000.

Выводы и опыт BrandStudio

Опыт разработки мобильного e-commerce приложения OBI позволил команде бстд сформулировать ряд выводов, которые могут быть полезны другим e-commerce и ритейл-проектам:

1. мобильное приложение для e-commerce следует проектировать как самостоятельный продукт;
2. автономный мобильный чекаут критичен для удобства пользователей и роста конверсии;
3. сервисные функции в карточке товара (калькуляторы, инструкции, подборки) напрямую влияют на принятие решения о покупке;
4. сценарии использования приложения в офлайн-магазине усиливают ценность мобильного продукта для ритейла;
5. ограничения ИТ-архитектуры и бизнес-процессов необходимо учитывать на этапе продуктового проектирования, а не на стадии разработки.

Этот подход был зафиксирован внутри BrandStudio как часть продуктовой методологии и в дальнейшем использовался при разработке мобильных и e-commerce решений для других клиентов.

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

Для OBI

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

Для пользователей

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

Для BrandStudio

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