Заказчик обратился к нам за обновлением сайта для службы доставки еды. Сеть Гриль № 1 работает в крупных городах Сибирского федерального округа. Наличие сайта дает возможность оформлять заказ в режиме онлайн, а также отслеживать его статус и участвовать в бонусной программе.
Увеличение конверсии;
Повышение уровня лояльности пользователей;
Снижение нагрузки на кассиров в ресторанах.
В новой версии требовалось улучшить UI/UX-дизайн, расширить уже существующий функционал, а также объединить в единую систему сайт, админ-панель, приложение и интегрировать их с iiko.
Бюджет проекта составил 4 млн рублей. Весь процесс занял около. 4500 часов. 8 человек команды проекта создали 855 макетов и оформили 8139 коммитов.
Заказчик пришел в нашу студию с уже готовыми наработками. Для того, чтобы лучше погрузиться в проект, мы приняли решение провести предпроектную аналитику. Подробнее про этот этап мы уже рассказывали в наших статьях на VC.ru. В рамках разработки проекта Гриль № 1 мы выполнили следующие работы:
Видение проекта
Обсудили суть проекта, цели, задачи и описали в виде карты ума. Это помогло собрать воедино все требования к будущему сайту и подпроектам. Проанализировали действующий сайт, выявили проблемные места в интерфейсе и во взаимодействии функций между собой. На основе этого составили видение сайта и его структуру. В новой версии сайта посетителю будет проще сделать заказ и оформить доставку.
В формате google-таблиц подготовили анализ основных конкурентов заказчика. Необходимо было понять, с кем придется «соревноваться» на рынке доставки готовой еды. Особое внимание уделили следующим параметрам:
Внешний вид и концепция сервиса;
Система лояльности и акции;
Удобство использования. То есть сколько шагов необходимо для совершения заказа, насколько комфортно настраивать состав блюд и их количество. Также обратили внимание на наличие блока с сопутствующими товарами, которые можно добавить перед отправкой заявки;
Формы обратной связи у конкурентов: отзывы, комментарии к заказу;
Внешний вид карточек товара, их расположение и логика использования.
Подробное изучение плюсов и минусов конкурентов помогло отобрать лучшие решения для обновленной версии сайта.
Подготовили анализ ЦА по методу персон. Продумали прототипы людей, которые могли бы пользоваться сайтом, чтобы предложить решение их проблем, продумать удобный и понятный интерфейс. Формат — карта ума.
«Я сам часто делаю заказы в Гриль 1, а потому могу посмотреть на него не только как аналитик, но и как клиент. Важно было проанализировать уже имеющиеся наработки, избавиться от ненужных элементов и добавить полезные. Главное, чтобы ничего на сайте не препятствовало в борьбе с голодом :)»
Вячеслав
Аналитик
Чтобы согласовать порядок этапов разработки, мы подготовили дорожную карту проекта. Этот этап аналитики позволил нам и заказчику понять примерные сроки запуска проекта, а также составить планы развития сервиса на первое время после релиза.
Роадмап необходим потому, что часто вместе с релизом определенного функционала необходимо планировать какие-то параллельные дополнительные действия: устранение багов, добавление новых фич. Также клиент увидел, сколько реально времени уйдет на разработку всего проекта.
Для обновления сайта нам необходимо было понять его структуру и взаимосвязи между страницами и экранами. На этом этапе мы разом решили две важные задачи:
Если на предыдущих этапах мы изучали сам сайт, то на аудите уделили особое внимание непосредственно дизайну проекта. Нужно было оценить фронт работ, оценить сделанный другой студией UI/UX.
Ребром стал вопрос о сохранении старых макетов дизайна. В случае, если бы их было невозможно «реанимировать» и использовать в новой версии сайта, нам пришлось бы отрисовывать все с нуля, что, конечно, занимает больше времени и, соответственно, стоит дороже.
Параллельно с этим мы провели ревью исходников верстки. Ситуация складывалась такая же, как и с изображениями. Необходимо было понять, можем ли мы применить старую верстку на новом сайте.
В процессе ревью выяснилось, что предыдущая верстка была разработана с помощью устаревших технологий. Использовать ее в новом проекте было плохим решением, так как это могло повлиять на скорость работы сайта и общий опыт пользователей при взаимодействии с сервисом.
Для обновленной верстки использовали React. Он соответствует всем современным требованиям, индексируется в поисковой выдаче, а также позволяет ускорить скорость разработки за счет наличия готовых модулей. Кроме того, React получает постоянную поддержку и обновления, что гарантирует актуальность кода в долгосрочной перспективе.
Исследовали интеграцию с новой версией API системы iiko
Помимо обновления дизайна и повышения лояльности клиентов, нужно было оптимизировать работу ресторанов и настроить интеграцию с системой iiko. Это решало проблемы с нагрузкой на операторов и кассиров. Система отказоустойчива и позволяет управлять ресторанами и всем, что с ними связано в системе единого окна.
Мы изучили iiko, ее требования, актуальную версию API и документацию. Это помогло нам подготовиться к работе с системой, а также оценить время и средства, необходимые для интеграции. Также мы смогли избежать большого количества проблем, с которыми обычно сталкиваются разработчики, не уделяющие этому этапу достаточно внимания.
Клиент-серверная архитектура
Расписали клиент-серверную архитектуру проекта. Это позволило в виде схемы обозначить основные взаимосвязи внутри системы. Таким образом, при развитии проекта не возникнет путаницы при программировании отдельных элементов, а код будет оставаться структурированным. Это не позволит сайту со временем превратиться в массивный неподдерживаемый кусок кода. Описали все типы клиентов, которые будут взаимодействовать с основным бэкендом посредством API:
Мобильное приложение (iOS и Android);
Сайт;
Система управления (админка);
Приложение для курьеров;
iiko biz (инструментарий, позволяющий вести базу гостей и настраивать рассылки);
iiko front (автоматизация кассы);
Касса;
Киоски.
Эти работы помогли нашим разработчикам легко включиться в проект и не упустить ни одной детали.
Дизайн
Дизайн нового сайта создавался на основе материалов, предоставленных заказчиком. В основе лежат фирменные цвета Гриль 1, а также маскот компании — зеленый дракон. В процессе работы мы переделали некоторые элементы, а также отрисовали новые экраны, кнопки и проработали вид сайта в целом
Дизайнеры уделили большое внимание UI/UX, благодаря чему оформление лаконичным и интуитивно понятным для пользователя. Некоторые дополнительные опции вынесены во всплывающие окна. Так мы сильно сократили время выбора и настройки блюд.
Сами карточки стали более компактными и аккуратными. Для этого мы убрали с них лишние кнопки и выпадающие меню. Теперь они смотрятся гармонично не только на компьютерном мониторе, но и на экране смартфона.
Адаптивная верстка
В процессе работы использовали адаптивную вёрстку, которая меняет дизайн страницы в зависимости от платформы, размера и ориентации экрана, а также от поведения пользователя. Такой подход является удобным решением для любого устройства и позволяет не тратить время на отрисовку отдельных экранов под каждый девайс.
Личный кабинет
Реализовали удобный и понятный личный кабинет пользователя с возможностью выбора разного способа информирования о статусе заказа, несколькими адресами, избранным, историей заказа и бонусной системой.
Клиент имеет возможность:
Заказать еду из меню с доставкой, или оформить самовывоз;
Отслеживать статус заказа в личном кабинете пользователя;
Использовать бонусы программы лояльности;
Оставлять отзывы о заказах.
Система управления сайтом
Специально для Гриль 1 мы разработали удобную админку с обширным функционалом. Через админ-панель можно настраивать отображение информации на всех страницах сайта, начиная от логотипа, заканчивая текстовым и графическим наполнением. Благодаря интеграции с системой iiko, администратор может настраивать:
Информацию о пользователях и группах;
Меню и ингридиенты;
Акции, купоны и промокоды;
SEO и рассылки;
Торговые точки и города.
Для оперативного обновления информации при изменении информации в базе данных iiko предусмотрели функцию синхронизации данных, которая автоматически обновляет номенклатуру сайта, информацию по зонам, точкам и акционным предложениям.
Система настройки уведомлений и рассылок
В рамках этой системы мы добавили возможность:
Включать и отключать уведомления о заказах и других событиях;
Настраивать группы пользователей для осуществления рассылок;
Управлять маркетинговыми материалами из админки;
Реализовывать рекламные кампании для отдельных групп пользователей.
Система отказоустойчивости
Реализовали возможность отключения неработающей точки с помощью системы управления.
Отключенный ресторан не будет отображаться на сайте. Если заказ не смог поступить на торговую точку, пользователю будет отправлено СМС с информированием и рекомендацией обратиться в колл-центр. В сообщении также присутствует номер телефона, актуальный для города пользователя.
Управление SEO для каждого отдельного города.
С помощью простого конструктора администратор может легко отредактировать то, как будет отображаться краткая информация о сайте в поисковой выдаче.
Управление товарами и заказами
Позволяет в режиме админ-панели редактировать карточки товаров, настраивать удаляемые элементы. В системе управления предусмотрена возможность настраивать видимость блюд в меню отдельного ресторана или города, менять состав. Таким образом администратор может оперативно вносить изменения на сайте.
Также реализована функция поиска и отслеживания заказов. Карточка содержит в себе полную информацию:
О заказанных товарах;
Семантические данные (номер заказа, телефон, адрес, статус и т. д.);
Данные о примененных скидках и акциях;
О выгрузке заказа в систему. Для наглядности сделали флажок, ориентируясь на который можно понять, поступил заказ в iiko или нет.
Это поможет работникам сети оперативно реагировать на обращения клиентов, что повысит лояльность.
Интеграция с системой iiko
iiko (читается как «айко») — специализированная система планирования ресурсов предприятия, предназначенная для автоматизации учета в сфере общественного питания. В одном приложении собраны: касса, склад, персонал, мотивация, кухня, финансы, отчетность.
«Для настройки рабочей интеграции требуется потратить немало времени и сил, чтобы предусмотреть все сценарии, при которых она может работать некорректно»
Евгений
Project-менеджер
Проблемы при интеграции с iiko
Для успешной интеграции с iiko нам было необходимо настроить:
Номенклатуру и модификаторы
Основная сложность работы с iiko — ее модификаторы. Если обязательные и необязательные модификаторы сайта не соотвуют таковым в iiko, при отправке заказа в систему возникнет ошибка.
Чтобы этого избежать, мы настроили статусы модификаторов на сайте таким образом, чтобы их применение не конфликтовало с системой iiko. Это помогло значительно снизать количество ошибок, возникающих при оформлении заказа
Отображение изображений в карточках товаров
iiko сама по себе не хранит изображения. Чтобы в карточке блюда появилось его фото, необходимо загрузить нужное изображение через админку сайта. Несмотря на то, что это обходной путь для оформления товара, хранение изображений в админке помогает быстро делать замены фотографий в случае их несоответствия без обращения к сторонней системе.
Редактирование блюд
Поскольку в админке сайта хранится несколько карточек одного блюда (по количеству точек в городе), настраивать их отображение вручную было бы слишком сложно. Поэтому мы настроили возможность общего редактирования блюд. То есть изменения в одной карточке применяются сразу во всех ресторанах.
Также мы добавили настройку, которая позволяет выбирать одну или несколько точек для изменения. Это необходимо, если рецептура блюда меняется только в одном ресторане
Система бонусов и акций
В iiko нет метода, который автоматически возвращает список промокодов. Учитывая это, мы написали функцию, для импорта акционных купонов через excel-файл, который экспортируется из iiko biz.
Получение адресов
При создании заказа на доставку необходимо указывать адрес на который нужно отвезти блюдо. Для этого был использован сервис Da Data.
Работает он следующим образом: Da Data передает название адреса вместе с id улицы. Мы используем этот id при формировании заказа в iiko. Таким образом система безошибочно определяет адрес доставки
Добавить ингредиенты
Благодаря исключающим модификаторам реализовали удаление некоторых компонентов из блюда.
В карточке указываются ингредиенты, привязанные к модификаторам удаления. Например: бекон, сыр, тесто, грибы, томаты. На их названиях будет отображаться крестик. При нажатии ингредиент будет добавлен в «Убрать ингредиенты».
Фильтрация и карточки товара
Разработали удобную фильтрацию по вкусовым предпочтениям. Выделили фильтры цветом с использованием трендовых и понятных эмодзи.
Оставили в карточках товара все самое необходимое и важное для пользователей:
Яркое фото;
Описание ингредиентов;
Стоимость и кнопка корзины.
По клику на товар открывается более подробная карточка с возможностью добавлять и убирать ингредиенты, изменять размер порции, смотреть калории и т. д.
404&500
Сделали анимированные страницы ошибок 404 и 500 страницы с приятными иллюстрациями.
«Результат получился достойный. Очень понравилось работать с вашей командой. Все процессы налажены, всегда есть обратная связь и возможность узнать, что происходит с проектом. Очень подробно рассказывали о каждом своем шаге, что не может не радовать, ведь нам было очень важно проконтролировать, насколько хорошо разработчик выполняет свою работу»
Михаил
Менеджер проекта заказчика
![Пиробайт [Pyrobyte]](https://assets-global.website-files.com/655d9f72b952a7dd4b815c27/655d9f72b952a7dd4b815dcd_telegram.svg){kind=icon}
