ONBD — digital-бюро

Омниканальность для 600+ магазинов: как мы перезапустили мобильное приложение «Юничел» на React Native

2026-08-18T09:51:14.500Z

Делимся кейсом масштабного обновления мобильного приложения для бренда «Юничел» — крупнейшего российского производителя обуви с федеральной розничной сетью из более чем 600 магазинов в России и Казахстане. Рассказываем, как объединить e-commerce платформу, 1С, розничные склады и электронную систему лояльности в единый быстрый продукт на стеке React Native и Expo.

Вторая версия мобильного приложения Юничел

Исходная ситуация: вызовы федерального ритейла

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

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

Разрыв логики сайта и приложения: Механики оформления заказа, расчета скидок и применения промокодов существовали обособленно, что усложняло поддержку и путало покупателей.
Тяжелая синхронизация остатков: В сети более 600 розничных точек. Покупатель должен видеть актуальное наличие конкретного 38-го или 42-го размера в своем городе в режиме реального времени.
Отсутствие гибкого управления контентом: Главный экран приложения был жестко статичным — маркетологи не могли оперативно менять баннеры, запускать промо-акции и переставлять блоки без участия разработчиков и выкатки обновлений в App Store и Google Play.

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

Архитектура: Перевод на прямой REST API интернет-магазина

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

Frontend: Кроссплатформенная разработка на React Native & Expo. Это позволило получить нативную производительность интерфейса на iOS и Android при единой кодовой базе.
Backend & REST API: Мобильное приложение переведено на прямое взаимодействие с API e-commerce платформы (HostCMS).
Синхронизация с 1С: Двусторонний обмен данными с учетной системой сети в реальном времени. Цены, персональные накопительные скидки, остатки на складах и статусы заказов обновляются мгновенно.

Бонусная карта лояльности и главный экран приложения

Ключевые решения проекта

1. Электронная карта лояльности со штрих-кодом на кассе

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

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

2. Умное бронирование и примерка в розничной сети

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

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

Каталог, фильтры и наличие товара в магазинах розницы

3. Единый чекаут и динамическое управление контентом

Сквозная корзина и оформление заказа: Логика чекаута, способов оплаты и доставки полностью повторяет веб-версию интернет-магазина. Клиент получает абсолютно предсказуемый и привычный опыт независимо от того, покупает ли он с компьютера или со смартфона.
Управление блоками из CMS: Маркетологи компании могут менять акционные баннеры, запускать сезонные распродажи и менять порядок промо-подборок на главном экране напрямую из административной панели без участия разработчиков.

4. Мгновенные обновления «по воздуху» (Expo OTA Updates)

Один из главных технологических прорывов этого релиза — интеграция технологии EAS / Expo Over-The-Air Updates.

Теперь доработки UI, улучшение верстки экранов и срочные хотфиксы доставляются на смартфоны пользователей моментально при следующем запуске приложения. Нам больше не нужно ждать от нескольких часов до суток, пока Apple или Google одобрят обновление в App Store и Google Play.

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

Результаты внедрения новой версии

Рост частоты использования бонусной карты: Доля покупок с применением электронной карты лояльности на кассах розничной сети выросла более чем на 40%.
Сокращение времени на оформление заказа: Единый чекаут и быстрая авторизация по SMS снизили процент отказов на этапе корзины.
Бесшовная поддержка: Управление акциями из CMS и OTA-обновления сократили затраты команды ритейлера на поддержку приложения в 2.5 раза.

Итог

Для крупного сетевого ритейла мобильное приложение — это не просто отдельная витрина, а связующее звено между цифровыми продажами и физической розницей. Грамотная интеграция с 1С, электронная программа лояльности и удобный модуль бронирования превращают смартфон покупателя в постоянный канал повторных продаж.

Если вы развиваете розничную сеть или интернет-магазин и планируете разработку современного мобильного приложения на React Native с интеграцией 1С — обращайтесь в бюро дизайна и разработки ONBD. Спроектируем и запустим продукт под ключ.

От внутренней боли к собственному SaaS: Как мы создали Сторси — AI-видеопродакшн для fashion-ритейла

2026-07-17T12:17:32.079Z

Как превратить внутренние процессы диджитал-бюро в коммерческий SaaS? Рассказываем на примере Сторси — платформы AI-видеопродакшна для fashion-ритейла, которую мы вырастили внутри бюро ONBD. Ниже — наш практический опыт упаковки сложной технологии в понятный продукт, особенности гибридного подхода (AI + арт-дирекшн) и выводы, которые помогут вашему бизнесу.

Сторси — AI-видеогенерация cinematic-контента для e-commerce с контролем качества от арт-директора

Проблема e-commerce: Почему фото больше не продают

Современный покупатель избалован контентом. Листая ленты в соцсетях, он привык к динамике, движению и красивой подаче (Reels, TikTok, Stories). Когда этот же пользователь заходит в интернет-магазин одежды или аксессуаров и видит плоские, статичные фотографии на белом фоне — он скучает.

Обычные фото не передают динамику ткани в движении, текстуру материала и то, как вещь «сидит» в реальной жизни. Отсюда две главные проблемы fashion-ритейла:

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

Решение очевидно: внедрять качественный видеоконтент (cinematic-ролики) в карточки товаров. Но делать видеопродакшн для тысяч позиций вручную — это колоссально дорого и долго.

Как родилась идея Сторси: От ручной работы к автоматизации

Изначально наше бюро ONBD разрабатывало e-commerce проекты под ключ. Для некоторых премиальных брендов мы вручную создавали короткие видеоролики, чтобы оживить интерфейс и карточки.

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

Мы поняли, что полностью отдавать видеогенерацию на откуп «чистому AI» пока нельзя — страдает качество, а брендам важна эстетика. Поэтому мы заложили в основу Сторси гибридный подход: технологичные алгоритмы генерации + экспертный контроль и ручные правки от персонального арт-директора для каждого клиента.

Что мы разработали: Продукт изнутри

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

1. Высококонверсионный промо-сайт

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

2. Умная система бронирования и демо

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

Интерфейс бронирования созвона

3. Персонализированные презентации

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

Слайд коммерческого предложения с видео-примерами

4. Собственная CRM-система для продакшна

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

Форматы работы Сторси

Технологический стек проекта

Для создания сверхбыстрого интерфейса и интеграции с генеративными моделями мы выбрали следующий стек:

Фронтенд: Next.js (с App Router) и Tailwind CSS для мгновенной загрузки и плавных анимаций интерфейса.
Бэкенд: Собственная микросервисная архитектура, оптимизированная под распределенный рендеринг видео и интеграцию с AI-нейросетями.
Интеграции: Кастомные скрипты автоматической сборки PDF-презентаций для клиентов «на лету».

Рекомендации разработчикам

Результат и выводы

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

Для нашего диджитал-бюро ONBD этот кейс стал подтверждением того, что мы умеем создавать не только классические интернет-магазины, но и сложные продуктовые IT-решения с интеграцией искусственного интеллекта.

Хотите запустить собственный SaaS-сервис, внедрить AI в бизнес-процессы или разработать технологичный интернет-магазин?

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

Как продавать премиальные рейки по всей РФ: создаем Headless-каталог с интерактивным калькулятором раскладки на Next.js

2026-07-17T07:35:54.393Z

Делимся кейсом разработки интернет-магазина для бренда Acwood (производитель премиальных акустических и реечных панелей на фетровой основе). История о том, как уход от готовых шаблонов в сторону кастомного Headless-стека (Next.js + HostCMS) помог бизнесу автоматизировать сложную доставку крупногабарита и увеличить конверсию в заказы на 35%

Предыстория: Почему стандартные решения не работали

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

Сложность выбора товара: Клиенты не понимали, сколько реек им нужно купить под конкретные размеры своих стен (с учетом высоты потолков и технологических зазоров). Из-за этого менеджеры тратили часы на ручные расчеты в переписках.
Проблема «тяжелой» логистики: Панели — товар крупногабаритный и тяжелый. Рассчитать доставку нескольких паллет до Владивостока или Мурманска вручную на сайте было невозможно. Клиент видел корзину без цены доставки, пугался неопределенности и уходил.

Нам нужно было превратить сложный B2B-процесс подбора строительных материалов в легкую и эстетичную покупку.

Архитектура: Зачем здесь Headless (Next.js + HostCMS)

Для реализации проекта мы выбрали связку Next.js (фронтенд) и HostCMS (бэкэнд) по принципу Headless-архитектуры:

Next.js отвечает за то, чтобы сайт «летал». Все переходы между страницами происходят мгновенно, без перезагрузок. Это критически важно для мобильного трафика.
HostCMS скрыта от пользователя и работает как надежная база данных. В ней менеджеры управляют ценами, остатками на складах и заказами. Общение между фронтом и бэком идет по быстрому REST API.

Решение 1. Интерактивный калькулятор раскладки как лидогенератор

Главная фишка сайта — кастомный калькулятор подбора панелей. Мы спроектировали интерфейс, в котором покупатель:

Вводит высоту и ширину своей стены.
Выбирает длину панели (60 см или 280 см) и направление монтажа.
Система мгновенно выдает чертеж раскладки реек на стене и автоматически рассчитывает точную площадь покрытия и необходимое количество штук.

Больше никаких звонков менеджерам с вопросом «А сколько мне нужно реек на стену 3 на 2.5 метра?». Покупатель видит чертеж, нажимает кнопку «Добавить в корзину» и весь комплект товаров отправляется в заказ.

Калькулятора раскладки

Решение 2. Борьба с брошенными корзинами и интеграция СДЭК

Чтобы решить проблему скрытой стоимости доставки, мы внедрили полноценный One Step Checkout (оформление заказа на одной странице) с интеграцией API службы доставки СДЭК:

Каждому товару в каталоге прописаны точный вес и габариты.
При добавлении товаров в корзину система «на лету» складывает их объемные и весовые характеристики.
При вводе адреса покупателем сайт отправляет запрос к API СДЭК и мгновенно выводит реальную стоимость доставки до двери или ближайшего пункта выдачи.

Покупатель сразу видит финальную сумму заказа с учетом доставки тяжелого груза и может моментально оплатить её картой или через СБП.

Кастомный чекаут и доставка

Результаты в цифрах

После запуска новой платформы мы замерили ключевые показатели эффективности бизнеса:

95+ баллов по Google PageSpeed: Сайт находится в зеленой зоне производительности на мобильных устройствах. Мгновенный отклик напрямую снизил показатель отказов.
-35% брошенных корзин: Прозрачный автоматический расчет доставки СДЭК и покупка в один шаг убрали страх «скрытых платежей».
Рост прямых продаж: Калькулятор раскладки стал самой посещаемой страницей каталога. Более половины всех заказов на сайте оформляются именно через него.

Главный вывод

Для премиального e-commerce стандартные шаблоны и конструкторы часто становятся бутылочным горлышком. Инвестиции в кастомный UX (интерактивные калькуляторы) и современный технологический стек (Headless Next.js) окупаются за счет автоматизации рутины менеджеров и резкого снижения числа брошенных корзин.

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