Гриль 1. Служба доставки еды

Главное о кейсе

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

The site is launched, we collect numerous positive reviews and wishes. Technical support is being carried out and a backlog of improvements is being prepared.

Бизнес-задача и ее решение

▶ Основные цели создания сайта

– Увеличение конверсии;
– Повышение уровня лояльности пользователей;
– Снижение нагрузки на кассиров в ресторанах;

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


▶ Предпроектная аналитика

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

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


▶ Клиент-серверная архитектура

Разработали подробную клиент-серверную архитектуру и провели ревью исходников верстки от клиента. Это необходимо для единообразия проектирования всех систем и быстрого понимания, как работает система на уровне клиент-сервер в случае подключения новых разработчиков. Описали все типы клиентов, которые будут взаимодействовать с Core Backend посредством API:

– Мобильное приложение (iOS и Android).
– Сайт.
– Система управления (админка).
– Приложение для курьеров (на будущее).
– Iiko front.
– Касса.
– Киоски (на будущее).

Эти работы помогли нашим разработчикам включиться в проект и не упустить ни одной детали.


▶ Удобная фильтрация и карточки товара

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

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


▶ Адаптивная верстка

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


▶ Интеграция с системой iiko

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

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

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

Если от iiko поступает информация, что заказ не смог поступить на торговую точку, пользователю отправляется СМС, что заказ не принят и ему необходимо позвонить в call центр. В сообщении указан номер телефона, актуальный для города пользователя. Также информация о не принятом заказе отправляется на сервисную электронную почту.


▶ Модификаторы

Благодаря модификаторам реализовали удаление некоторых компонентов из блюда.

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


▶ Личный кабинет

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



Case in English


▶ The main goals of creating the site:

– Increase in conversion;
– Increasing the level of user loyalty;
– Reducing the burden on cashiers in restaurants;

The site allows you to make food from the menu with delivery or arrange pickup, track the status of the order in the user's personal account, use loyalty program bonuses, and leave reviews.


▶ Pre-project analytics

At first, the customer worked with another studio. The design and partial layout was prepared. When the project was handed over to us, we evaluated the work and decided to carry out a large scope of work on pre-project analytics. It was necessary to immerse yourself in the project and appreciate the work that another studio had already done.

We prepared an analysis of the target audience using the person method. We thought of prototypes of people who could use the site in order to offer a solution to their problems, to develop a convenient and understandable interface. The format is a mind map.

We also conducted a competitive analysis, prepared a vision for the project and the structure of the site. We made an overview of the strongest competitors, highlighted the pros and cons, stocked up on ideas. The format is a table in Google Docs. In the vision, the essence of the product, goals and objectives, stakeholders from the customer and user, their pains and "pain relief measures" were prescribed. When preparing the structure, we found out that some elements and screens and functions were missing, so we reflected all the necessary pages and blocks on them. We thought about how the user will move between them.


▶ Client-server architecture

We developed a detailed client-server architecture and reviewed the layout source code from the client. This is necessary for the uniformity of the design of all systems and a quick understanding of how the system works at the client-server level in case new developers are connected. We described all types of clients that will interact with the Core Backend via the API:

– Mobile application (iOS and Android).
– Website.
– Management system (admin panel).
– Application for couriers (for the future).
– Iiko front.
– Cash register.
– Kiosks (for the future).

These works helped our developers get involved in the project and not miss a single detail.


▶ Convenient filtering and product cards

We discussed all our proposals with the customer and started development.

We developed a design for convenient filtering according to taste preferences. We highlighted the filters with color using trendy and understandable emoji.

We left everything that is most necessary and important for users in the product cards. Bright photo, description of ingredients, cost, and cart button. If desired, the user can click to open a more detailed product card with the ability to add and remove ingredients, change the size, view the calorie content, etc.


▶ Adaptive layout

When working on the project, we used adaptive layout, which changes the design depending on user behavior, platform, screen size, and device orientation. This approach not only saves time working on the project, but is also a convenient solution in which the user can use the site from any device.


▶ Integration with the iiko system

When developing, we used integration with the iiko system and worked out the fault tolerance of the site.

Iiko is a specialized enterprise resource planning system designed to automate accounting in a restaurant, as well as in a cafe, bar, and a ready-made meal delivery service. This program contains everything for managing in a single window mode: cash desk, warehouse, personnel, motivation, kitchen, finance, reporting.

Thus, if iiko refuses, order processing continues, information about the order is sent to the outlet's e-mail. As part of fault tolerance, we implemented the ability to manage the activity of a separate point and city: disabling the ability to place an order, while maintaining the ability to view the menu.

If iiko receives information that the order could not be delivered to the point of sale, the user is sent an SMS that the order was not accepted, and he needs to call the call center. The message contains the phone number relevant for the user's city. Also, information about an unaccepted order is sent to the service e-mail.


▶ Modifiers

Thanks to modifiers, we implemented the removal of some components from the dish.

In the description of the dish, a list of ingredients is written, for example: bacon, cheese, dough, mushrooms, tomatoes. The dish has a number of modifiers to remove ingredients from the dish, for example: mushrooms, bacon. We parse the description of the dish and match the modifiers for deletion, after which the site displays the description of the dish. The same time, a cross will be displayed on the names of the ingredients corresponding to the deletion modifiers, by clicking on which, the ingredient will be added to “Remove Ingredients”.


▶ Personal Area

We implemented a convenient and understandable personal user account with the ability to choose the method of informing about the status of the order, several addresses, favorites, order history and a bonus system.

Прочая информация о кейсе

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



Case in English

The customer asked us to develop a new version of the website of the popular food delivery service in Barnaul. The new site assumed the presence of a personal account, functionality for placing orders by users and integration with the iiko system.

Скриншоты

Видео