Как мы делали приложение на 157 000 пользователей для буше — главной булочной Питера

Привет, на связи kotelov.com Рассказываем, как за 9 месяцев мы с 0 написали и задизайнили супер-апп для булочной, привлекли 27 000 новых пользователей и добились 20 000 заказов через приложение.

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

— Разработать новый дизайн — старый морально устарел + появилась потребность в других смыслах

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

— Увеличить максимально возможную нагрузку на систему — нужно было перестроить архитектуру, чтобы приложение могло выдерживать пиковую нагрузку пользователей в праздничные дни

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

— Переработали дизайн приложения: пересобрали UI/UX, добавили уникальные иллюстрации и креативные фичи.

— За 9 месяцев написали экосистему, которая совмещает множество функций и киллерфич, но при этом простой и понятный для пользователя. Теперь в приложении можно читать статьи, выбирать мероприятия и др.

— Улучшили архитектуру. Первое сентября — один из пиковых дней — прошел без сбоев.

• доступ к каталогу только для авторизованных пользователей
• приложение использовали только, чтобы показать QR-код на кассе
• авторизация по логину и паролю, который часто забывали
• неочевидный вход в каталог

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

У заказчика уже было приложение на фреймворке для кроссплатформенной разработки xamarin. Оно связывало 80 000 активных пользователей со всеми внутренними системами: тилипад, срм, системой лояльности.

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

Составили CJM и карты действий, чтобы выявить основные потребности пользователей приложения буше. Провели исследование старого приложения, составили описание AS IS и TO BE.

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

У заказчика уже был выстроен бренд, его цвета, тон оф войс. При этом они были готовы на смелые идеи в дизайне.

Мы провели ux исследования более 10 приложений и проанализировали их функциональность для юзеров. Разделили фичи на те, которые можно использовать в нашем приложении. Определили, что мы точно не хотим видеть в будущем продукте.

На основе этого сначала подготовили прототип, только после них взялись за компоненты и макеты.

Собрали красивый и удобный UI-kit.

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

У буше более 80 точек — это большая нагрузка на систему, особенно в праздничные дни. Старое приложение не справлялось с пиковой нагрузкой. В итоге приложение работало некорректно — происходила потеря заказов + негатив клиентов, которые не могут воспользоваться системой лояльности. Также у приложения было более 300 000 скачиваний.

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

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

Недавно прошло 1 сентября и приложение сработало без сбоев. Сейчас зарегистрировано уже более 157 тысяч пользователей и проблем не возникает. На разработку мы потратили 9 месяцев.

Появилась новая анимированая заставка «Круассан шредингера» при входе в приложение — пасхалка для олдовых клиентов.

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

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

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

Например, на главной странице есть быстрый доступ к qr-коду, что обеспечивает мгновенное открытие на кассе.

Транслируем главную мысль нового приложения — буше уже не просто про еду.

На главной странице пользователь может перейти в “больше чем булочки” и почитать статьи о жизни компании или узнать историю о продукте.

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

О новостях и акциях можно узнать в сторис или почитать подробнее в раздел “акции и новости”.

А еще все новинки в отдельном разделе, пользователи всегда будут знать что новенького можно попробовать.

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

Доработали систему навигации и вот, что получилось:

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

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

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

Выглядит, как простое изменение, но с точки зрения разработки — сложная задача.

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

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

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

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

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

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

Сохранили систему лояльности, но немного видоизменили ее. Свой статус и накопления можно увидеть в профиле или просто открыть qr-код на главном экране.

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

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

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

Приятная фича: темная, светлая тема. Ты на какой стороне?

Оцифровали пластиковую бонусную карту без потери скидки и бонусных накоплений.

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

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

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

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

• сделали удобный супер-апп для 157 000+ пользователей
• 27 000+ новых пользователей после обновления
• 20 000+ заказов через мобильное приложение

• Артём Рыбин Backend Lead
• Агил Гаджиев iOS Lead
  
• Дмитрий Волков DevOps
  
• Алексей Поповкин Project Manager
  
• Никита Вьясков Backend Senior
  
• Ильгам Аюпов Android Lead
  
• Никита Опалинский UX/UI Design
  
• Александр Хигер iOS Lead
  
• Искендер Мурзалиев QA
  
• Диана Алексеева Project Manager
  

Наш тг-канал, где мы рассказываем о себе и размещаем наши новости о работе и стажировках: @kotelov_love

Сайт kotelov.com

Почта: [email protected]

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