Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
KozhinDev
Приложение программы лояльности для сети АЗС "КрасноярскНефтепродукт"
KozhinDev
WDA
2024
#Приложение под ключ

Приложение программы лояльности для сети АЗС "КрасноярскНефтепродукт"

2430 
KozhinDev
KozhinDev Россия, Красноярск
Поделиться:
Приложение программы лояльности для сети АЗС "КрасноярскНефтепродукт"
Клиент

АО «Красноярскнефтепродукт»

Бюджет

1 500 000

Сфера

Авто/Мото

Регион

Россия, Красноярск

Мобильная платформа

IOS, Android

Сдано

Декабрь 2022

Задача

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

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

Решение

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

одно приложение вместо двух можно создать дешевле и быстрее;

по производительности кроссплатформенное приложение на React Native не уступает нативным;

в будущем поддержка универсального сервиса также обойдется дешевле — не нужно будет оплачивать работу двух команд.

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

1Аналитика и дизайн

Изучили продукты конкурентов перед разработкой дизайна для приложения «КНП». У заказчика были примерные прототипы страниц, которые мы использовали на первых этапах для ускорения.

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

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

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

Мы также учли отзывы клиентов о конкурентах, выделили основные проблемы и решили их. Например:

В некоторых приложениях приходится проходить авторизацию при каждом входе. В сервисе «КНП» после успешной авторизации пользователю присваиваются Access Token и Refresh Token. В дальнейшем доступ в приложение осуществляется с помощью Access Token, обновляющегося технологией Refresh Token. Пока она действует, повторная авторизация не нужна.

Приложение «КНП» не нужно обновлять при каждом входе, а значит пользователи не столкнутся с невозможностью доступа при плохом интернет-соединении. Сервис обновляется фоново, только при наличии связи, если эта опция не отключена на смартфоне. Также на всех заправочных станциях «КНП» есть бесплатный wi-fi.

Пользователи не потеряют доступ к приложению при смене смартфона: достаточно скачать приложение на новое устройство и войти по номеру телефона или карты. Если поменялся номер телефона, необходимо позвонить в службу поддержки и привязать карту к новому номеру. Так клиенты «КНП» могут быть уверены, что их бонусы, история покупок и другие данные не пропадут.

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

Кроме прямых конкурентов, аналитик и дизайнер изучили продукты из смежных сфер. Так, некоторые решения при реализации карты внутри приложения «КНП» вдохновлены сервисами Яндекса.

2Программа лояльности

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

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

При использовании программы лояльности в приложении «КНП» покупатель может:

— зарегистрироваться и авторизоваться по номеру телефона или карты, создать электронную карту;

— списать или начислить бонусы при покупке, показав QR-код сотруднику АЗС;

— на главном экране видеть свой статус и количество бонусов;

— просматривать информацию о текущих акциях, новости компании;

— получать оповещения о изменении статуса и предложениях;

— просматривать историю покупок в сети АЗС «КНП».

Так с помощью мобильного сервиса «КНП» удалось повысить качество сервиса, клиентоориентированность. Приложение, скачанное на смартфон, делает компанию «ближе» к покупателям, увеличивает число касаний. Любые вопросы покупатели могут решить с помощью интегрированного чата с технической поддержкой.

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

3Карта

Также мы добавили в приложение карту АЗС сети «КНП», чтобы автовладельцам было проще находить подходящую заправку. Это делает сервис более удобным:

У каждой АЗС на карте есть набор характеристик, которые можно просмотреть — часы работы, виды топлива, наличие wi-fi, кофе, фастфуда, магазина.

Поиск можно осуществлять как по местоположению, так и по характеристикам. Например, если водитель хочет не только заправить машину, но и поесть, можно найти ближайшую заправку с кафе.

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

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

Результат

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

https://play.google.com/store/apps/details?id=ru.knp.app

Стек технологий

  • JavaScript JavaScript Язык программирования
  • React Native React Native Фреймворк/библиотека
  • Node.js Node.js Среда разработки
  • Figma Figma Графический редактор

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

KozhinDev с удовольствием обсудит вашу задачу

Оставить заявку