Разработка сайта доставки еды к поезду в Россоши

Задача: принимать заказы на доставку еды к вагону

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

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

Посмотреть сайт «Еда в дорогу».

От брифа до дизайна: как выстроили страницу

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

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

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

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

Каталог блюд, выбор порций и корзина

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

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

Из корзины пассажир переходит к оформлению доставки к поезду: указывает данные для заказа и связи, затем оплачивает его онлайн. Этот путь связал с передачей заказа сотрудникам и в CRM.

Подготовка фотографий

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

Личный кабинет для сотрудников и владельца

Меню доставки меняется: появляются блюда, обновляются цены и фотографии. Чтобы клиент мог вносить эти изменения сам, я сделал личный кабинет. В нём можно добавлять и редактировать блюда, менять описания, снимки, граммовки и цены.

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

Интеграции с ЮKassa, MAX и Битрикс24

ЮKassa: оплата заказа на сайте

Подключил ЮKassa для онлайн-оплаты. По условию клиента заказ оформляется с оплатой через сайт: расчёт при передаче еды у вагона в этот сценарий не входит.

MAX: заказ сразу в группе кухни

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

Битрикс24: статусы и сумма сделки

Связал сайт с готовой воронкой клиента в Битрикс24. В CRM передаются сведения об оформлении, оплате, доставке и завершении заказа, а также сумма сделки. Владелец видит, на каком этапе находится заказ и какая сумма оплачена.

PHP, MySQL и базовая SEO-оптимизация

Сайт разработал на PHP с базой данных MySQL. Он работает на обычном виртуальном хостинге: для размещения не понадобился отдельный сервер. Получился лёгкий сайт с каталогом и нужными клиенту интеграциями.

Выполнил базовую SEO-оптимизацию: прописал заголовки страниц и метатеги. Подготовил сайт к дальнейшему запуску Яндекс Директа и развитию продвижения в поиске. Рекламные кампании и активное SEO-продвижение — следующие этапы работы, поэтому результаты по заявкам и продажам в этом кейсе не оцениваю.

Результат: сайт доставки за 3–4 недели

Клиент получил сайт с каталогом, выбором граммовок, корзиной и онлайн-оплатой. Сотрудники могут обновлять меню в личном кабинете и работать с заказами в MAX, а владелец — отслеживать их в Битрикс24. На разработку ушло примерно 3–4 недели.

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

zoom_in

Что важно в таком проекте

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