Высоконагруженный отказоустойчивый сайт Бристоль с функцией Click&Collect

Бристоль. Сайт

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

Клиент

«Бристоль» — российская сеть магазинов у дома. В 2018 году сеть попала в рейтинг 50 самых быстрорастущих компаний по версии РБК, заняв в нем четвертое место со среднегодовой положительной динамикой выручки. Сейчас у Бристоль более 4000 магазинов по всей России.

Ранее для сети магазинов «Бристоль» команда Friflex разработала мобильное приложение с набором разнообразных функций: от карты магазинов и каталога продукции до программы лояльности и системы поддержки покупателей.

Мобильное приложение «Бристоль» было запущено командой Friflex в апреле 2021 года. Помимо основных привычных для пользователя приложения ритейлера разделов, в Бристоль реализована интересная фича – динамическая карта лояльности. Она представляет собой DataMatrix-код, который генерируется специальным алгоритмом, чтобы обеспечить защиту от подделки. Также мы сделали карту магазинов, административную панель и фотобазу. Больше об этом кейсе читайте
Разработчики создавали мобильное приложение «Бристоль» на фреймворке Flutter, одновременно для iOS и Android. Больше о приложении можно почитать в кейсе.

Задача

Теперь перед нами была поставлена задача разработать сайт. Основной акцент в ней был сделан на принцип омниканальности. Необходимо было разработать сайт, который бы бесшовно стыковался с мобильным приложением в процессе заказа. Также требовалось внедрить функцию Click&Collect для того, чтобы покупатель в самый быстрый срок смог забрать собранный для него заказ. Дополнительно требовалось внедрить прием оплат через СБП.

Решение

Идеальная стыковка

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

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

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

Высоконагруженный отказоустойчивый сайт с функцией Click&Collect для сбора заказа и в мобильном приложении, и на сайте без потери выбранных позиций
  • «Мы понимали, насколько важно найти решение, которое сделает переход между сайтом и мобильным приложением незаметным для пользователя. Это существенно для удобства покупки, для повышения лояльности пользователей. Было большим преимуществом, что компания «Бристоль» – клиент, для которого мы уже сделали ранее мобильное приложение. Это позволило нам быстрее выполнить новую задачу по созданию сайта и выбрать наиболее подходящие технологии. Комплексное сотрудничество с клиентом всегда дает синергетический эффект».

    Петр Чернышев

    CEO Friflex

Сайт является кроссплатформенным, то есть адаптируется под десктопы и под любые размеры экранов мобильных устройств. Это реализовано с помощью фреймворков Vue js и Nuxt 2.

Click&Collect

По оценке экспертов, формат Click&Collect под влиянием маркетплейсов становится все более популярен у онлайн-покупателей. Он позволяет пользователю оформить заказ и забрать его в удобном месте, не переплачивая за доставку.

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

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

Функция «Где купить?»

Одна из проблем покупателей при заказе, которую наблюдал «Бристоль», – отсутствие нужного товара в выбранном магазине. Если пользователь видит, что желаемой позиции нет в привычном магазине, его модель поведения – просмотреть вручную в соседних, каждый раз повторяя запрос в поиске. Чтобы снять с пользователя ненужные действия и ускорить процесс, была реализована функция «Где купить?».

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

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

Внедрить СБП

Мы значительно сократили время, которое у покупателя занимает оформление заказа, поиск и выбор товаров, поэтому обратили внимание клиента на возможности для ускорения самого процесса оплаты. Один из них – оплата через систему быстрых платежей (СБП).

Для оплаты через СБП пользователь при подходе на кассу должен показать QR-код из профиля. Далее приходит push-уведомление с запросом на оплату. После этого покупатель нажимает на «Оплатить через СБП», подтверждает сумму покупки и выбирает приложение банка для завершения оплаты. Все происходит в считанные секунды.

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

Другие кейсы

Trucare

Мобильное приложение для умной инсулиновой помпы

Трасса

Корпоративный сайт для федеральной сети автозаправочных комплексов