- Заказчик
- Сеть ресторанов ResStar.
- Задача
- Мы должны были создать сервис с понятным интерфейсом заказа, чтобы людям было удобно выбирать еду в разных ресторанах, свой способ и время доставки для каждого.
О клиенте
КемГуру — это служба доставки сети кемеровских ресторанов ResStar. Особенность сети в том, что у каждого ресторана своя специализация: здесь можно найти самую разнообразную кухню, от русской, итальянской и японской до ирландской или немецкой.
Руководство планировало расширять сеть и с помощью сайта получить конкурентное преимущество на рынке доставки Кемерово, а в будущем и других городов.
Ситуация
Заказы могут быть как простыми, так и составными. Например, ситуация в пределах одного дня: вы заказываете обед коллегам в офис. Половина хочет пиццу, другая — роллы из «Сильвер — Япония». Суровый технический директор говорит, что не против медальонов из говяжьей голени, они особенно хороши в «Забое». При этом у него скоро встреча, так что доставку лучше сделать не как всем, а к 16:00, чтобы блюдо не успело остыть. Пока вы записываете заявки, вспоминаете, что сегодня никак не успеваете заехать за тортом ко дню рождения сына — так что к вечеру вам нужна доставка его любимого чизкейка «Мюнхен» на домашний адрес. Вы доходите до самого конца цепочки оформления заказа, как вдруг один из коллег решает добавить к своим роллам еще и шоколадные, на десерт, из того же ресторана.
Посмотрим, как с таким заказом справится новый «КемГуру», а заодно расскажем все о проекте.
Проектирование и дизайн
Во время работы мы ориентировались на лидеров онлайн-доставки. Собрали предварительную структуру, сделали визуальный бриф и прототип, написали и согласовали техническое задание.
Дизайн сайта предельно простой, в центре внимания красивые снимки еды. Вместе с клиентом мы составили задание на подготовку фотографий, чтобы сайт не только работал, но и выглядел идеально.
Проект получился позитивным и легким, с виду и не скажешь, что внутри — столько функций и нюансов.
Реализация
Дина Гарбуз, руководитель проекта
Нам надо было придумать корзину, в который человек понимал бы, что заказывает из разных мест и к нему, возможно, приедут разные курьеры. Или он заказывает пиццу с доставкой за полчаса, но также хочет заказать тортик на день рождения через неделю — и это тоже должно было быть понятно.
Заказ происходит в два этапа. На первом пользователь просто добавляет блюда в корзину.
Следующий этап — оформление заказа. Здесь можно выбирать разные адреса, день и время доставки. Например, часть заказов в офис сделать на ближайшее время, а один — к определенному часу. Для оплаты на сайте подключен интернет-эквайринг Сбербанка.
Для удобства районы города разделены на зоны доставки. Пользователь может как ввести адрес вручную, так и выбрать его на карте. Местоположение посетителя определится автоматически — что особенно удобно при заказе с мобильного устройства.
Меню на сайте поделено на рестораны и про каждый рассказывается отдельно, но при видимой простоте в корзине учтены, пожалуй, все возможные комбинации и граничные случаи.
Мы предусмотрели функцию комбо — сервис сам объединяет блюда в выгодные сочетания, если подходящие позиции случайно оказались в корзине.
Технологии
КемГуру — это проект, которых продолжает развиваться после релиза. В таких ситуациях критически важно упростить работу технической команде.
Павел Бондарович, технический директор
При разработке мы применили подход API Based: параллельно с версткой макетов мы разработали API, а затем интегрировали с ним клиентскую часть — фронтенд веб-приложения. Благодаря этому проект будет легче поддерживать и развивать.
Vue.js для оформления заказа
У корзины и оформления заказа очень много состояний и сложная логика работы интерфейса. Чтобы все работало плавно и рассчитывалось быстро, мы использовали Vue.js.
Максим Савченко, фронтенд-тимлид
Мы выбрали Vue.js не просто так, без него на каждое изменение пришлось бы блокировать интерфейс, чтобы перезагрузить всю корзину. Именно всю, потому что в КемГуру есть комплексные обеды, заказ из нескольких ресторанов, доставка с привязкой на стоимость корзины, переключение между ресторанами. Все эти условия зависят друг от друга и влияют на отображение интерфейса.
В итоге мы добились того, что всей логикой приложения можно управлять с помощью одного JS-файла, не нужно запрашивать весь HTML на пару тысяч строк кода при каждом движении пользователя. Конечно, у Vue есть свои минусы — например, если на jQuery код может писать даже джуниор, то здесь нужен более компетентный специалист с глубокими знаниями JavaScript и умением строить системы.
Оформление заказа на Кемгуру сильно отличается от медлительных сайтов доставок, которые имеют привычку тормозить на самом важном моменте.
Результаты
Сайт только-только запустился, а у нас на очереди двусторонняя интеграция с R-Keeper и личный кабинет — эти функции запланировали сделать сразу после релиза.
R-Keeper Delivery — это система автоматизации доставки еды. Она позволяет принимать большой поток заказов через сайт и по телефону, быстро обрабатывает заказ, подтверждает его и передает на кухню, передает курьеру и формирует электронные документы. Из этой системы выгружаются рестораны и меню, а в нее будут уходить сделанные заказы.
Дина Гарбуз, руководитель проекта
Систему R-Keeper Delivery на момент разработки только-только внедряли на стороне заказчика, и пришлось отложить задачу до момента готовности выгрузки. Так что в ближайшее время сайт станет не просто инструментом заказа, но еще и поможет клиенту автоматизировать обработку заявок.