Разработка сайта заказа еды для кулинарии-кондитерской «Баранкин»: как перевести в онлайн продажу готовых блюд и заказных тортов
О клиенте
Кулинария-кондитерская «Баранкин» работает с 2014 года. У компании 12 филиалов в Воронеже, где можно перекусить, взять готовую еду на вынос, купить десерты на витрине или сделать индивидуальный заказ. Производство работает круглосуточно, меню обновляется каждый месяц.
Проблемы клиента
- Устаревший сайт без возможности онлайн-оплаты и оформления доставки.
- Продажи готовой еды через интернет шли не напрямую, а через платный сервис доставки Restik (стоимость в год — 15-23 тысячи рублей).
- Комиссия агрегаторов Яндекс.Еда, Delivery Club, Сбер Маркет доходила до 37%, что снижало маржинальность производства.
- При работе с курьерскими службами и сервисами доставки еды сотрудники вручную вносили данные об остатках и продажах в каждую систему отдельно.
- Заказы поступали в разные каналы: по телефону, электронной почте и в Telegram (куда они попадали с сайта и Restik), а также в 3 приложения агрегаторов.
- Онлайн-заказы из внешних сервисов не синхронизировались с R-keeper, управлять стоп-листом и меню приходилось вручную, иногда не успевали выключать позиции.
Ситуация до сотрудничества с Вебфлай
Компания решила запустить онлайн-продажи готовой продукции в пандемию, так как офлайн-точки долгое время были закрыты. «Баранкин» использовали простой сайт-каталог без возможности оплаты, а для оформления интернет-заказов подключили его к системе Restik.
Покупатель заходил на старую страницу, по кнопке «Доставка еды» попадал в Restik, далее нажимал «Заказать еду», после чего открывалось меню «Баранкин». Оформленный таким образом интернет-заказ приходил на email и в Telegram кулинарии. Затем сотрудник вручную вносил эти заявки в R-keeper и создавал столы. Аналогично фиксировали заявки из агрегаторов.
Кулинария начала сотрудничать со службами доставки Яндекс.Еда, Delivery Club и СберМаркет. Сервисы брали до 37% комиссии от стоимости заказов, что снижало доходность производства.
Кроме того, администраторам приходилось работать в 3-х разных приложениях агрегаторов: отслеживать заявки, обновлять позиции. Например, данные по остаткам брали в R-keeper и вручную обновляли на каждой платформе. Если менялось меню, добавлялись новые блюда, то у сотрудников уходило полдня, чтобы заполнить информацию по всем торговым точкам только в одном сервисе.
Цели клиента
- Создать новый сайт, подключить онлайн-оплату и доставку.
- Синхронизировать онлайн-заказы с R-keeper и автоматизировать стоп-листы.
- Привязать к веб-сервису бонусную программу и начислять баллы тем, кто оформил покупку в интернете.
- Продавать кулинарию, торты, банкетное меню через свой сайт.
Начало сотрудничества
«Баранкин» узнали про Вебфлай по «сарафанному радио». В 2021 году компания проводила тендер среди разработчиков и пригласила нас принять участие. Мы предложили создать веб-сервис с личным кабинетом, который объединит несколько внешних платформ; прошли отбор и начали работу над проектом в декабре 2021 года. Отдельным направлением стало внедрение Битрикс24 для фуд-ритейла.
Онлайн-сервис «Баранкин» создали на CMS 1С-Битрикс. Установили коробочную версию редакции «CRM+ интернет-магазин». На этой платформе мы разрабатываем b2b-порталы, интернет-магазины и сайты.
Чем Вебфлай помогли
Работа над проектом «Баранкин» состояла из 5 этапов: проектирование и прототипы, дизайн, вёрстка макетов, программирование функционала, интеграция с внешними сервисами: R-keeper, Битрикс24 и бонусной системой. Активная фаза разработки стартовала в июне 2022 года, покупателям открыли доступ к сервису в декабре.
Проектирование и прототипы
Создание структуры сайта
Продумали структуру онлайн-сервиса и личного кабинета и отрисовали в mind-map. Создали дорожную карту проекта, в ней описали, что входит в каждый этап работ, сколько времени займёт разработка, каким будет итог и какая стадия предстоит дальше.
Также рассчитали UNIT-экономику онлайн-сервиса, то есть определили прибыльность бизнеса из расчёта выручки на единицу товара. По нашим первоначальным оценкам, клиент окупил бы разработку платформы за 4-5 месяцев.
Сценарии поведения пользователей
Описали поведение клиента для каждой услуги: покупка еды из кулинарии, заказ готового кондитерского изделия или заявка на индивидуальный торт при помощи конфигуратора. В виде блок-схем показали, какие разделы, механики и интеграции должны быть на страницах, чтобы покупателю было удобно найти, оформить и оплатить нужную позицию.
Прототипы основных страниц и личного кабинета
Создали интерактивный прототип в Figma, в нём показали структуру будущего веб-сервиса, расположение элементов, содержание страниц, связь и переходы между ними. Основных страниц получилось более 40: стартовая, каталоги продукции, о компании, доставка и оплата, акции, личный кабинет и другие.
На основе прототипов составили техническое задание. ТЗ — основное приложение к договору между нами и клиентом, и своего рода, описание его ожиданий. В документе изложена суть проекта, требования к функционалу и дизайну, работе всех элементов онлайн-сервиса.
Дизайн сайта и личного кабинета
Цифровая дизайн-система (U-kit)
Составили список правил и рекомендаций по визуальному оформлению страниц и интерфейсов. В документе описали цвета, шрифты, элементы интерфейса, а также правила вёрстки новых страниц. С такой инструкцией проще создавать дополнительные разделы.
Дизайн страниц
На базе прототипа создали дизайн внутренних страниц сайта и личного кабинета: по 20 макетов для отображения на ПК и мобильных устройствах. Предложили 4 цветовых решения, а потом «перекрасили» сайт в другой оттенок, который выбрал заказчик. Смену цвета сделали за несколько часов за счёт того, что используем сквозные элементы в дизайн-системе.
Вёрстка макетов
Адаптировали онлайн-сервис для пользователей разных браузеров и устройств: ПК, планшет и смартфон. Например, при входе клиента со смартфона, внешний вид страницы подстраивается под ширину экрана, кнопки перемещаются в зону действия большого пальца. Проработать мобильную версию было важно, так как 75% трафика на «Баранкин» идёт со смартфонов.
Программирование онлайн-сервиса и личного кабинета
Админка сайта на CMS 1С-Битрикс
Онлайн-сервис «Баранкин» создали на платформе CMS 1С Битрикс. Настроили админку, чтобы владелец ресурса сам редактировал контент на страницах, добавлял элементы и выполнял другие действия без программиста. Например, сотрудники офиса в админке заводят новые блюда и акции, меняют доступность продукта.
Блюдо и цена автоматически загружаются на сайт из R-keeper, а фото и дополнительную информацию о позициях администраторы добавляют в CMS. Данные заполняют на стороне сайта, так как учётная система не может хранить все данные, необходимые для онлайн-сервиса.
Чтобы команда клиента понимала, как пользоваться CMS, мы проводим онлайн-обучение и записываем инструкцию на видео.
3 направления онлайн-заказов: доставка еды, индивидуальные торты и фуршетное меню
Доставка еды — это заказ готовых блюд домой или в офис.
Торты на заказ — покупка стандартных тортов из меню магазина, изготовление индивидуальных с возможностью выбора начинки и дизайна из ассортимента, и создание торта по задумке покупателя от рецептуры до внешнего вида.
Фуршетное меню — предзаказ банкетных блюд на мероприятия и торжества.
Для каждого направления реализовали свой сценарий оформления, настройка связана с воронкой доставки в Битрикс24.
Доставка готовых блюд
Настроили «быстрые» кнопки, чтобы покупатель мог сразу выбрать категорию блюда: салаты, гарниры, завтраки и так далее.
На детальной странице товара есть фото, вес и стоимость блюда. Позицию можно добавить в «Избранное». При нажатии на фото открывается описание продукта и дополнительная информация: срок и условия хранения, пищевая ценность.
В Корзине настроили ограничение по стоимости минимального заказа — от 500 рублей. Цена зависит от зоны доставки и праздничных дней. Также корзина подсказывает покупателю, на какую сумму добавить блюд, чтобы получить бесплатную доставку, — она доступна при заказе от 1000 рублей и выше. В зависимости от зоны также меняется сумма, после которой доставка станет бесплатной.
Торты на заказ
При заказе стандартного торта покупатель выбирает и оплачивает десерт из меню кулинарии, и может забрать его самовывозом или получить доставкой на следующий день.
Индивидуальные торты клиент оформляет на отдельной странице: выбирает вес, начинку, дизайн, способ доставки, и делает заявку. После с ним связывается кондитер, уточняет детали, а затем отправляет подтверждение заказа и ссылку на оплату. Далее покупателю приходит sms-оповещение о готовности десерта.
В разделе «индивидуальный торт» клиент описывает требования к десерту, загружает пример оформления, указывает, какую надпись нанести. После заполнения формы с покупателем связывается кондитер, чтобы согласовать детали.
Личный кабинет и страница оформления заказа
На старте проекта мы предложили вариант регистрации и авторизации по звонку, но по запросу заказчика настроили подтверждение учетной записи по коду из sms. Отметим, чем больше клиентов и онлайн-покупок, тем выше чек на рассылку сообщений, — сейчас затраты «Баранкин» на sms-оповещение доходят до 50 тысяч рублей в месяц.
Когда клиент согласится, будем переводить его на авторизацию по номеру телефона (когда поступает входящий вызов и нужно вписать последние 4-6 цифр номера). Такое решение экономичнее в 12,5 раз: если sms стоит в среднем 4 рубля при платном отправителе, то авторизация по звонку — 32 копейки.
В Личном кабинете создали разделы:
- «Заказы» (текущие, выполненные, отмененные). Здесь отображаются и покупки готовой еды и стандартных тортов. Заказ можно повторить или отменить в один клик.
- «Избранное», куда можно добавить любимые блюда.
- «Мои данные», где пользователь вносит Ф.И.О, дату рождения, email и номер телефона, а также отслеживает количество бонусов.
- «Мои адреса», здесь автоматически появляются точки, в которые клиент заказывал доставку.
Базовая SEO-оптимизация
После запуска онлайн-сервиса проанализировали поисковые запросы покупателей. Выбрали самые популярные и использовали их в названиях разделов и текстах. Благодаря этому пользователи находят «Баранкин» на первой странице выдачи, при этом кулинария пока не использует платное продвижение.
Для высококонкурентных запросов типа «Заказ еды ...», «Доставка еды...» недостаточно базовой оптимизации и нужны дополнительные ежемесячные работы по SEO продвижению для выхода в Топ-10.
Текущая ситуация по проекту
Онлайн-сервис заказа еды «Баранкин» продвигается за счёт поисковой оптимизации и привлечения текущих клиентов. Платное продвижение кулинария пока не использует, поскольку корректная интеграция с R-keeper начала работать в июне 2023 года, а интеграция с бонусной системой — в сентябре.
Мы подключили к ресурсу Яндекс Метрику, чтобы отслеживать конверсию, смотреть отчёты и видеозаписи поведения посетителей на страницах, узнать, что они ищут на сайте. Эти данные помогут в дальнейшем улучшать сайт.
Результаты работы c Вебфлай
- «Баранкин» запустили собственный онлайн-сервис доставки еды с возможностью оплаты заказа и бонусной системой.
- С начала января по 5 декабря на онлайн-сервисе покупатели оформили почти 1750 заказов на сумму свыше 2,5 млн рублей. Часть из них клиенты отменили, но мы показываем начальную цифру, так как эти заявки могли завершиться покупкой.
- Ежемесячное количество онлайн-заказов — 1200 (около 100 в каждой торговой точке).
- Веб-сервис интегрирован с R-keeper и Битрикс24: интернет-заказы автоматически создаются в учётной системе, а стоп-лист выключает недоступные позиции на сайте.
- Сотрудники экономят время при оформлении заявок и редактировании позиций меню. Например, каждый ресторан самостоятельно обновляет стоп-листы за 5-10 минут. Ранее на это требовалась в 3-4 раза больше времени.
- К сайту подключили бонусную программу: баллы начисляются и списываются при онлайн- и офлайн-покупках.
- 80% трафика на barankinvrn.ru — это переходы из поисковых систем, реклама не используется.
- Посещаемость ресурса с января по 20 декабря превысила 49 тысяч пользователей.
- Разработка онлайн-сервиса окупилась за 12 месяцев.
Стоимость работ
Стоимость разработки аналогичного онлайн-сервиса от 2,5 млн рублей. В эту сумму входит создание сайта, настройка Битрикс24, интеграции с R-keeper и бонусной системой. Отдельно оплачивается лицензия.