Разработка мобильного приложения для сети АЗС 17.02.2023 11:46

ЗаказчикАО «Красноярскнефтепродукт«ЗадачаЗадачами были: повышение качества клиентского сервиса через бонусную систему в приложении; интеграция с 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 и уже получило более 500 скачиваний в каждом из них. Мобильное приложение сделало программу лояльности более удобной и прозрачной для клиентов, увеличило число касаний с целевой аудиторией компании.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine