Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
Digital-кейс дня

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

Вхождение в кейс дня

15 марта ‘23

Заказчик: АО «Красноярскнефтепродукт»
Страница кейса/результат: https://play.google.com/store/apps/details?id=ru.knp.app

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

Агентство-исполнитель кейса

KozhinDev

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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

  • одно приложение вместо двух можно создать дешевле и быстрее;
  • по производительности кроссплатформенное приложение на React Native не уступает нативным;
  • в будущем поддержка универсального сервиса также обойдется дешевле — не нужно будет оплачивать работу двух команд.

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

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

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

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

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

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

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

  • В некоторых приложениях приходится проходить авторизацию при каждом входе. В сервисе «КНП» после успешной авторизации пользователю присваиваются Access Token и Refresh Token. В дальнейшем доступ в приложение осуществляется с помощью Access Token, обновляющегося технологией Refresh Token. Пока она действует, повторная авторизация не нужна.
  • Приложение «КНП» не нужно обновлять при каждом входе, а значит пользователи не столкнутся с невозможностью доступа при плохом интернет-соединении. Сервис обновляется фоново, только при наличии связи, если эта опция не отключена на смартфоне. Также на всех заправочных станциях «КНП» есть бесплатный wi-fi.
  • Пользователи не потеряют доступ к приложению при смене смартфона: достаточно скачать приложение на новое устройство и войти по номеру телефона или карты. Если поменялся номер телефона, необходимо позвонить в службу поддержки и привязать карту к новому номеру. Так клиенты «КНП» могут быть уверены, что их бонусы, история покупок и другие данные не пропадут.
  • Также мы учли, что целевая аудитория приложения — водители. При использовании сервиса им часто приходится пользоваться только одной рукой: вторая занята рулем или пистолетом автозаправки. Для их удобства основные элементы управления приложением мы разместили внизу экрана, наверху могут располагаться второстепенные.

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

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

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

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

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

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

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

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

Карта

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

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

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

3. Результаты сотрудничества

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

Приложение в App Store

Приложение в Google Play

4. Заключение

Разработали кроссплатформенное мобильное приложение для пользователей сети АЗС в Красноярском крае. Оно сделало процесс использования АЗС более удобным для людей, повысило лояльность к "КНП" и увеличило узнаваемость.

Агентство-исполнитель кейса

KozhinDev

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