Строй-С Мобильное приложение

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

Задача

Ассортимент магазина включает более 200 000 товаров для дома, дачи, строительства и ремонта

Иными словами, если вы задумали ремонт, строительство или обновление интерьера, в «Строй-С» вы найдете всё необходимое.

Такой объем номенклатуры привел к закономерной проблеме — увеличилась нагрузка на консультантов. Сотрудникам необходимо было сопровождать клиента на всех этапах: сперва консультировать, затем оформлять предварительный чек на товары и отдавать их в зоне выдачи. Перед выдачей товара покупатель шёл на кассу с предварительным чеком и оплачивал заказ.

Рост потока покупателей делает такой процесс зависимым от увеличения числа консультантов и кассиров, так как их участие необходимо на каждом этапе покупки. В случае со Строй-С это привело бы к многократному росту затрат на ФОТ, поэтому мы приняли решение пересмотреть и оптимизировать сценарий взаимодействия с покупателем в магазине.

Решение — автоматизация процесса офлайн-покупок

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

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

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

Как это работает

Когда покупатель сканирует QR-код с помощью камеры смартфона, он автоматически попадает в карточку товара в приложении. Если приложение не установлено и QR-код сканируется впервые, система предложит его скачать. Эта технология носит название App Links (для Android) и Universal Links (для iOS).

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

Как система проверяет, установлено ли приложение?

Когда пользователь сканирует QR-код или переходит по ссылке, система анализирует, зарегистрировано ли приложение для работы с этим URL. Если оно есть, открывается нужный экран внутри приложения. Если нет — выполняется переход на сайт, который перенаправляет пользователя в магазин приложений.

Чтобы связать приложение с сайтом, используются специальные файлы конфигурации. В iOS это apple-app-site-association, а в Android — assetlinks.json. Они хранятся на сервере и подтверждают, что определенные ссылки действительно принадлежат приложению.

Как создается уникальный идентификатор?

Для связи сайта и приложения используется уникальный идентификатор. В iOS он включает в себя Team ID разработчика и Bundle Identifier приложения, а в Android — Package Name и цифровую подпись приложения. Эти параметры позволяют системе однозначно определить, какое приложение должно открываться при переходе по ссылке.

Как обеспечивается безопасность?

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

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

Расширили возможности приложения, включив в него функцию онлайн-покупок

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

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

Мы начали с анализа требований и поиска референсов. В качестве примеров для вдохновения рассматривали приложения Лемана ПРО и Касторамы, а также Ozon и Wildberries. Это позволило нам изучить лучшие практики и адаптировать их под специфику отрасли.

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

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

Как эти аспекты влияют на разработку?

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

Объединение онлайн- и офлайн-опыта в приложении

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

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

Как это реализовано? Приложение запрашивает доступ к геопозиции. Если доступ разрешен, система определяет, где находится пользователь, и показывает, например, следующее уведомление: «Магазин Строй-С на улице Гвардейской». Это позволяет разблокировать сканер QR-кодов. Если доступ к геопозиции запрещен, пользователь может вручную выбрать магазин, и сканер также станет доступен.

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

Функционал

Авторизация

Процесс начинается с этапа авторизации. Сперва появляется прелоадер с логотипом, после чего пользователю предлагают зарегистрироваться.

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

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

Главный экран

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

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

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

Ниже расположены карточки с разделами. Мы показываем не весь список товаров, а только 4-6 ключевых позиций. Отсюда пользователь может перейти в раздел и изучить его подробнее. Чтобы пользователь не устал листать однообразное полотно из карточек, разделы на главной разбавляются баннерами с акционными предложениями и новинками.

Умный поиск

Отдали приоритет поиску, а не фильтрам

Когда пользователь нажимает на строку поиска, перед ним сразу появляется история его запросов — это позволяет быстро выбрать то, что он искал ранее.

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

Кроме того, поиск может предложить категории товаров, к которым относится запрос. Например, если искать «шуруповерт», система покажет категории: шуруповерты, электроинструменты, товары для дома и т.д.

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

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

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

Например, пользователю проще ввести «шуруповерт аккумуляторный Макита» и сразу увидеть нужный товар, чем искать через категории: «Электроинструменты» → «Шуруповерты» → «Аккумуляторные» → «Бренд». Люди не хотят тратить время на сложные пути — они хотят сразу получить результат.

Каталог

В каталоге реализована трехуровневая структура навигации:

— Первый уровень — это сам каталог и его основные разделы.
— Второй уровень — подразделы каталога. Например, если я захожу в «электротовары», мне могут сразу показать связанные с ними товары. Если товар является самостоятельной единицей, подразделов может не быть — тогда вместо них сразу отобразятся товары.
— Третий уровень — если вложенность большая, мы показываем конкретную категорию и количество товаров в ней. Это помогает пользователю сразу понять, с каким объемом ассортимента он столкнется, учитывая, что в магазине более 200 000 товарных единиц.

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

О фильтрах

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

Что происходит при нажатии на него? Мы выбираем нужные параметры, и они сразу отображаются в виде чипсов. Это сделано для того, чтобы пользователь мог быстро ориентироваться. Например, вы выбрали фильтры по цене, рассрочке и другим параметрам, но потом поняли, что рассрочка вам не нужна.

В этом случае можно сразу удалить этот фильтр из табов, не прокручивая весь список. А если нужно сбросить все, то достаточно нажать кнопку «Очистить все».

Процесс покупки

О корзине

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

В верхней части корзины есть разделы: «Товары в наличии», «Рассрочка», «Долями» и «Товар под заказ». Здесь можно выбрать нужный вариант, и система покажет, какие товары доступны для покупки тем или иным способом. Это помогает быстро сориентироваться и оформить заказ удобным способом.

Зачем это нужно?

Дело в том, что некоторые товарные категории, например, цементные смеси, имеют низкую рентабельность. Из-за этого в интернет-магазинах строительных материалов система скидок работает неоднозначно. Нельзя просто применить скидку в 5% на все товары: на одни категории она распространяется, на другие — нет.

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

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

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

Однако в нашем случае пользователь может перейти в раздел «Рассрочка» и оформить ее на часть товаров, а остальные купить сразу.

То же самое с товарами «В наличии» и «Под заказ». Например, из 5 товаров 3 можно забрать сразу, а два — через неделю. Без разделения пришлось бы сообщать, что весь заказ будет доступен к выдаче только через неделю.

Избранное и подборки

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

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

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

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

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

Совершенные заказы

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

Отсюда же можно повторить заказ. Например, если пользователь заказал расходники для ремонта и понимает, что они снова ему нужны, то просто переходит в раздел заказов и нажимает «Повторить заказ». Это экономит время на сбор новой корзины.

Сравнение товаров

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

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

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

Шаг 1: выбор способа оплаты

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

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

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

Шаг 2: адрес и способ получения

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

Если выбираем доставку, то можно использовать сохраненный адрес или добавить новый. Также выбираем способ доставки: до пункта выдачи или до двери.

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

Шаг 3: оплата

На этом этапе показываем итоговый чек с количеством товаров, их ценой и общей суммой заказа. В конце — кнопка «Оплатить».

Бонусные программы

Cкидки

Существует три типа карт, с помощью которых можно получить скидку:

— Бонусная карта магазина «Строй-С». Магазин выдает ее как поощрение за крупные покупки. Размер скидки зависит от суммы потраченных средств и варьируется от 2% до 5%.
— Скидочная карта новосела. У магазина «Строй-С» есть договоренность с группой компаний «Кронверк». Если человек недавно купил квартиру, он может подключить свою карту новосела к «Строй-С» и получить скидку. Эта карта также меняет тип цены, но на своих условиях.
— Бонусная карта специалиста. Она предназначена для тех, кто подтверждает свой статус, например, монтажника или строителя. Если вы, к примеру, профессионал и вам нужны скидки на закупки, магазин предлагает такую возможность. Это выгодно и магазину, так как строители становятся постоянными клиентами.

Поговорим подробнее о третьем типе карт. Она позволяет покупать часть товаров по оптовым ценам. Кроме того, с каждой покупки можно получать бонусы — от 1% до 5% в зависимости от категории товара и того, насколько выгодно магазину предоставлять скидку.

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

Выбор зависит от того, что выгоднее в конкретной ситуации.

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

Кроме того, скидочные карты в приложении не суммируются. Одновременно может быть активна только одна карта.

Управление бонусами

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

Допустим, сумма заказа составляет 36 тысяч рублей. Вы можете применить полную розничную скидку и получить итоговую цену. Или, перемещая ползунок, уменьшить размер скидки (оптовую цену) в пользу начисления бонусов. Все зависит от вашего выбора: вы можете либо получить скидку, либо накопить бонусы.

Если у вас уже есть накопленные бонусы, вы можете поставить галочку «Мои бонусы», и они будут автоматически вычтены из итоговой суммы к оплате. Это обеспечивает гибкость в управлении скидками и бонусами.

Реферальная программа

Специалист, исходя из своей скидочной шкалы, может установить определенную скидку для клиента. Например, если у специалиста есть скидка 3%, он может полностью передать ее клиенту, и тогда клиент получит скидку, а специалист не получит бонусов. Либо можно настроить ползунок так, чтобы клиент получил, например, 1% скидки, а оставшиеся 2% превратились в бонусы для специалиста.

Экспресс-бонусы

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

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

Экспресс-бонусы — это инструмент, который позволяет предоставить покупателю скидку, но замаскировать ее под бонусы. Они начисляются на определенные товары. Например, если покупатель добавляет товары на сумму 15 тысяч рублей, ему автоматически начисляется 500 экспресс-бонусов. В отличие от обычных бонусов, их можно списать сразу в рамках того же заказа.

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

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

Интеграции

Интеграция Яндекс Карт и 2ГИС

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

При их интеграции мы столкнулись с отсутствием официальной поддержки для React Native. Чтобы решить эту проблему, нам пришлось переписать часть интерфейса карт, чтобы они могли корректно работать с Expo.

Expo — библиотека для React Native, которая упрощает разработку приложений, предоставляя доступ к различным функциям устройства — например, к камере.

Для расчета расстояний и определения стоимости доставки мы используем API 2ГИС. Этот инструмент помогает, в том числе, с подсказками адресов, что позволяет нам предлагать пользователям актуальную информацию о стоимости и времени доставки.

Результаты

Итоги

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

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