Мобильное приложение для АЗС ХТК

Mobile

О проекте

Хакасская топливная компания (ХТК) — это сеть АЗС в республике Хакасия, где проживает 536 тыс.чел. Городам с небольшим населением присущ паттерн поведения пользователей — заправляться на одной и той же заправке годами.

У компании уже было приложение на Битрикс, в котором зарегистрировано более 70 000 пользователей. Им доступны следующие функции: 

  • личный кабинет;
  • история транзакций;
  • программа лояльности;
  • информация об акциях;
  • форма обратной связи.

картнка в тексте

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

  1. Рост прибыли из приложения за счет повторных покупок и программы лояльности. Прямой контакт с конечным потребителем через пуш-уведомления о новых акциях.  
  2. Повышение лояльности пользователей благодаря оперативной обратной связи и внедрению улучшений в приложение. 
  3. Быстрое тестирование гипотез для управления бизнес-показателями.

картнка в тексте
Проблема

В 2023 году Битрикс прекратил поддержку мобильного модуля, и для ХТК это грозило следующими последствиями:

  • Приложение может исчезнуть из магазинов App Store и Google Play.
  • Клиенты потеряют связь с компанией и свои данные: бонусы, баллы, историю покупок, которые они копили годами.
  • Минус один канал коммуникации с клиентами, утрата доверия.
  • Убытки из-за потери одного из источников трафика.

Мы оперативно погрузились в проект. Запустили параллельно процессы по разработке технического задания, отрисовки дизайна, backend, frontend и тестирование, чтобы как можно скорее помочь нашему заказчику и восстановить коммуникацию с его клиентами.

Наши задачи

  1. Сделать приложение на Flutter без потери базы клиентов. Важно, чтобы при обновлении приложения не потребовалась повторная регистрация и все данные пользователей сохранились в новой версии сервиса.
  2. Разработать приложение как можно быстрее, чтобы не потерять доверие клиентов. 
  3. Улучшить дизайн приложения, сделав приложение более понятным для пользователей.

Сложность

Ранее у ХТК не было полноценного приложения. С помощью специального модуля Битрикс была создана «мобильная платформа» с контентом, который подгружался с сайта на Битрикс. Нам нужно было передать этот контент с Битрикс в новое приложение на Flutter. Для этого необходимо создать специальный «мост»  — в мире IT это называется внешним интерфейсом. Этот мост позволяет данным легко перемещаться между сайтом и мобильным приложением.

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

картнка в тексте

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

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

Реализация

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

Реализацию нового приложения на Flutter мы начали с упрощения логики его функционала. Для этого разработали пользовательские сценарии, описывающие типичные пути использования приложения различными категориями пользователей. Каждый сценарий содержал последовательность шагов, которые пользователь выполняет для достижения определенной цели. Например, сценарии регистрации нового пользователя в бонусной программе, получение бонусов и т.д.

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

картнка в тексте

Подготовили документацию, где описывается, как мобильное приложение интегрируется с бонусной программой.

картнка в тексте

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


Разработка backend с опережением frontend на неделю представляла собой стратегическое решение, направленное на оптимизацию и ускорение процесса разработки всего приложения.

Тестирование функционала проводилось каждые 3 дня для оперативного выявления и устранения технических ошибок.

картнка в тексте

Первый релиз (MVP) включал в себя следующие функции:

  1. Авторизация/регистрация пользователей.
  2. Главная страница с программой лояльности.
  3. Интеграция с бонусным центром для начисления бонусов пользователям за покупки.
  4. Страница акций.
  5. Обратная связь.
  6. Профиль пользователя.
  7. История операций.
  8. Пуш-уведомления.
  9. Offline режим для возможности начислить бонусы при отсутствии интернет соединения.

картнка в тексте
Результаты

От старта работ до выпуска первой версии приложения в App Store и Google Play прошло 2 месяца. Мы разработали полноценное мобильное приложение с полностью обновленным дизайном сохраним данные уже зарегистрированных пользователей: доступы в приложение, бонусные баллы, транзакции.

Я рад сотрудничать с такой командой профессионалов. Проектная команда постоянно стремится улучшить наш сервис и предлагает интересные идеи. Мы обязательно будем их реализовывать вместе с Amiga!

Степан Валерьевич

Степан Валерьевич

Директор по развитию ХТК

Технологии
Bitrix
PHP 8
Laravel 10
БД MySQL
Flutter
Dart

Ярослав Ясаков

Руководитель проекта

Алена Ерофеева

Руководитель проекта

Тимур Моисеев

руководитель мобильной разработки

Артем Салеев

руководитель backend направления

Антон Горохов

PHP Team Lead

Евгений Шмулевский

PHP разработчик

Ася Васильева

системный аналитик

Другие проекты

Mobile

Образовательный проект Easy. Приложение в VK

Образовательный проект Easy. Приложение в VK

Mobile | В работе

CMstore

CMstore

Web | NDA

Ecco

Ecco

Web | NDA

Samsung

Samsung

Web

Маркетплейс горного оборудования

Маркетплейс горного оборудования

Web | NDA

Mercedes-Benz

Mercedes-Benz

Mobile | NDA

Приложение для здоровья CW Clinic

Приложение для здоровья CW Clinic

Mobile

Airspector

Airspector

Web | NDA

Casio

Casio

Mobile

Мобильное приложение для АЗС ХТК

Мобильное приложение для АЗС ХТК

Web

Имиджевый сайт «Шахтинская плитка»

Имиджевый сайт «Шахтинская плитка»

Web

Образовательный портал Школа гениев

Образовательный портал Школа гениев

Mobile

Приложение для пекарен Хлеб Хмельницкого

Приложение для пекарен Хлеб Хмельницкого

Mobile | NDA

Сбер

Сбер

Mobile

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

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

Mobile | NDA

Бизнес-приложение Жёлтая печать

Бизнес-приложение Жёлтая печать

Web

Крупное федеральное СМИ

Крупное федеральное СМИ

Web | NDA

НЛМК

НЛМК

Web | Minicase

Интернет-магазин мебели Трио

Интернет-магазин мебели Трио

Web | NDA

Nike

Nike

Web

HR-сайт для SOKOLOV

HR-сайт для SOKOLOV

Web

Маркетплейс нефтяных продуктов Proleum

Маркетплейс нефтяных продуктов Proleum

Web | NDA

Газпром

Газпром

Web | NDA

ERP-система лизинга автопарка

ERP-система лизинга автопарка

Mobile

Приложение с интеграцией ML

Приложение  с интеграцией ML

Mobile | NDA

Интернет-магазин NL Store

Интернет-магазин  NL Store

Web | В работе

Русплитка

Русплитка

Web

Корпоративный портал ЕМС Team

Корпоративный портал ЕМС Team

Mobile

Приложение-сканер товаров с TV

Приложение-сканер товаров с TV

Mobile | NDA

DHL Express

DHL Express

Web | В работе

Makita

Makita

Web | Minicase

Аникура

Аникура

Web | NDA

Мегафон

Мегафон

Web

Маркетплейс специалистов Gigoo

Маркетплейс специалистов Gigoo

Mobile | NDA

Shell

Shell

Mobile | NDA

М.Видео

М.Видео

Mobile

Мобильное приложение для сети аптек «Ваша №1»

Мобильное приложение для сети аптек «Ваша №1»

Mobile | NDA

AI-приложение Get Art

AI-приложение Get Art

Mobile | NDA

Rockwool

Rockwool

Web

Транспортная компания №1

Транспортная компания №1

Mobile

Интернет-магазин Bravo

Интернет-магазин Bravo

Web | NDA

Aviasales

Aviasales
Хотите связаться с владельцем
компании напрямую?
Дмитрий Тарасов
Дмитрий Тарасов
СЕО

НАПИСАТЬ