Разработка мобильного приложения с системой лояльности для клиентов сети АЗС «Красноярскнефтепродукт»

Главное о кейсе

Разработали кроссплатформенное приложение для сети «КНП», которая владеет 170+ АЗС в Красноярском крае и Хакасии. Сервис позволяет клиентам пользоваться программой лояльности с помощью мобильных устройств. Для разработки использовали технологию React Native.

MVP мобильного приложения включает в себя:
— возможность регистрации и авторизации;
— электронную карту лояльности с бонусными баллами и статусом клиента;
— генератор QR-кодов для начисления и списания бонусов;
— информационный блок с акциями и специальными предложениями;
— карту автозаправок с указанием особенностей каждой — wi-fi, кофе и других;
— рассылку push-уведомлений.

Как проект изменил жизнь пользователей

Приложение «КНП» увеличило число касаний с целевой аудиторией компании благодаря удобному и понятному доступу к программе лояльности с любого устройства. Оно опубликовано в магазинах AppStore и Google Play, и уже в первый месяц его установили более 1700 клиентов сети автозаправок.

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

Бизнес-задача и ее решение

Заказчику было необходимо современное мобильное приложение для улучшения клиентского сервиса и имиджа сети АЗС, увеличения числа касаний с текущими клиентами и привлечения новых. Приложение должно было сделать программу лояльности более удобной и доступной. Для этого нужна была интеграция с CRM-системой, которую использует АО «КНП».

Мы реализовали:
— интуитивно понятный и удобный для водителей дизайн интерфейса: на главном экране пользователь видит свой статус, количество бонусных баллов, основные кнопки расположены в углу экрана, чтобы сервисом было удобно управлять одной рукой;
— авторизацию с помощью Access Token и Refresh Token: пользователю не нужно вводить логин и пароль при каждом обращении к приложению;
— фоновое обновление сервиса, чтобы клиенты могли иметь доступ к нему даже при слабом интернет-соединении;
— генератор QR-кодов для удобства операций с бонусами;
— удобную карту сети, где можно найти подходящую АЗС по набору характеристик или местоположению, посмотреть необходимую информацию о заправке, проложить маршрут с помощью сторонних приложений, например, Я.Навигатор;
— информационный блок с новостями и акциями и рассылку push-уведомлений.

Крафт (мастерство), реализация, технические детали

Руководство АО «КНП» хотело разработать два нативных приложения — для Android и iOS. Но мы смогли раскрыть для клиента плюсы кроссплатформенного решения с использованием технологии React Native:
— одно приложение разрабатывается дешевле и быстрее;
— по скорости работы и возможностям такой продукт не уступает нативным;
— для поддержки и развития проекта нужна только одна команда, то есть, затрат также будет меньше.

Руководители «КНП» пришли к выводу, что универсальное решение выгоднее, и мы начали работу.

Для генерации QR-кодов в приложении необходимо было настроить интеграцию с системой «СНК» — CRM, которую используют сотрудники «КНП» для работы с клиентами. Это оказалось не так просто: нам предоставили API старой версии, в которой часть необходимого функционала была просто недоступна.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Большое внимание уделили аналитике, изучили документацию заказчика и продукты конкурентов. Программа лояльности реализуется в «КНП» уже несколько лет, поэтому заказчик дал нам много информации о своей целевой аудитории:
— действующие клиенты с картой, привязанной к номеру телефона;
— действующие клиенты с картой, которая не привязана к номеру телефона;
— потенциальные клиенты.

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

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

обновление при обращении к приложению, которое не всегда удобно в очереди у кассы — мы добавили возможность обновления в фоновом режиме при подключении к интернету;
требование авторизации при каждом входе — мы использовали Access Token и Refresh Token, чтобы покупателям сети не нужно было часто вводить логин и пароль.

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

Скриншоты