Гриль № 1

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

• Увеличение конверсии;

• Повышение уровня лояльности пользователей;

• Снижение нагрузки на кассиров в ресторанах.

В новой версии требовалось улучшить UI/UX-дизайн, расширить уже существующий функционал, а также объединить в единую систему сайт, админ-панель, приложение и интегрировать их с iiko.

Бюджет проекта составил 4 млн рублей. Весь процесс занял около 4500 часов. 8 человек команды проекта создали 855 макетов и оформили 8139 коммитов.

Заказчик пришел в нашу студию с уже готовыми наработками. Для того, чтобы лучше погрузиться в проект, мы приняли решение провести предпроектную аналитику. Подробнее про этот этап мы уже рассказывали в наших статьях на VC.ru. В рамках разработки проекта Гриль № 1 мы выполнили следующие работы:

В формате google-таблиц подготовили анализ основных конкурентов заказчика. Необходимо было понять, с кем придется «соревноваться» на рынке доставки готовой еды. Особое внимание уделили следующим параметрам:

• Внешний вид и концепция сервиса;

• Система лояльности и акции;

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

• Формы обратной связи у конкурентов: отзывы, комментарии к заказу;

• Внешний вид карточек товара, их расположение и логика использования.

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

«Я сам часто делаю заказы в Гриль 1, а потому могу посмотреть на него не только как аналитик, но и как клиент. Важно было проанализировать уже имеющиеся наработки, избавиться от ненужных элементов и добавить полезные. Главное, чтобы ничего на сайте не препятствовало в борьбе с голодом :)»

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

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

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

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

Если на предыдущих этапах мы изучали сам сайт, то на аудите уделили особое внимание непосредственно дизайну проекта. Нужно было оценить фронт работ, оценить сделанный другой студией UI/UX.

Ребром стал вопрос о сохранении старых макетов дизайна. В случае, если бы их было невозможно «реанимировать» и использовать в новой версии сайта, нам пришлось бы отрисовывать все с нуля, что, конечно, занимает больше времени и, соответственно, стоит дороже.

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

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

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

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

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

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

• Мобильное приложение (iOS и Android);

• Сайт;

• Система управления (админка);

• Приложение для курьеров;

• iiko biz (инструментарий, позволяющий вести базу гостей и настраивать рассылки);

• iiko front (автоматизация кассы);

• Касса;

• Киоски.

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

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

Дизайнеры уделили большое внимание UI/UX, благодаря чему оформление лаконичным и интуитивно понятным для пользователя. Некоторые дополнительные опции вынесены во всплывающие окна. Так мы сильно сократили время выбора и настройки блюд.

Сами карточки стали более компактными и аккуратными. Для этого мы убрали с них лишние кнопки и выпадающие меню. Теперь они смотрятся гармонично не только на компьютерном мониторе, но и на экране смартфона.

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

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

Клиент имеет возможность:

• Заказать еду из меню с доставкой, или оформить самовывоз;

• Отслеживать статус заказа в личном кабинете пользователя;

• Использовать бонусы программы лояльности;

• Оставлять отзывы о заказах.

Специально для Гриль 1 мы разработали удобную админку с обширным функционалом. Через админ-панель можно настраивать отображение информации на всех страницах сайта, начиная от логотипа, заканчивая текстовым и графическим наполнением. Благодаря интеграции с системой iiko, администратор может настраивать:

• Информацию о пользователях и группах;

• Меню и ингридиенты;

• Акции, купоны и промокоды;

• SEO и рассылки;

• Торговые точки и города.

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

В рамках этой системы мы добавили возможность:

• Включать и отключать уведомления о заказах и других событиях;

• Настраивать группы пользователей для осуществления рассылок;

• Управлять маркетинговыми материалами из админки;

• Реализовывать рекламные кампании для отдельных групп пользователей.

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

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

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

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

Также реализована функция поиска и отслеживания заказов. Карточка содержит в себе полную информацию:

• О заказанных товарах;

• Семантические данные (номер заказа, телефон, адрес, статус и т. д.);

• Данные о примененных скидках и акциях;

• О выгрузке заказа в систему. Для наглядности сделали флажок, ориентируясь на который можно понять, поступил заказ в iiko или нет.

Это поможет работникам сети оперативно реагировать на обращения клиентов, что повысит лояльность.

iiko (читается как «айко») — специализированная система планирования ресурсов предприятия, предназначенная для автоматизации учета в сфере общественного питания. В одном приложении собраны: касса, склад, персонал, мотивация, кухня, финансы, отчетность.

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

Для успешной интеграции с iiko нам было необходимо настроить:

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

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

В iiko нет метода, который автоматически возвращает список промокодов. Учитывая это, мы написали функцию, для импорта акционных купонов через excel-файл, который экспортируется из iiko biz.

При создании заказа на доставку необходимо указывать адрес на который нужно отвезти блюдо. Для этого был использован сервис Da Data.

Работает он следующим образом: Da Data передает название адреса вместе с id улицы. Мы используем этот id при формировании заказа в iiko. Таким образом система безошибочно определяет адрес доставки

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


В карточке указываются ингредиенты, привязанные к модификаторам удаления. Например: бекон, сыр, тесто, грибы, томаты. На их названиях будет отображаться крестик. При нажатии ингредиент будет добавлен в «Убрать ингредиенты».

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

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

Сделали анимированные страницы ошибок 404 и 500 страницы с приятными иллюстрациями.

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