Мобильное приложение с нуля, 100 000 пользователей и экосистема

Цели

• Разработать новый дизайн: старый морально устарел + появилась потребность в других смыслах;
• Написать приложение с нуля: старое приложение было написано на кроссплатформенном языке и не подходило для масштабирования и реализации новых идей;
• Увеличить максимально возможную нагрузку на систему: нужно было перестроить архитектуру, чтобы приложение могло выдерживать пиковую нагрузку пользователей в праздничные дни.

Вызов

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

Результаты

• Переработали дизайн приложения: пересобрали UI/UX, добавили уникальные иллюстрации и креативные фичи;
• За девять месяцев написали экосистему, которая совмещает множество функций и киллерфич, но при этом простой и понятный интерфейс для пользователя. Теперь в приложении можно читать стать, выбирать мероприятия и множество других функций;
• Улучшили архитектуру. Первое сентября — один из пиковых дней — прошел без сбоев.

Как было

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

Как стало

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

Особенности проекта

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

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

Этапы работы 

Аналитика 

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

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

Дизайн

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

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

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

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

Мобильное приложение буше: разработка

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

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

Что получилось в итоге

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

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

Заставка при входе

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

Авторизация и регистрация

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

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

Мобильное приложение буше: главная страница

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

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

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

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

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

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

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

Одно из frontend-решений

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

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

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

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

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

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

Каталог

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

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

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

Корзина

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

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

Профиль

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

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

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

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

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

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

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

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

Админка

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

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

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