Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
Пиробайт
Минус штрафы, плюс продукт. Сайт и приложение для проверки и оплаты задолженностей ФССП и ГИБДД
Пиробайт
WDA
2024
#Сайт под ключ#Приложение под ключ

Минус штрафы, плюс продукт. Сайт и приложение для проверки и оплаты задолженностей ФССП и ГИБДД

2812 
Пиробайт
Пиробайт Россия, Барнаул
Поделиться:
Минус штрафы, плюс продукт. Сайт и приложение для проверки и оплаты задолженностей ФССП и ГИБДД
Клиент

ИП Щербинин Д. Ю.

Сфера

Услуги

Регион

Россия

Тип сайта

Порталы и сервисы

Мобильная платформа

IOS, Android

Сдано

Декабрь 2023

Задача

Каждый, кто водит машину, получал штраф от ГИБДД. Ну ладно, почти каждый. Случайно выехал за стоп-линию, чуть-чуть превысил скорость... Бывало?

Штрафы нужно оплачивать. И чем раньше это сделать – тем дешевле: при оплате в первые двадцать дней ты получаешь скидку 50 % :)

Или помните мантру: «Заплати налоги – спи спокойно». Это правда: иначе придется иметь дело с ФССП. Никто не застрахован от забывчивости: вовремя посмотреть в календарь и не нарваться на штрафы – тоже искусство...

Чтобы облегчить процесс работы со штрафами, заказчик пришел к нам за разработкой сервиса для поиска и оплаты задолженностей Федеральной службе судебных приставов и ГИБДД.

Решение

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

В рамках задачи наша команда:

— продумала логику поиска штрафов, чтобы пользователь не путался в данных;

— настроила единый бэкенд и API для приложения и сайта, чтобы сервис быстро откликался и синхронизировано обновлял данные;

— реализовала личный кабинет для клиентов;

— интегрировала сервис с НКО «Монета», Яндекс Картами.

Говорят, что Новый год нельзя встречать с долгами, иначе следующие 365 дней вас у будут финансовые трудности ;) Мы тоже не стали их копить и зарелизили сайт и приложение 29 декабря 2023 года.

1Предпроектная аналитика: выявили боли и проработали структуру

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

Чтобы повысить лояльность, предусмотрели в сервисе:

— блок с информацией о лицензиях;

— показ истории платежей в личном кабинете пользователя;

— формирование платежного документа прямо в сервисе. Чек можно сохранить себе, поделиться им в мессенджерах и соцсетях;

— полный список адресов всех отделений ФССП в России. Можно найти ближайший по своему региону и обратиться со своим вопросом лично.

Еще одна боль пользователей: прием платежей подтверждается сотрудниками ФССП вручную. Поэтому обновление статуса должника происходит не моментально, что зачастую пугает. Чтобы разъяснить безопасность процесса, предусмотрели информационные блоки о том, как происходит оплата, и возможность сохранить реквизиты. Другие важные вопросы разместили в FAQ.

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

— систему уведомлений о новых обращениях;

— возможность предоставить ответ пользователю через административную панель, прикрепив документы;

— добавление медиа- и текстового контента на сайт и приложение через административную панель.

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

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

2Дизайн: строгость, минимализм, аккуратность

Заказчик хотел, чтобы сервис был минималистичным и аккуратным, похожим на сайт официальной госструктуры. Мы подобрали референсы и остановились на классическом аккуратном сине-белом варианте. Он напрямую ассоциируется с органами власти и сайтами Госуслуг, ФССП России.

Сделали подсветку кнопок в зависимости от их состояния, добавили акцентный цвет на детали (например, пин на карте), иконки, контроллы. Проработали и собрали UI-кит и подготовили более 100 макетов для сайта и мобильного приложения.

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

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

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

3Разработка: оптимизации сервиса и важные для работы интеграции

— Сократили затраты и оптимизировали работу сервиса. 

Заказчик предлагал разработать сайт, а затем реализовать приложение WebView. Мы предложили ему более удобный и производительный вариант – разработать веб-сервис и мобильное приложение на Flutter. У этого фреймворка высокая производительность, быстрая компиляция и сборка проекта, большой набор UI-компонентов и библиотек, удобная документация.

Сначала разработали приложение, затем пересобрали части кода для веб-версии. Этим сократили финансовые и временные затраты.

— Продумали логику работы поиска задолженностей. 

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

Поиск штрафов в ФССП разграничили для нескольких видов пользователей: физических и юридических лиц, ИП. Физлица могут найти информацию по данным паспорта, СНИЛС или ИНН. Юрлицам нужно ввести ИНН и номер КПП. Индивидуальные предприниматели могу получить данные по номеру ИНН.

Штрафы в ГИБДД можно найти по свидетельству о регистрации транспортного средства или номеру водительского удостоверения.

Найти и проверить задолженности можно также по уникальному идентификатору начислений. Он однозначно определяет сумму и реквизиты платежа в бюджетную систему Российской Федерации.

— Синхронизировали данные и настроили уведомления через технологию веб-сокетов.

Они позволяют установить двустороннюю связь клиента и сервера. Благодаря этому в сервисе в реальном времени отображаются уведомления о действиях или новых штрафах. Авторизированные пользователи видят подсказки при заполнении полей. 

— Настроили безопасную передачу личных данных пользователей.

Информация шифруется через технологию JSON Web Token. В серверных приложениях, в том числе в ФССП, защита данных работает через два токена. Первый, аccess-токен, действует ограниченное время. Это позволяет пройти безопасную идентификацию. Второй, refresh-токен, нужен для обновления access-токена без необходимости повторной аутентификации.

Совместно токены образуют надежную защиту данных от несанкционированного доступа. Так, если оба токена валидны и нет ошибок, пользователь спокойно проходит аутентификацию. Если невалиден access-токен, клиент получает новый. Если невалиден и refresh-токен, в аккаунт или личный кабинет просто нельзя будет зайти без аутентификации.

— Реализовали личный кабинет и административную панель пользователя сервиса. 

В ЛК пользователь может отслеживать историю запросов, информацию о штрафах, контролировать их начисление, проводить оплату, сохранять квитанции. 

Еще одна интересная фича — возможность запросить фотофиксацию нарушения. Так можно убедиться, что штраф начислили не по ошибке, при необходимости сохранить и распечатать кадр.

— Реализовали удобный способ оплаты штрафов внутри сервиса. 

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

— Интегрировали сервис с Яндекс Картами. 

Пользователь может найти внутри приложения нужное ему отделение ФССП по всей России, увидеть адрес и режим работы.

4Тестирование: нашли и исправили баги

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

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

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

Благодаря тестированию выявили и исправили несколько серьезных ошибок еще в начале разработки: баг авторизации, проблемы с токенами безопасности, баги в валидации, ошибку оплаты.

5Публикация в сторах

Еще на этапе аналитики проанализировали требования Apple Store и Google Play. Если этого не сделать сразу, до разработки, можно не учесть важные для модерации требования. Соответственно, приложение рискует лечь в стол, а не выйти в свет к пользователям.

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

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

Результат

Итог работы — полезный продукт, в котором можно контролировать начисление и оплату сразу нескольких штрафов: в ФССП и ГИБДД. В нем можно найти информацию через несколько документов, сохранить ее в личном кабинете, там же оплатить и выгрузить чек. Никаких долгов и штрафов за штрафы!

— Без затрат на продвижение в сторах приложение с декабря 2023 по январь 2024 скачали более 300 человек. Через продукт за этот период провели 49 платежей на 50 000 рублей.

— Всю информацию о штрафах пользователь видит в едином личном кабинете. Там же он может оплатить долг, записаться в ближайшее отделение ФССП, скачать фотографию нарушения, сохранить счет.

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

— В запросах практически нет ошибок благодаря технологии веб-сокетов. Через них же настроили уведомления: пользователи видят обновление данных в реальном времени.

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

Комментарий агентства

Саша Комбаров
Саша Комбаров

Генеральный директор (CEO)

Этот проект непростой с технической точки зрения. Где дело касается личных данных, требуется еще больше ответственности. Команда тщательно проверяла каждое решение, создала свою библиотеку запросов и ответственно отнеслась к задаче. Будем поддерживать и дорабатывать продукт, ближайшие задачи — реализовать авторизацию через Госуслуги и биометрию.

https://фссп.рф

Стек технологий

  • Dart Dart Язык программирования
  • TypeScript TypeScript Язык программирования
  • Next.js Next.js Фреймворк/библиотека
  • Flutter Flutter Фреймворк/библиотека
  • Laravel Laravel Фреймворк/библиотека
  • MySql MySql База данных
  • Figma Figma Графический редактор

Над проектом работали:


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Пиробайт с удовольствием обсудит вашу задачу

Оставить заявку