Кейс агентства Kotelov, рассказывает о создании суперприложения для крупнейшей сети кафе и кондитерских в СПб.
Заказчик проекта: Сеть кафе и кондитерских в Санкт-Петербурге, у которой более 70 точек, есть сайт и приложение.
Задачи проекта:
- Создать новый дизайн: текущий дизайн устарел, кроме того, нужно было добавить новые смыслы.
- Создать приложение с нуля: предыдущее написано на кросс-платформенном языке и не масштабируется для реализации инноваций.
- Нарастить максимально допустимую нагрузку на систему: необходимо изменить архитектуру, чтобы приложение было способно справляться с пиковыми праздничными нагрузками.
Решение задач
Как было:
- Доступ к каталогу продукции был ограничен только для авторизованных пользователей.
- Приложение использовалось преимущественно для отображения QR-кода на кассе.
- Авторизация происходила по логину и паролю, клиенты их часто забывали.
Как стало:
- Вход по номеру телефона упростил процесс авторизации, избавив пользователей от необходимости запоминать пароли.
- Неавторизованные гости получили возможность просматривать каталог продукции.
- Приложение стало многофункциональным: помимо заказа еды, пользователи могут узнавать о мероприятиях в Санкт-Петербурге, читать статьи о компании и городе, а также погружаться в его уникальную атмосферу.
- Интерфейс стал интуитивно понятным и удобным для всех категорий пользователей.
Техническая сторона:
У компании уже было приложение на фреймворке Xamarin для кроссплатформенной разработки, которое соединяло 80 тысяч активных пользователей с внутренними системами: Tillypad, CRM и сервисом лояльности.
Задача: необходимо было сохранить функциональность прежнего приложения, расширить его возможности и создать современный, удобный интерфейс для пользователей.
Результат:
Приложение превратилось в суперприложение, которое не только упрощает заказы и доступ к услугам, но и становится проводником в мир Санкт-Петербурга, предлагая пользователям актуальную информацию, статьи и анонсы мероприятий. Это сделало приложение более полезным, вовлекающим и удобным для ежедневного использования.
Этапы проекта
Аналитика
- Анализ и исследование:
- Составлены Customer Journey Map (CJM) и карты действий для выявления ключевых потребностей пользователей существующего приложения.
- Проведено детальное исследование старого приложения, на основе которого составлены описания текущего состояния (AS IS) и целевого состояния (TO BE).
- Разработка новой структуры:
- Создана функциональная карта, которая отражает все возможности обновленного приложения.
- Разработана новая структура мобильного приложения, учитывающая выявленные потребности пользователей.
- Улучшение навигации:
- На этапе аналитики изменена структура навигации, сделав ее более интуитивно понятной и привычной для пользователей.
- Добавлены новые разделы, которые отсутствовали в предыдущей версии приложения, что расширило его функциональность и удобство использования.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Дизайн
У заказчика был выстроен бренд с определёнными цветами и tone of voice, однако в компании не готовились к смелым дизайнерским решениям.
Провели UX-исследования больше десятка приложений и изучили их функциональность для пользователей. Выделили фичи, которые актуальны для нового супер аппа, и выявили элементы, которые не нужны в будущем проекте.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Сначала был сделан прототип,а потом макеты.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Собран UI-kit.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Мобильное приложение буше: разработка
В старом приложении уже была реализована система товаров и услуг, однако его модернизация и добавление новых функций потребовали бы значительных временных затрат и привели бы к техническим сложностям. Учитывая, что у “Буше” более 80 точек продаж и приложение скачано более 300 тысяч раз, нагрузка на систему, особенно в праздничные дни, была чрезвычайно высокой.
Было принято решение разработать новое приложение с нуля, вместо переписывания старого кода. Для этого:
- Внедрена новая архитектура, которая разделила бэкенд на несколько независимых сервисов. Каждый сервис отвечает за выполнение конкретных функций, что позволило равномерно распределить нагрузку и повысить производительность приложения.
- Упрощена навигация и процесс авторизации, сделав приложение более удобным для пользователей.
- Открыт доступ к каталогу для незарегистрированных пользователей, что упрощает ознакомление с товарами и услугами и привлекает новых клиентов.
Разработка нового приложения заняла девять месяцев и привела к значительным улучшениям:
- Увеличена скорость работы приложения за счет оптимизации нагрузки.
- Повышено удобство использования благодаря интуитивно понятной навигации и упрощенной авторизации.
- Расширена аудитория за счет открытого доступа к каталогу для всех пользователей.
Новое приложение “Буше” стало более устойчивым к нагрузкам, особенно в периоды повышенного спроса, и предоставило пользователям более комфортный опыт взаимодействия. Это решение не только улучшило текущие показатели, но и создало основу для дальнейшего развития и масштабирования.
Добавление страницы со сторис, акциями и статьями позволяет пользователям быть в курсе актуальных предложений и новостей, что создает более интерактивный опыт взаимодействия с приложением. Это также способствует повышению вовлеченности пользователей и может привести к увеличению продаж.
Успешный запуск приложения 1 сентября, без каких-либо сбоев, подтверждает качество проведенной работы и эффективность команды разработки. С уже зарегистрированными более 157 тысячами пользователей, можно сказать, что приложение нашло свою аудиторию и успешно выполняет поставленные цели.
Таким образом, можно отметить, что проделанная работа принесла положительные результаты, и приложение выполняет свои функции на высоком уровне, готово к дальнейшему развитию и возможно, новым улучшениям в будущем.
Новая заставка на входе в приложение
Появление новой анимированной заставки «Круассан Шредингера» при входе в приложение — это отличный способ добавить нотку юмора и ностальгии для старых пользователей. Такие пасхалки помогают установить эмоциональную связь с клиентами, делая использование приложения более приятным и запоминающимся.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Процесс авторизации и регистрации
Процесс авторизации и регистрации в новом приложении стал значительно более удобным благодаря тому, что пользователи теперь могут входить по номеру телефона. Это обновление устраняет необходимость запоминать логин и пароль, что упрощает взаимодействие с приложением, особенно для тех, кто не любит запоминать множество учетных данных. Простота и быстрота входа — важные факторы, способствующие повышению уровня удовлетворенности пользователей.
Тем не менее, разработчики проявили внимание к старым пользователям, сохранив обратную совместимость. Благодаря этому пользователи, которые переходят на новое приложение, не сталкиваются с необходимостью повторной регистрации — все их данные автоматически подтянулись из предыдущей версии. Это не только экономит время, но и создает чувство непрерывности и заботы о клиентах.
Предыдущее приложение было создано другой командой, и доступ к исходному коду у агентства не было. Это усложнило задачу по интеграции данных и адаптации функционала, поскольку приходилось работать с неожиданными ограничениями и необходимо было изучать, как именно работали предыдущие решения.
Такой подход к разработке показывает профессионализм команды, которая, несмотря на сложности, смогла найти оптимальные решения для обеспечения плавного перехода пользователей на новую платформу. Это также подчеркивает важность построения качественного пользовательского опыта и индивидуального подхода к каждому клиенту, что является залогом успешного приложения на рынке.
Главная страница приложения
Разработка легкого и интуитивно понятного дизайна — это один из ключевых факторов успеха любого приложения. Пользователи ценят, когда интерфейс не только визуально привлекателен, но и функционален, позволяя им легко осваивать новые возможности. Команда уделила особое внимание упрощению пользовательского опыта, что является важным шагом для удержания клиентов и повышения их удовлетворенности.
Основные принципы дизайна, заложенные в приложение, включают простую навигацию, четкую структуру информации и акцент на ключевых функциях. Например, размещение важных элементов на видных местах помогает пользователям быстро находить нужные опции, сокращая время на поиск и избегая путаницы.
Одним из удачных решений стало размещение QR-кода на главном экране. Это обеспечивает мгновенный доступ к коду, что упрощает процесс оплаты на кассе, сокращает время ожидания и способствует более быстрым транзакциям. Такой подход не только повышает удобство для пользователей, но и улучшает общую эффективность работы приложения.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Идея о том, что приложение уже не просто про еду, прекрасно отражает стремление компании выйти за рамки традиционного понимания своего бренда и предоставить пользователям более высокий уровень взаимодействия.
На главной странице приложения пользователи могут увидеть раздел “Больше, чем булочки”, который открывает перед ними возможности более глубокого понимания компании и ее философии. Этот подход не только улучшает имидж бренда, но и создает более эмоциональную связь с потребителями.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Внедрение раздела с проектами и мероприятиями в приложение “Буше” — это значимый шаг, который не только расширяет возможности платформы, но и предоставляет пользователям новый, уникальный опыт взаимодействия с брендом.
Этот раздел позволит пользователям быть в курсе текущих и планируемых проектов компании, открывая для них дополнительные возможности для вовлеченности. Прямая интеграция с YouTube дает доступ к свежим выпускам, где пользователи могут узнать больше о деятельности компании и заглянуть за кулисы ее работы.
Кроме того, функция покупки билетов на городские мероприятия прямо в приложении делает процесс более удобным и быстрым, что особенно ценится современными пользователями.
Добавление такого раздела — это не просто обновление функционала, а стратегическое решение, направленное на укрепление связей с аудиторией. Оно помогает создать более глубокие и многогранные отношения с клиентами, подчеркивая вовлеченность компании в культурную и общественную жизнь. Такой подход не только укрепляет имидж бренда как активного участника социальной сферы, но и способствует росту лояльности потребителей, а также привлечению новой аудитории. В условиях современных трендов, когда пользователи ценят не только продукт, но и философию бренда, такой шаг становится важным элементом успешной стратегии.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Про новости и акции можно узнать в специальном разделе.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Новинки собраны также в особом разделе, чтобы быстро узнать что еще появилось для клиентов.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Одно из frontend-решений
Реализация улучшенной навигации в приложении — это шаг, который может значительно повысить пользовательский опыт. Прежняя модель навигации была неэффективной. Пользователи теряли время на закрытие экрана и навигацию через множество этапов, чтобы добраться до желаемого продукта. Это создавало не только неудобства, но и риски потери интереса к продукту.
Система навигации была доработана для внедрения функционала быстрого перехода к товарам или мероприятиям, упомянутым в новостях или акциях.
Все теперь можно сделать в 1 клик.
Несмотря на то что изменения кажутся простыми с точки зрения пользователя, действительно, в разработке это достаточно сложная задача. Внедрение удобной и логичной навигации является ключевым шагом к улучшению взаимодействия с вашим продуктом, что в конечном итоге приведет к большей удовлетворенности клиентов и росту бизнеса.
Изменения в каталоге
Каталог пользователь может найти сразу. Теперь карточки можно листать не переходя в категорию. Переходы назад были минимизированы.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Некоторые заказы можно оформить только на определенную дату.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Теперь есть каталог по Москве, где доступен самовывоз. В будущем предусмотрено расширение возможностей приложения для организации доставки.
Корзина
В корзине появились авторские иллюстрации от заказчика. Доступен выбор интервала получения заказа и оформления предзаказа за несколько дней.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Профиль
Сделан кастомный профиль помимо стандартного профиля сотрудника.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Программа лояльности была улучшена для повышения удобства пользователей. Теперь для проверки статуса и накоплений можно увидеть QR-код на главном экране, вместо того чтобы заходить в профиль. Это сделало проще работу кассиров: гости могут самостоятельно получать нужную информацию и не беспокоить персонал.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Если хватает накопленных баллов, их можно списать.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Для тех, кто заботится об экологии сделана возможность не брать чек из бумаги и получать его на почту.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Есть возможность выбора темной или светлой темы.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Пластиковая бонусная карта стала цифровой с сохранением всех привилегий.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Появилась возможность оставить отзыв в любое время после покупки и получить ответ от службы качества.
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Админка
В новой админке модераторы имеют возможность просматривать пользователей, формировать промокоды и посылать пуш-уведомления. Если сертификат не был получен пользователем на почту, модератор реализует отправку его прямо из админки. Кроме того, заказы из приложения также собираются в админке, что позволяет быстро их находить.
Для удобства в админке реализована возможность публикации анонсов мероприятий, другого полезного контента для пользователей.
Результаты проекта
Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
