КНП
13.09.202209.12.2022
Разработка системы лояльности для сети АЗС Красноярскнефтепродукт
Технологии
NestJS
React Native
Описание
Рассказываем о том, как реализовали свой первый тендер — сервис программы лояльность для сети АЗС. Приложение КНП позволяет клиентам пользоваться бонусной программой с помощью QR‑кодов и искать подходящую заправочную станцию на карте. Мы разработали кроссплатформенное решение на React Native, которое стало удобной заменой для пластиковых карт.
Проблема
Сегодня крупные заправочные сети все чаще используют мобильные приложения для списания и начисления бонусов клиентам. В отличие от физических карт, смартфон всегда под рукой, а значит — воспользоваться программой лояльности можно при каждой покупке. Также в приложении в любой момент можно узнать свой статус, количество бонусов на счету. Поэтому руководство «Красноярскнефтепродукт» также решило уйти от пластиковых карт и объявило тендер на разработку мобильного сервиса.
Задача
Заказчик хотел получить современное решение, которое повысит качество клиентского сервиса: своевременно проинформирует о начислении и списании бонусов, смене статуса, акциях и других событиях. Приложение должно было стать «представительством» сети АЗС в смартфоне покупателя. Для реализации бонусной программы приложение нужно было интегрировать с CRM‑системой, которую использует АО «КНП».
Другой целью мобильного сервиса было улучшение имиджа компании и привлечение новых клиентов. Поэтому заказчик хотел получить кастомное приложение, которое отразит преимущества сети.
Решение
Изначально руководство АО «Красноярскнефтепродукт» планировало разработку двух нативных приложений — для 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 и их аналоги. При переходе в стороннее приложение, координаты АЗС автоматически переносятся и строится маршрут.
Благодаря наличию карты, пользователю не приходится тратить дополнительное время на ввод адреса в навигаторе — маршрут готов сразу после открытия стороннего сервиса. Такой функционал повышает вероятность того, что клиент выберет для заправки именно сеть «КНП».
Результат
Приложение «КНП» делает программу лояльности более удобной и прозрачной для клиентов, увеличивает число касаний с целевой аудиторией компании. Сейчас оно представлено в магазинах AppStore и Google Play, общее число установок — более 21 000. В среднем приложением пользуется 700–800 человек ежедневно. Работа над проектом продолжается, заказчик планирует вносить в сервис дополнительные функции.
Свяжитесь с нами