О проекте
Приложение позволяет водителю отказаться от пластиковой топливной карты и перенести ее в смартфон.
Пользователь может просматривать баланс карты, список заправок и станций обслуживания, прокладывать маршрут до выбранной станции, видеть историю заправок и расходов. А еще может заправляться, не выходя из авто.
Пользователь может просматривать баланс карты, список заправок и станций обслуживания, прокладывать маршрут до выбранной станции, видеть историю заправок и расходов. А еще может заправляться, не выходя из авто.
Задача
Топливная компания «ЕКА» — одна из лидеров продаж на рынке нефтепродуктов московского региона с 1997 года.
Заказчик решил сделать мобильные приложения, чтобы отслеживать операции на заправке в режиме реального времени, контролировать оплаты и расход топлива.
Пользуясь виртуальной топливной картой, владельцы авто смогут тратить на бензин и другие услуги АЗС на 30% меньше (возврат НДС 20% + экономия до 10%).
Заказчик решил сделать мобильные приложения, чтобы отслеживать операции на заправке в режиме реального времени, контролировать оплаты и расход топлива.
Пользуясь виртуальной топливной картой, владельцы авто смогут тратить на бензин и другие услуги АЗС на 30% меньше (возврат НДС 20% + экономия до 10%).
Приложение избавит компанию от рисков, связанных с наличными, например от переплат и заправок в нерабочее время. А если во время заправки у водителя возникнет проблема, он сможет быстро решить ее в онлайн-чате.
Богдан Мельник
Менеджер проектов WINFOX
Решение
Нам предстояло сделать приложения для iOS и Android с нуля: составить техническое задание, разработать прототипы, нарисовать дизайн и написать код для двух операционных систем.
Чтобы приложения получали данные карты с точками обслуживания, атрибуты заправок и построения маршрутов, мы настроили интеграцию с геосервисом «Мультигоу».
Чтобы приложения получали данные карты с точками обслуживания, атрибуты заправок и построения маршрутов, мы настроили интеграцию с геосервисом «Мультигоу».
Мы прикрутили бэкенд заказчика — это позволило приложениям использовать данные топливных карт, их лимиты и истории транзакций. Но на этом работа с бэкендом не закончилась: чтобы пользователь мог менять отображение данных в приложении, мы реализовали работу фильтров по данным, полученным с бэкенда.
Богдан Мельник
Менеджер проектов WINFOX
Надо было добавить в приложения онлайн-чат. Выбрали JivoSite — одно из самых распространенных и надежных решений.
Конфигурирование основных параметров Android-приложения реализовали через сервис Firebase Remote Config. Он открывает широкие возможности. Например, мы можем менять внешний вид и функциональность приложения удаленно, без публикации обновлений в Google Play.
Александр Хрущев
Технический директор WINFOX
![](/wp-content/themes/winfox/images/Frame_419.png)
![](/wp-content/themes/winfox/images/Frame_418.png)
![](/wp-content/themes/winfox/images/Frame_417.png)
Основные экраны
приложения
приложения
Лимиты
Пользователь может быстро посмотреть срок действия и остаток лимитов по топливу и услугам, например по автомойке и шиномонтажу.
![Лимиты](https://wnfx.ru/wp-content/uploads/2021/04/Frame_428.png)
Расходы
Здесь собрана актуальная информация о последних операциях по топливной карте. Операции можно отфильтровать по месяцам и видам топлива.
Здесь собрана актуальная информация о последних операциях по топливной карте. Операции можно отфильтровать по месяцам и видам топлива.
Александр Клочко
UX/UI-дизайнер WINFOX
![UX/UI-дизайнер WINFOX](https://wnfx.ru/wp-content/uploads/2021/04/Frame_438.png)
Локатор
С помощью локатора можно найти ближайшую заправку на карте и построить до нее оптимальный маршрут в любимом навигаторе, пример от Яндекса или Гугла.
![Локатор](https://wnfx.ru/wp-content/uploads/2021/04/Frame_437.png)
Другое
Нажав «Другое», пользователь может настроить уведомления, найти ответы на частые вопросы, посмотреть контакты компании и связаться с поддержкой.
![Другое](https://wnfx.ru/wp-content/uploads/2021/04/Frame_436.png)
Оплата
В будущем можно будет оплачивать топливо прямо из приложения — и не предъявлять карту сотруднику заправки. Водитель сможет заправлять машину, не выходя из нее.
![Оплата](https://wnfx.ru/wp-content/uploads/2021/04/Frame_435.png)
Что умеет
приложение
приложение
Авторизация по топливной карте и FaceID
Чтобы первый раз войти в приложение, достаточно ввести номер топливной карты и привязанный к ней номера телефона. Потом для входа можно использовать отпечаток пальца или FaceID.
![Авторизация по топливной карте и FaceID](https://wnfx.ru/wp-content/uploads/2021/04/Frame_429.png)
Поиск точек обслуживания по фильтрам
Фильтры помогут быстро найти точку по определенным параметрам. Например, можно фильтровать результаты поиска по бренду АЗС, марке бензина, наличию стоянки, мойки, кафе и других сервисов. Можно выбрать один фильтр или сразу несколько.
![Поиск точек обслуживания по фильтрам](https://wnfx.ru/wp-content/uploads/2021/04/Frame_4301.png)
Построение маршрута до АЗС
Водитель может построить маршрут до нужной станции обслуживания.
UX/UI-дизайнер WINFOX
Изначально строить маршрут можно было в самом приложении. Но после тестирования мы выяснили, что водителям удобнее пользоваться привычными сервисами вроде Яндекс.Навигатора. Поэтому подружили приложение с популярными навигаторами.
![UX/UI-дизайнер WINFOX](https://wnfx.ru/wp-content/uploads/2021/04/Frame_431.png)
Просмотр параметров лимита
Нажав на топливную карту, водитель увидит подробности по лимиту во всплывающем окне: доступные продукты и услуги, период действия, размер и остаток лимита.
![Просмотр параметров лимита](https://wnfx.ru/wp-content/uploads/2021/04/Frame_432.png)
Заправка из салона авто
Тот, кто не хочет выходить из машины, может оформить и оплатить заправку в приложении. Достаточно выбрать номер колонки, тип бензина, количество литров — и нажать кнопку «Оплатить».
![Заправка из салона авто](https://wnfx.ru/wp-content/uploads/2021/04/Frame_434.png)
Горячая линия в онлайн-чате
Если у водителя что-то случилось, он может написать в чат — и менеджер быстро решит проблему. Например, в чате подскажут, как заблокировать топливную карту, если человек ее потерял.
![Горячая линия в онлайн-чате](https://wnfx.ru/wp-content/uploads/2021/04/Frame_433.png)
Работа в офлайн-режиме
Если в дороге пропал интернет, водитель все равно сможет пользоваться локатором: посмотреть точки АЗС на карте, узнать их режим работы и перечень дополнительных услуг.
Мы реализовали данные локатора в виде справочников, чтобы приложение было полезно даже без интернета.
Александр Хрущев
Технический директор WINFOX
![Технический директор WINFOX](https://wnfx.ru/wp-content/uploads/2021/04/Frame_439.png)
Результат
Приложение позволяет заказчику отслеживать операции на АЗС в режиме реального времени — и полнее контролировать распределение денег и расход бензина.
Пользователи получили удобный инструмент для поиска заправок, контроля лимитов по топливной карте, просмотра истории оплат. А в будущем водители смогут заправлять машину, не выходя из нее — и экономить на бензине до 30%.
Пользователи получили удобный инструмент для поиска заправок, контроля лимитов по топливной карте, просмотра истории оплат. А в будущем водители смогут заправлять машину, не выходя из нее — и экономить на бензине до 30%.
Мы четко планировали все процессы жизненного цикла приложения. Поэтому нам удалось вовремя закончить работу и передать заказчику рабочий продукт.
Рустам Мухамедьянов
Руководитель WINFOX
Команда
проекта
проекта
Менеджер проекта
Богдан Мельник
Технический директор
Александр Хрущев
UX/UI-дизайнер
Александр Клочко