Мобильное приложение с нуля, экосистема увеличили количество пользователей на 40%
- Заказчик
- буше - крупнейшая в Санкт-Петербурге сеть пекарен-кондитерских
- Задача
- Разработать с нуля мобильное приложение с системой лояльности, афишой ивентов и внутренним медиа
Клиент
Крупнейшая сеть пекарен-кондитерских буше в Санкт-Петербурге: 80 офлайн точек, сервис доставки.
Проблема, с которой пришел клиент:
Цели:
— Разработать новый дизайн — старый морально устарел + появилась потребность в других смыслах
— Написать приложение с нуля — старое приложение было написано на кроссплатформенном языке и не подходило для масштабирования и реализации новых идей.
— Увеличить максимально возможную нагрузку на систему — нужно было перестроить архитектуру, чтобы приложение могло выдерживать пиковую нагрузку пользователей в праздничные дни
Вызов:
Из приложения для покупки булочек сделать суперапп, где можно почитать статьи, сходить на мероприятие или погрузиться в атмосферу города.
Результаты:
— Переработали дизайн приложения: пересобрали UI/UX, добавили уникальные иллюстрации и креативные фичи.
— За 9 месяцев написали экосистему, которая совмещает множество функций и киллерфич, но при этом простой и понятный для пользователя. Теперь в приложении можно читать стать, выбирать мероприятия и др.
— Улучшили архитектуру. Первое сентября — один из пиковых дней — прошел без сбоев.
Как было
- доступ к каталогу только для авторизованных пользователей
- приложение использовали только, чтобы показать QR-код на кассе
- авторизация по логину и паролю, который часто забывали
- неочевидный вход в каталог
Как стало
- авторизация по номеру телефона — не нужно запоминать пароль
- доступ в каталог даже для неавторизованных пользователей
- теперь можно не только заказать еду, но и узнать о жизни города и компании, читать статьи
- интуитивно понятный дизайн
Особенности проекта
У заказчика уже было приложение на фреймворке для кроссплатформенной разработки xamarin. Оно связывало 80 000 активных пользователей со всеми внутренними системами: тилипад, срм, системой лояльности.
Нам нужно было сохранить возможности старого приложения, дополнить новыми фичами и сделать простым и понятным для пользователя.
Этапы работы
Аналитика
Составили CJM и карты действий, чтобы выявить основные потребности пользователей приложения буше. Провели исследование старого приложения, составили описание AS IS и TO BE.
Составили функциональную карту и новую структуру мобильного приложения. Уже на этапе аналитики сменили структуру навигации на более привычную. Добавили новые разделы, которых не было в прошлом приложении.
Дизайн
У заказчика уже был выстроен бренд, его цвета, тон оф войс. При этом они были готовы на смелые идеи в дизайне.
Мы провели UX исследования более 10 приложений и проанализировали их функциональность для юзеров. Разделили фичи на те, которые можно использовать в нашем приложении. Определили, что мы точно не хотим видеть в будущем продукте.
На основе этого сначала подготовили прототип, только после них взялись за компоненты и макеты.
Собрали красивый и удобный UI-kit.
Разработка
В прошлом приложении уже была система товаров и услуг. Мы решили писать с нуля, потому что переписать старый код с добавлением новых функций заняло бы столько же времени, но сложностей было бы больше.
У буше более 80 точек — это большая нагрузка на систему, особенно в праздничные дни. Старое приложение не справлялось с пиковой нагрузкой. В итоге приложение работало некорректно — происходила потеря заказов + негатив клиентов, которые не могут воспользоваться системой лояльности. Также у приложения было более 300 000 скачиваний.
Поэтому мы заложили новую архитектуру. Проблему нагрузки решили за счет разделения ответственности. Поделили бэкэнд приложения на несколько сервисов, которые отдельно друг от друга выполняли свои функции. За счет этого равномерно распределили нагрузку и получили профит в виде скорости работы приложения.
Что получилось в итоге:
В новом приложении упростили навигацию и авторизацию, доступ к каталогу теперь доступен даже незарегистрированным пользователям. Появилась страница со сторис, акциями и статьями.
Недавно прошло 1 сентября и приложение сработало без сбоев. Сейчас зарегистрировано уже более 157 тысяч пользователей и проблем не возникает. На разработку мы потратили 9 месяцев.
Заставка при входе
Появилась новая анимированая заставка «Круассан шредингера» при входе в приложение — пасхалка для олдовых клиентов.
Авторизация и регистрация
Войти можно по номеру телефона, теперь не надо держать в голове свой логин и пароль. При этом сохранили обратную совместимость для старых пользователей — в новом приложении не нужно заново регистрироваться — все данные подтянулись из старого приложения.
Предыдущее приложение делалось не нами, поэтому доступа к кодовой базе у нас не было. Это немного усложнило решение задачи.
Главная страница
Сделали легкий и интуитивно понятный дизайн, чтобы пользователь смог без подсказок разобраться в новом функционале. При этом главные функции остались на виду.
Например, на главной странице есть быстрый доступ к qr-коду, что обеспечивает мгновенное открытие на кассе.
Транслируем главную мысль нового приложения — буше уже не просто про еду.
На главной странице пользователь может перейти в “больше чем булочки” и почитать статьи о жизни компании или узнать историю о продукте.
Появился раздел с проектами и мероприятиями. Прямо из приложения можно перейти на youtube, чтобы посмотреть свежий выпуск проектов буше. Также можно почитать о мероприятиях в городе и купить билет.
О новостях и акциях можно узнать в сторис или почитать подробнее в раздел “акции и новости”.
А еще все новинки в отдельном разделе, пользователи всегда будут знать что новенького можно попробовать.
Одно из frontend решений
В новом обновлении появилось много новых разделов: акции, новости и истории. Когда приложение выложили — увидели сложность в том, чтобы пользователь мог кликнуть по товару, которые рекламируется в истории и перейти в нужный раздел.
Доработали систему навигации и вот, что получилось:
Было: из новости или какой-то акции нельзя было сразу попасть на нужный экран, Например, буше выложили историю с новым круассаном, а ты хочешь сразу перейти на нужный экран и купить его.
Придется закрыть экран ? перейти в каталог ? найти нужную категорию ? найти нужный товар.
Стало: по нажатию кнопки в истории можно перейти на рекламируемый продукт, товар или мероприятие. Пользователь делает это в один клик.
Выглядит, как простое изменение, но с точки зрения разработки — сложная задача.
Каталог
Каталог теперь достаточно просто найти. По привычному паттерну он находится в tab bars. Карточки товара можно пролистывать в открытом виде, не возвращаясь обратно в категорию. Мы минимизировали переходы назад, соседние элементы всегда доступны по уже привычным свайпам.
У клиента есть продукция, которая не доставляется день в день, а может быть доставлена от определенной даты. Такие товары автоматически определяются в корзине и подсвечивают в карточке товара и в корзине ближайшую дату доставку.
В приложении появился каталог по Москве, которого ранее не было. В Москве у буше есть только самовывоз, но мы заложили возможность для дальнейшего расширения, если клиент захочет ввести доставку.
Корзина
Корзина стала более дружелюбной, появились крутые иллюстрации. Иллюстрации, кстати делал сам клиент.
Можно оформить заказ другому человеку, выбрать интервал, когда хотите получить заказ сегодня. А также оформить предзаказ на несколько дней вперед.
Профиль
Кроме стандартного профиля для сотрудников буше был разработан отдельный кастомный профиль.
Сохранили систему лояльности, но немного видоизменили ее. Свой статус и накопления можно увидеть в профиле или просто открыть qr-код на главном экране.
Внедрение модального окна с QR-кодом и информацией о баллах гостей существенно упростило работу кассиров. Теперь гости сами могут узнать свой статус и количество баллов, не прибегая к вопросам к персоналу. Достаточно открыть QR-код, и необходимая информация станет доступной незамедлительно. Это повысило удобство обслуживания и улучшило опыт взаимодействия гостей с сервисом.
Когда накоплений хватает, то пользователь может списать свои баллы и повысить свой статус или удерживать его.
Для клиента важно заботится о природе, поэтому в профиле пользователь может отказаться от бумажного чека на кассе. В таком случае он будет приходить на почту, которая была указана в профиле или же пользователь может указать другой e-mail.
Приятная фича: темная, светлая тема. Ты на какой стороне?
Оцифровали пластиковую бонусную карту без потери скидки и бонусных накоплений.
Внедрили отзывы к заказам в любое время после покупки. Важно для тех, кто хочет помочь буше и приложению стать лучше или получить ответ от отдела качества.
Админка
Админку для мобильного приложения делали новую. В админке модераторы могут видеть всех пользователей, отправлять пуш уведомления, создавать промокоды. Если пользователь купил сертификат в мобильном приложении и по какой-то причине он не пришёл на почту, модератор может повторно отправить сертификат из админки.
Также в админку попадают все заказы из мп, что и в кассу, так они дублируются и дают возможность оперативно найти заказ пользователя.
Для главной страницы приложения создали отдельные разделы в админке: загрузка сторис, мероприятий, проектов, акций и новостей.
Результаты
- + 157 000 пользователей
- + 27 000 новых пользователей после обновления
- + 20 000 заказов через мобильное приложение
Технологии
- Laravel
- React
- Kotlin
- Swift
- Postgres
- Figma
Команда
- Артём Рыбин Backend Lead
- НикитаВьясков Backend Senior
- АлександрХигер iOS Lead
- АгилГаджиев iOS Lead
- ИльгамАюпов Android Lead
- ИскендерМурзалиев QA
- ДмитрийВолков DevOps
- Никита Опалинский UX/UI Design
- Диана Алексеева Project Manager
- Алексей Поповкин Project Manager