Помогли сети кофеен Skuratov Coffee запустить мобильное приложение для предзаказа напитков

Мы из Омска — того самого города, который воспели легендарные Смешарики. А кто еще из Омска? Конечно же Skuratov Coffee — популярная по всей России сеть кофеен. Так что рано или поздно нам суждено было встретиться ☕

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

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

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

В 2018 году Skuratov решили сделать мобильное приложение — чтобы гости могли оформить предзаказ любимого напитка по дороге и забрать его из ближайшей кофейни, когда все будет готово.

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

Прежде чем обратиться в Purrweb, Skuratov сотрудничали с другой командой, которая занималась дизайном и разработкой приложения. До релиза дело так и не дошло: проект неоднократно ставили на паузу, возобновляли, и команда работала над ним несколько лет. Довести приложение до финальной версии не успели, потому что компания закрылась.

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

Когда наши разработчики погрузились в документацию и код — артефакты от другой команды — то быстро стало понятно: продукт не готов к релизу. И вот почему:

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

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

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

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

Чтобы поскорее выйти в релиз, мы использовали старый-добрый MVP подход. То есть, определили ключевые функции, без которых смысл приложения теряется, и сфокусировались на них. Это регистрация/авторизация, оформление заказа и оплата. Все неприоритетные фичи прописали в дорожной карте — к ним планировали вернуться позже.

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

Так выглядело приложение на момент выпуска первой рабочей версии — со старым дизайном, созданным предыдущей командой.

С 2018 года дизайн приложения безнадежно устарел. За это время Skuratov поменяли айдентику и нужно было отразить её в интерфейсе.

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

После релиза команда Skuratov сказала нам: как круто, что все получилось доделать, теперь давайте допилим дизайн!

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

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

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

А так — экраны приложения. Мало фирменного черного, скругленные формы, и совсем другой оранжевый ?

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

Сначала решили провести «косметический ремонт» и поправить самое очевидное — цвета, шрифты, форму иконок и кнопок. Стало лучше, но все еще не то. 

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

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

В качестве шрифта выбрали TT Commons Pro — он геометрический, универсальный, в меру строгий.

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

Вот что получилось:

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

Так это выглядело на экранах приложения.

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

Наши UI/UX дизайнеры придумали, как сделать кастомизацию напитка максимально удобной и быстрой — чтобы юзеру не пришлось листать много экранов. Реализовали её через вложенность. Это когда одни элементы скрыты или зависят от других, и пользователь раскрывает их по мере необходимости.

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

Поработали над деталями: вручную отрисовали иконки для модификаторов.

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

Все то время, пока шла работа над дизайном, мы тестировали приложение, чтобы подготовиться к полноценному запуску. Наконец, в декабре 2023 года — за несколько недель до Нового года — мы релизнули бета-версию приложения Skuratov Coffee❄️

Приложение стало доступно в сторах и юзеры могли его использовать. Правда, пока только в двух омских кофейнях: на Лермонтова, 4Б и Красном Пути, 111. Планировали посмотреть, как там дела с багами, собрать фидбек от пользователей, и уже после масштабировать приложение на весь Омск. А в планах были кофейни Skuratov в других городах.

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

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

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

Почему эти проблемы возникали и как мы пытались их решить? Сейчас расскажем.

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

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

Касса автоматически обрабатывает заказ и распечатывает чек. Одновременно с этим на специальном принтере выводится этикетка с деталями заказа — напиток и выбранные модификаторы. Так бариста будет знать, что готовить. Этикетку клеят на стакан, чтобы ничего не перепутать и отдать гостю его заказ.

Схематично это выглядит так:

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

Данные о заказах передавались с ошибками: то на этикетке не все модификаторы, то iiko добавит какой-то отсебятины. Бывало, что этикетки вообще не печатались. Или печатались, но с большой задержкой.

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

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

Маша вспоминает, как часами на созвонах мы, команда Skuratov и ребята из iiko — они отвечали за разработку плагина, обсуждали: как решить эту проблему, что еще можно попробовать сделать, чтобы все наконец-то заработало и никогда больше не слетало?

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

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

Затем усилили сервер и настроили конфигурации. И наконец-то добились большей стабильности! Кассы стали редко терять соединение, а заказы обрабатывались корректно.

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

Кажется, что в какой-то момент мы победили и плагин iiko. Все больше людей могли делать заказы в приложении и получать свои любимые напитки вовремя. А летом 2024 года к приложению были подключены практически все кофейни Skuratov в Омске!

Но вскоре команда Skuratov приняла решение, которое и для нас стало неожиданным: прекратить работу приложения. 

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