WRW Energy: Платформа
подключения для поставщика природного газа
Отрасль
Энергетика
Розничная продажа коммунальных услуг
Услуги
UX/UI-дизайн
Фронтенд-разработка
Бэкенд-автоматизация
Сайт
wrw.energyОбзор
WRW Energy предлагает клиентам Enbridge Ohio Gas фиксированные тарифные планы на природный газ. На старте проекта у компании была статичная HTML-страница — без формы подключения, без сравнения тарифов, без какого-либо пути к конверсии. Весь бизнес держался на целевом трафике с агрегаторов и партнерских платформ. Нас привлекли, чтобы спроектировать и построить полноценную платформу подключения с нуля — за четыре недели.
Задача
Аудитория приходит уже готовой к подключению, но сайт не давал ей никакого четкого пути вперед. При этом подключение требует конфиденциальных данных из коммунального счета — в частности, 13-значного номера аккаунта, которого у большинства пользователей нет под рукой.The audience arrives ready to enroll, but the existing site offered no clear path forward. Enrollment requires sensitive utility data — like a 13-digit account number — that users rarely have at hand.
Задача была очевидна: создать специализированную цифровую платформу, которая превращает входящий трафик в завершенные заявки — быстро, без лишних шагов и в соответствии со всеми требованиями.
Решение
Мы переработали wrw.energy в единый инструмент подключения. Главная страница открывается сразу с карточками тарифов и ценами. Форма подключения использует маски полей, валидацию в реальном времени и контекстные подсказки по счету — чтобы пользователь не бросил заполнение на полпути. После отправки система автоматически генерирует PDF-соглашение, отправляет его на почту и передает данные провайдеру. Все это поддерживается легкой административной панелью, которой команда управляет самостоятельно.
Задача
1. Целевой трафик требует мгновенной ясности
Аудитория WRW приходит с уже сформировавшимся намерением. Любая задержка с отображением тарифов или лишний навигационный слой напрямую бьют по конверсии. Главная страница должна была стать первым шагом воронки — а не презентационным буклетом.
2. Подключение требует конфиденциальных и труднодоступных данных
Чтобы подключиться, клиент должен указать 13-значный номер аккаунта Enbridge и адрес обслуживания точно так, как они написаны в счете, — информацию, которую большинство людей не помнит наизусть. Без подсказки в нужный момент отказы неизбежны.
3. Энергетический договор должен вызывать доверие
Договор на поставку газа — не импульсная покупка. Интерфейс должен был транслировать надежность, профессионализм и соответствие требованиям, не перегружая страницу юридическими текстами и рекламными заявлениями. Доверие должно считываться из структуры, а не из слов.
4. Бэкенд должен оставаться простым и удобным в поддержке
У WRW не было ни CMS, ни какой-либо технической инфраструктуры. Система должна была включать легкую административную панель для управления тарифами, автоматическую генерацию PDF-соглашений и надежную доставку по электронной почте — без сложных интеграций и постоянного технического сопровождения.
5. Документы требовали двустороннего процесса
Подключение не заканчивается отправкой формы. Каждый новый клиент требует официального соглашения — документа, который формирует поставщик, а пользователь просматривает и подтверждает. Управление этим процессом — от автоматической генерации до доставки и подтверждения — добавляло операционную сложность, которую нужно было встроить прямо в платформу.
Решение
Мы переработали wrw.energy с нуля как единый инструмент подключения. Каждое дизайнерское и техническое решение исходило из одного принципа: выбор тарифа — мгновенный, процесс подключения — без барьеров.
Главная страница как воронка
Вместо традиционной многосекционной главной страницы мы спроектировали пространство выше линии сгиба вокруг одного действия.
Позиционирующее утверждение, квалификатор аудитории («Для клиентов Enbridge Ohio Gas») и четыре карточки тарифов видны сразу при загрузке. Первое взаимодействие пользователя — это выбор, а не знакомство с контентом.
Сравнение тарифов без лишнего
Каждая из четырех карточек — 12-месячная, 24-месячная, 36-месячная и помесячная — показывает срок действия, текущую ставку и кнопку подключения. Ссылка «Просмотреть соглашение» открывает полные условия обслуживания в PDF в новой вкладке — пользователь может изучить их до принятия каких-либо обязательств.
Макет визуально сбалансирован и полностью адаптивен: на мобильных устройствах карточки выстраиваются в столбец без потери иерархии.
Форма подключения с точной валидацией
После выбора тарифа пользователь переходит к структурированной форме. Каждое поле здесь операционно необходимо.
- Номер аккаунта маскируется под формат Enbridge и проверяется на 13 цифр, включая ведущие нули.
- Телефон маскируется под формат США.
- Email проходит валидацию формата в реальном времени.
- Поле «Штат» предзаполнено значением Ohio и заблокировано — исключена возможная ошибка.
- Кнопка отправки остается неактивной, пока не заполнены все обязательные поля и не принято Соглашение об условиях обслуживания. Это исключает неполные и некорректные заявки.
Опциональное поле налоговой льготы корректирует формат CSV, передаваемого провайдеру. Подсказка по иконке «?» объясняет поле простым языком: «Если вы освобождены от уплаты налогов, укажите процент льготы.»
Контекстные подсказки по счету
Четыре поля — Имя владельца аккаунта, Номер аккаунта, Адрес и Годовой объем потребления — содержат кнопку «?», открывающую модальное окно с аннотированным скриншотом счета Enbridge, где нужное поле выделено.
Это решение устраняет главный риск отказа: пользователь не знает, где найти нужные данные. Вместо того чтобы отправлять его в FAQ или раздел помощи, ответ появляется именно там, где возникает вопрос.
Автоматическая генерация и доставка соглашения
После отправки формы система генерирует заполненное PDF-соглашение с данными пользователя. Поля документа заполняются точно: имя владельца аккаунта, адрес обслуживания, выбранный срок, применимая ставка, даты начала и окончания.
Логика даты начала учитывает буфер не менее одного месяца вперед — с дополнительным сдвигом, если заявка подана 10-го числа или позже. Это исключает соглашения с невозможной или операционно некорректной датой. Для помесячных договоров дата окончания указывается как «действует до отмены любой из сторон».
Готовое соглашение мгновенно уходит клиенту на почту, внутренние адреса команды WRW — в копии. Письмо простое, профессиональное и по делу: без допродаж и маркетинга.
Легкая административная панель
Мы создали минималистичную внутреннюю административную панель защищенный вход, единый интерфейс с четырьмя полями ставок, кнопка сохранения и выход. Команда WRW обновляет цены самостоятельно, в любое время, без участия разработчиков.
Процесс
До начала проектирования мы полностью прописали путь пользователя: источник перехода → главная страница → выбор тарифа → форма подключения → автоматическая обработка → подтверждение. На этой карте мы определили точные моменты, где вероятен отказ: неопределенность с требованиями, затруднения с данными из счета, колебания при заполнении формы, непонимание следующих шагов после отправки.
Каждый выявленный риск стал дизайнерским решением. Модальные подсказки по счету, маски полей, предзаполненный штат и заблокированная кнопка отправки — не декоративные элементы. Это ответы на конкретные точки сбоя в процессе подключения.
Результат
WRW Energy перешла от сайта-заглушки к структурированной, работающей платформе подключения. Финальный продукт выстроен вокруг выбора тарифа, устраняет барьеры в каждой выявленной точке отказа, помогает пользователям с вводом конфиденциальных данных в нужный момент и автоматически закрывает весь постотправочный процесс: генерацию PDF, передачу данных и отправку на почту.
Сайт теперь делает именно то, чего требует бизнес-модель: принимает целевой трафик и превращает его в завершенные заявки — просто и надежно.
Каждое дизайнерское решение отвечало конкретному риску конверсии, который мы выявили в процессе подключения.
Артем Довгопол, разработчик и тимлид
