Sizl: как мы стали техническим партнером сети дарк китченов в Чикаго

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

Сегодня дарк китчены – один из самых быстрорастущих сегментов фудтеха. Это профессиональные кухни без зала для гостей, которые работают исключительно на максимально быструю доставку. С одной стороны, клиент получает заказ в течение 20-30 минут. С другой, сам бизнес в таких условиях может быстрее масштабироваться, экономить ресурсы и гибко адаптироваться под меняющийся спрос.

По данным Statista, объем мирового рынка уже достиг 58,61 млрд долларов, а к 2030 году дарк китчены займут до 50% рынка доставки и drive-thru.

Первая версия приложения Sizl была написана на Kotlin Multiplatform. Это крутая, но довольно редкая технология, для которой пока не предусмотрено много библиотек и пакетов. Из-за смены CTO также возникли риски в дальнейшей поддержке продукта, его масштабировании и добавлении новых функций.

Нашей команде предстояло:

• Полностью переписать текущее приложение на React Native;
• Добавить две новые функции – Pick-up (самовывоз) и Event-kitchen (заказ еды на мероприятие);
• Интегрировать инструменты для сбора аналитики;
• Пересмотреть и улучшить user flow, навести порядок в дизайне;
• Учесть разные сценарии работы кухонных станций, чтобы повысить конверсию.

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

С кофаундером Sizl Алексеем мы были знакомы ещё до начала проекта: созванивались для интервью и планировали пригласить его на круглый стол по трендам фудтеха. У Алексея уже был успешный опыт запуска крупной сети даркитченов Local Kitchen, но в другом регионе. Его новый проект Sizl довольно быстро развивался на рынке США, но на определённом этапе столкнулся с техническими трудностями, которые могли затормозить рост.

В поисках команды для ребилда Алексей обратился к нашему CEO Максиму. Так как у нас уже был нужный опыт, экспертиза в фудтехе и подходящий стек технологий, мы согласовали условия и стартовали разработку.

С чего началась работа над проектом.

Команда Sizl передала нам полностью рабочий бэкенд и сопроводительную документацию. Некоторые фоновые процессы требовали уточнений, поэтому мы плотно сотрудничали с клиентом.

Фокус с самого начала был на iOS, так как рынок США в первую очередь ориентирован именно на эту платформу. Также мы полностью пересмотрели дизайн, исходная версия которого не всегда соответствовала реальному функционалу приложения.

Для работы над проектом мы собрали команду из трёх мобайл-разработчиков: один занялся основными задачами, ещё двое подключались по мере необходимости. Но над основным скоупом (меню и корзиной) ребята работали вместе, что помогло нам консолидировать всю экспертизу и знания по проекту.

Процесс организовали по всем канонам Agile: разбили функционал на ключевые эпики – меню, авторизация, корзина, поддержка – и далее декомпозировали их на user stories, расставив приоритеты.

Первым делом переписали основной путь пользователя – от выбора блюда до оформления заказа. Остальные сценарии (например, восстановление пароля или обращение в поддержку) реализовали позже.

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

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

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

У каждого приложения — отдельная папка, своя логика и сценарии, но архитектура общая. Это позволяет переиспользовать UI-компоненты, логику авторизации, работу с API и другие элементы. Если появляется новый компонент в одном продукте, его легко адаптировать для остальных.

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

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

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

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

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

Ранее доступ к меню был возможен только после регистрации, а онбординг был сложным и перегруженным. Мы упростили процесс: теперь с помощью функции «Explore Sizl» пользователи могут посмотреть меню и изучить популярные позиции, которые обычно доступны на всех станциях.

Оформить заказ в гостевом режиме нельзя – для этого нужно выбрать опцию «Select delivery mode». При этом адрес доставки можно указать ещё до регистрации. После входа в аккаунт он автоматически подтянется и синхронизируется с созданным аккаунтом.

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

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

Чтобы отследить, через какие каналы пользователи приходят в приложение, мы внедрили механику с QR-кодами, которые содержат ссылки с UTM-метками. Пользователь сканирует такой код, переходит в App Store и скачивает приложение.

Дальше в дело вступает сервис Branch.io – он фиксирует момент перехода по ссылке и сопоставляет его с ID пользователя, который появился в системе после установки.

Затем все данные из Branch.io передаются в севис Amplitude, который интегрирован с рекламными кабинетами Meta. Это позволяет отслеживать конверсии по рекламным кампаниям и точно понимать, какие каналы работают лучше всего. О других инструментах сбора аналитики, которые мы используем, можно прочитать в этой статье.

Меню организовано как конструктор: все блюда сгруппированы по категориям — «полкам». Например, «Популярное», «Завтраки», «Супы» и другие. Если кухня временно не работает, пользователь увидит баннер с соответствующим уведомлением.

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

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

Имя и номер телефона подтягиваются автоматически из настроек аккаунта. Далее нужно выбрать режим доставки: стандартный (цена не указывается) или priority – с ускоренной доставкой за $1. Это небольшая хитрость: по факту обе опции платные, но такая незначительная разница в подаче мотивирует пользователя выбрать более быстрый вариант, тем самым увеличив средний чек. В результате клиент получает более удобный формат доставки, а бизнес – дополнительный доход.

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

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

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

Если у пользователя есть особые пожелания, которые нельзя указать в самом конструкторе блюда, предусмотрено отдельное поле – «Make it special». Оплата списывается с привязанной к приложению карты или через интеграцию с Apple Pay – полностью или с учётом накопленных бонусов в рамках программы лояльности.

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

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

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

Если выбрана опция самовывоз, мы показываем расстояние до станции. Также появляется кнопка «I’m here»: её нужно нажать пользователю, когда он приходит за своим заказом. При желании можно поделиться своей геолокацией со станцией.

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

Управление меню организовано через админ-панель. Менеджер, который отвечает за кухню на конкретной станции, может редактировать наполнение «полок» – категорий блюд.

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

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

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

На главном экране отображаются тематические подборки, сформированные менеджером станции: «Популярные», «Новинки», «High protein», «1+1», сезонные предложения и другие.

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

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

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

Frontend: React Native
Дизайн: Figma
Дополнительные сервисы: Branch.io, Amplitude, Getstream.io, Sentry.io

Мы провели полный ребилд приложения за 2,5 месяца. Быстрее всего переписали модули меню и авторизации. Основное время ушло на логику работы корзины. Ещё один месяц заняло полноценное тестирование и отладка.

За следующие два месяца мы подготовили следующие обновления для приложения: добавили расширенные настройки отображения меню, раздел Giveaway в Event Kitchen, экраны с баллами Emotica, настройку акций, локализацию и ряд других точечных доработок.

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

Сейчас мы продолжаем активно развивать продукт и параллельно работаем над отдельным приложением для райдеров. Внедрение новых функций занимает в среднем 1-2 дня. Для такого быстрорастущего бизнеса, как Sizl, скорость критически важна – компания нацелена на широкую аудиторию и оптимизацию затрат на доставку, что напрямую влияет на выручку.

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