Обновление и улучшение сайта и сервисов Нижегородского Водоканала

Условия работы

  • Период работы с клиентом: декабрь 2018 г. - настоящее время.
  • Начальные условия: до момента обращения у Заказчика был достаточно устаревший ресурс, который не было возможности доработать и дальше поддерживать.
  • Цели: создать понятный и удобный инструмент взаимодействия с клиентами/абонентами.

Начало работы

К концу 2018 года у ОАО «Нижегородский водоканал» — одного из крупнейших предприятий Российской Федерации в области водоснабжения и водоотведения, назрел процесс обновления своего корпоративного интернет-портала. Прошлый сайт к тому моменту морально и функционально устарел, и компания хотела показать своим клиентам/абонентам Водоканал с новой стороны - современной и удобной. С этой задачей они обратились к нам.

Старый сайт Водоканала
Старый сайт Нижегородского Водоканала

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

Организация процесса разработки

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

Новый дизайн

Предыдущий дизайн был весьма консервативен и имел недочеты по юзабилити, ввиду множественных и продолжительных доработок разными специалистами и подрядчиками. Чтобы избавиться от всех этих проблем, мы предложили концепцию, которая отвечала всем
требованиям современного UI/UX-дизайна и позволяла с легкостью находить интересующую их информацию и использовать новые сервисы Водоканала. Новый дизайн создавался с помощью Adobe XD и с учетом будущей адаптивной верстки.

Новый сайт Водоканала, который создали Olprime

Новый сайт Нижегородского Водоканала, созданный командой Olprime

Разработка нового функционала

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

  • vue.js - для ускорения взаимодействия пользователя с сервером;
  • сборщик проектов Gulp - преобразовывал стандартый код ES6 в более старые версии (благодаря этому на старых браузерах отсутствовали проблемы в скриптовой части);
  • GIT - для версионирования кода, нужен чтобы можно было отслеживать изменения файлов и контролировать качество написания кода.

Реализованный функционал

На новом сайте Водоканала были внедрены такие возможности и функции:

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

    2. Страница передачи показаний счётчиков водоснабжения и водоотведения жилых помещений в межрегиональный информационно-расчетный центр ООО «Центр-СБК».

    3. Страница передачи показаний счётчиков водоснабжения и водоотведения нежилых помещений.

    4. Страница со списком проводимых ОАО «Нижегородский водоканал» закупках. На странице реализован фильтр по различным параметрам закупок.

    5. Страница с возможностью сообщить о проблеме/неисправности на сетях холодного водоснабжения и водоотведения. На странице расположена карта, на которой можно отметить место (адрес) проблемы, прикрепить фото и прочую информацию.

Технологии, процесс и сложности при разработке

Портал имеет огромное количество страниц и разделов с разным информационным функционалом. Расскажем подробнее про то, как выглядел процесс реализации функционала на примере страницы с передачей показаний по нежилым помещениям.

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

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

  • Пользователь вводит номер договора. При помощи get-запроса мы получаем прошлые показания и список всех объектов, которые привязаны к этому договору.
  • Пользователь получает список прошлых показаний и предложение ввести новые.
  • Пользователь вводит их и они падают в систему Водоканала (с помощью post-запроса).
  • Если возникают ошибки (например, разность показаний отрицательна), то показания не передаются и пользователю предлагают ввести их еще раз.
При разработке этого функционала возникли две проблемы: 
  • Проблема с кодировкой данных из внутренней системы Водоканала.
  • Также возникла проблема с подсчетом процента отклонения переданного объема - для этого требовалась специальная формула, которую надо было получить в точном виде от Водоканала. Без нее мы не могли до конца реализовать функционал.

Почему государственным и окологосударственным компаниям следует обновлять свои ресурсы?

2 Новый сайт Водоканала, который создали Olprime Главная страница нового сайта Нижегородского Водоканала

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

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!