«Самая вкусная шаурма»: сайт и приложение для онлайн-заказов, кухни и HR

Клиент

«Самая Вкусная Шаурма» (СВШ) — федеральная сеть кафе быстрого питания. Здесь продают шаурму, бургеры, хот-доги и похожие блюда.

Заказы готовятся прямо в торговых точках: покупатель делает заказ, повар готовит его на месте, и клиент забирает еду.

Компания начинала с одного маленького кафе в Туле в 2015 году. За 10 лет сеть выросла до 235 заведений в 121 городах России.

Ситуация до проекта

Клиент обратился к нам с задачей: разработать приложения и улучшить сайт для онлайн-заказов. Бизнес быстро рос, и главной проблемой оставалась скорость обработки заказов и удобство для клиентов.

Ранее существовал формат «предзаказ по телефону»: клиент звонил, оставлял заказ и приходил к назначенному времени. Но для повара это было неудобно: приходилось отвлекаться от готовки, снимать перчатки, отвечать на телефон и вводить заказ в систему, а потом возвращаться к работе.

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

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

Цель проекта

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

Задачи

- сделать клиентское мобильное приложение для самовывоза и доставки.

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

- доработать основной сайт: онлайн-заказы, конструкторы блюд, обновить фирменный стиль.

- обновить HR-лендинг и подключить его к «Битрикс24» для получения откликов на вакансии.

Как мы работали

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

Татьяна Терёшкина, системный аналитик «СофтЭксперт»:

"У нас есть опыт разработки сайтов как по макетам заказчика, так и по подготовленным нами прототипам. Ускоряет ли подготовленный заказчиком макет работу? Зависит от его качества.

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

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

Идея приложения для клиентов: выбрать способ получения заказа (самовывоз или доставка), выбрать точку и время, оплатить и при необходимости оставить комментарий.

При этом приложение для поваров должно быть максимально простым, где одной кнопкой можно брать заказ в работу. Это ускоряет обработку заказов из всех источников — сайта, приложений и партнёров (Яндекс Еда, Деливери и др.).

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

  -  доработали макеты и выполнили верстку интерфейсов для поваров и покупателей;

  -  скоординировали работу приложений с сервисами обработки заказов с сайта, партнеров-агрегаторов и клиентской версии;

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

Экраны клиентского приложения и приложения для поваров.

Старый сайт был на WordPress, что ограничивало развитие. Мы перенесли его на другую платформу: бэкенд выполнен на Laravel, фронт — на Vue.

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

Общий вид главной страницы, до и после.

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

- выбор ближайшего кафе;

- заказ через сервисы доставок;

- встроенные карты и подсказками, как добраться до СВШ;

- конструкторы для шаурмы и для комбо-наборов.

Светлана Братаева, дизайнер проекта:

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

В кейсе СВШ ограничения конструктора заложены самим продуктом — шаурмой. Здесь есть переключатель для выбора лаваша, радио-кнопки для соуса и изменения рецепта, а также блок выбора дополнительного ингредиента. В последнем блоке как раз действуют естественные ограничения: размер лаваша стандартный, поэтому тут разработчик ограничил количество добавок до пяти, чтобы шаурму можно было свернуть."

Конструктор шаурмы на сайте.

Мы также обновили статичные страницы «О нас», «СВШ бонус» и «Поставщикам». Для них у заказчика не был готов дизайна — только текст и примерные идеи.

Что сделали:

1) Используя информацию со старого сайта, создали яркую страницу о деятельности и достижениях компании с красочной картой и графиком роста торговых точек;

2) Для бонусной программы отрисовали в 3D фирменные монетки и другие элементы, чтобы сделать её привлекательнее.

3) Создали новую страницу с информацией для поставщиков и отрисовали для нее уникальные иконки в общем стиле.

4) Страница, о которой часто забывают, сообщение об ошибке "404". Чтобы ошибка не расстраивала пользователей, мы превратили её в шутку - оформили в виде еще не свернутой шаурмы. Получилось в духе бренда СВШ.

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

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

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

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

Кроме непосредственно верстки, для лендинга вакансий мы:

  -  заново отрисовали некоторые визуальные элементы (волны, иконки, график, карта);

  -  нарисовали недостающие экраны (формы для отклика на вакансию, окно с обратной связью после отправки резюме);

  -  дополнили лендинг юридически-значимой информацией (пользовательское соглашение, куки, политика обработки персональных данных);

  -  настроили синхронизацию с «Битрикс24» для сбора заявок HR-специалистами;

  -  решили административно-серверные вопросы с размещением готового лендинга;

  -  составили подробные инструкции для HR-отдела по размещению новых вакансий через админку сайта.

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

 - Рост заказов и среднего чека за счёт онлайн-заказа и удобных конструкторов блюд.

 - Снижение нагрузки на поваров: больше не нужно принимать заказы по телефону и отвлекаться от готовки.

 - Быстрее обслуживание клиентов — заказ начинает готовиться ещё до прихода клиента или курьера.

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

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