Камчатскэнерго – Сделано в Реактиве

Разработка личного кабинетаэнергетической компании

Теги:

Клиент

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

Проблема

Работа с личным кабинетом вызывает трудности как у заказчиков услуг, так и у менеджеров «Камчатскэнерго». Из-за сложной структуры сервиса пользователи не могут верно определить, какую услугу хотят получить и где искать ответы на вопросы. А из-за плохо настроенных интеграций сотрудники «Камчатскэнерго» тратят много времени на обработку входящих заявок.

Задачи

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

разработать удобный пользовательский интерфейс
проработать логику регистрации и все сценарии подачи заявок с учётом бизнес-процесса
настроить интеграции с внутренними и внешними системами

Как мы работали

Аналитика и проектирование

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

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

На стадии проектирования продумали структуру личного кабинета. Определили, какие данные должны быть размещены на страницах и как их можно связать друг с другом. Затем выбрали оптимальное расположение блоков и разработали прототипы всех страниц.

Дизайн

Дизайн нового личного кабинета разработали в фирменных оранжево-синих цветах «Камчатскэнерго». На главной странице при переключении между типами присоединения блок «Электросети» отрисовали в синей цветовой гамме, которая вызывает ассоциации с электричеством; а «Теплосети» — в оранжевой, подходящей для визуализации тепловой энергии.

Мы использовали лаконичный стиль, ведь основная задача — сделать интерфейс личного кабинета интуитивно понятным. Например, кнопка «Подать заявку на присоединение» — главная на стартовой странице, поэтому её сделали яркой и заметной, но не выбивающейся из контекста.

Разработка

На этом этапе было важно учесть, что все входящие заявки должны попадать в 1C, а для управления контентом на сайте нужно подключить 1С-Битрикс. Из Битрикса мы взяли только админку, а бизнес-логику (интеграция с 1С, предоставление API для фронтенд-части) реализовали на Symfony. Такое решение позволяет гибко и легко масштабировать и вносить изменения в проект.

Публичную часть реализовали с помощью фреймворка SvelteKit и TypeScript. SvelteKit обеспечивает простоту и эффективность разработки компонентов пользовательского интерфейса, а TypeScript — позволяет писать более надёжный, расширяемый и поддерживаемый код.

Для бэкенда выбрали API Platform и, соответственно, Symfony. API Platform обеспечивает создание RESTful API с помощью декораторов и инструментов для автоматической генерации документации и тестирования API. Symfony — предоставляет готовые компоненты и инструменты для разработки.

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

Решение

До авторизации в личном кабинете пользователям доступны только некоторые разделы, например, калькулятор расчёта стоимости по присоединению к тепло — или электросетям. Он позволяет создать предварительный оценочный расчёт стоимости услуги с учётом потребностей потребителя и типом технологического присоединения. Математика расчётов хранится в 1С, а в личном кабинете размещается входная форма и выводятся результаты расчётов.

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

В момент регистрации в личном кабинете мы предусмотрели проверку индивидуальных предпринимателей и юридических лиц по ИНН, чтобы подтвердить его действительность на момент подачи заявки. Сделали это с помощью API-ФНС — предназначен для интеграции базы данных ФНС в любые информационные системы.

Предусмотрели функциональность обмена сообщениями с менеджерами «Камчатскэнерго» в двух видах: можно задать вопрос в чате личного кабинета, а можно — в чате конкретной заявки на подключение. Сообщения от заявителя по интеграции уходят в 1С, где распределяются между ответственными сотрудниками.

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

Для этого мы настроили интеграцию с банком-эквайером. Пользователь нажимает кнопку «Оплатить», и сайт направляет запрос в банк, который проверяет возможность совершения покупки. При удовлетворении запроса заявитель оплачивает счёт. Причём есть два варианта — оплатить его целиком или разбить на несколько платежей.

Результат

Благодаря правильно настроенной интеграции с другими системами новый личный кабинет «Камчатскэнерго» частично автоматизировал и сократил время обработки входящих заявок. А удобный интерфейс способствует лояльности пользователей.