Единый
расчетный
центр

Системный редизайн ERP ведущего оператора в сфере ЖКХ начислений в Екатеринбурге

Провел юикс-экспертизу и исследование ЦА: интервью и наблюдения. Спроектировал пользовательские сценарии, юзерфлоу и лейаут интерфейса. Собрал быстрые прототипы и провел юикс-тесты. Спроектировал юай-концепцию и стиль, собрал макеты и дизайн-систему. Подготовил спецификации разработчикам

О продукте

ЕРЦ — это комплекс систем, отвечающих за начисления, учет и сопровождение платежей за жилищно-коммунальные услуги

Сервис объединил

  1. Базу данных по биллингу — лицевые счета, приборы учета, начисления, перерасчёты и т. д.

  2. Систему регистрации обращений — фиксирует все запросы и заявления абонентов

  3. Инструменты для управляющих компаний — обмен данными через сервис «ЕРЦ.Инсайд»

Целевая аудитория

  1. Физические лица (жильцы и абоненты) — обращаются за начислениями, перерасчётами, изменением данных, справками

  2. Управляющие компании, ТСЖ, ЖЭУ — передают данные по приборам учета, изменения по жильцам, документы о собственности

  3. Сотрудники ЕРЦ (операторы и технологи) — регистрируют обращения, вносят изменения, ведут базу начислений. Работают с системой через десктопное приложение «КонтурАктив»

Проблематика

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

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

Карточка ЛС, вкладка Начисления

Дискавери

Первым делом мы исследовали десктопное приложение «КонтурАктив». Получили демодоступ, запустили на эмуляторе и прошлись по флоу. Разобраться оказалось непросто

Чтобы понять как это работает мы изучили документацию, ЦА и основные сценарии взаимодействия: понаблюдали за работой сотрудников и взяли интервью

Операторы

Работают с обращениями абонентов. По телефону, в районных отделениях, а также онлайн: в месенджерах и по эл. почте

Технологи

Заводят в систему и обрабатывают данные, поступающие от абонентов, подрядчиков и управляющих компаний

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

Сделали декомпозицию. Фронт работ был огромен. Поделили его на проекты и вместе с заказчиком приоритизировали

Приоритет был отдан операторам, а самый популярный кейс это Регистрация обращения — так как сотни операторов принимают десятки обращений абонентов в день и каждое нужно занести в систему

MVP. На вторую итерацию запланировали Журнал обращений, на третью Карточку ЛС

Понимание задачи

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

Цель

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

Миссия

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

Критерии успеха

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

Аудитория

Операторы колл-центров, районных отделений и онлайн-поддержки, которые работают с обращениями абонентов

Сценарии

Оператор должен регистрировать в системе все обращения абонентов. Он указывает причину обращения и решение, может вносить изменения в ЛС и принимать от абонента документы

Форма регистрации обращения

Регистрация обращения

Регистрируется обращение через отдельную форму. Изучая продукт мы узнали что в 80% случаев абоненты обращаются за разъяснением по начислениям, а оператор дает им устный ответ

В итоге оператору нужно указать тему, причину и решение, а остальные поля, кнопки и скрытые за ними модалки ему 80% времени не нужны, а что-то вообще можно спрятать под капот

Оставшиеся 20% обращений это внесение изменений в ЛС: заменить приборы учета, передать показания счетчиков, прописать жильца, или совсем закрыть лицевой счет

80%
20%
Тип обращения
Устный ответ
Заявление
Когда используется
Вопросы, которые можно решить сразу: тарифы, нормативы, сумма к оплате, справка о задолженности и др.
Нужно внести изменения в лицевой счёт: замена приборов учета, передача показаний, регистрация жильца, закрытие ЛС
Действия оператора
Регистрирует обращение
Выбирает тему/причину
Указывает решение «Устный ответ»
Обращение создано
Регистрирует обращение
Вносит изменения в ЛС
Печатает заявление
Отдаёт абоненту на подпись
Сканирует заявление и документы, прикладывает к обращению
Обращение создано
Результат
Абонент получает устный ответ, обращение фиксируется в системе и попадает в историю
Изменения внесены и официально зафиксированы, документы сохранены в системе

У сотрудников разный набор компетенций в зависимости от точки контакта. Операторы колл-центра могут дать только устный ответ. Внести изменения в ЛС можно только в районном отделении

Если оператор не справляется с обращением абонента он переадресовывает его в другой департамент с целью дальнейшей обработки

Точка контакта
Колл-центр
Районное отделение
Онлайн
Устный ответ
Письменный ответ
Заявление
Документы
Переадресация

Внесение изменений в ЛС

Получив методички для сотрудников мы стали изучать и документировать эти сценарии. Работы предстояло много. Нужно было спроектировать 27 сценариев внесения изменений в ЛС

Мы сегментировали их на 2 уровня

Простые
Состоят из формы и нескольких полей. Например: передача показаний ПУ; изменения площади жилья

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

Проектирование

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

erc.ru

Лейаут

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

Решение
Операторы работают в основном с клавиатуры. Еще в первых исследованиях мы подметили эту особенность. Мы сформулировали концепцию и спроектировали гибкий лейаут, отлично адаптированный под клавиатуру

Лэйаут гибко настраивается. Он делится на 2, 3 или 4 модуля в зависимости от сложности сценария и количества элементов, требующихся для его решения
Перемещаться между модулями можно стрелками влево и вправо на клавиатуре
Стрелками вверх и вниз, между элементами модуля
Для каждого действия предусмотрен шорткат

Создание 
обращения

Гипотеза
Если сократить объём информации на экране и разбить флоу на этапы и конкретные действия, это позволит удержать фокус в рамках видимой области экрана, отказаться от скролла, что снизит когнитивную нагрузку на пользователя и упростить работу

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

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

Флоу создания обращения
erc.ru
Создание обращения начинается с поиска абонента

Карточка 
обращения

Гипотеза
Если добавить во флоу регистрации обращения выбор дополнительной темы, это ускорит работу оператора, так как ему не нужно будет регистрировать каждую причину отдельно

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

erc.ru
Карточка создания обращения заполненная темами

Бланк заявления

Гипотеза
Если оператор сможет вносить изменения в ЛС не отвлекаясь от регистрации обращения, а прямо в процессе, это снизит когнитивную нагрузку, позволит не терять контекст и ускорит работу с обращением

Решение
Задача непростая. Сценариев внесения изменений много. Под каждый мы спроектировали свой шаблон заявления. Часто это отдельный разветвленный флоу. Всего 27 сценариев

Флоу регистрации темы обращения. На примере кейса замены приборов учета
erc.ru
Бланк заявления. В данном кейсе заполнен данными приборов учета

Документы

Гипотеза
Если добавить интерфейс портативного сканера во флоу регистрации обращения, оператор не будет отвлекаться на другие вкладки и сервисы, что позволит не терять контекст и ускорит работу с обращением

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

erc.ru
Интерфейс подсказывает, какие документы нужно приложить к обращению

Дизайн-стандарты

Мы выяснили что большинство доп. сценариев пересекаются. Из простых (например, передача показаний) складываются более сложные (например, закрытие ЛС). Мы использовали атомарный подход, стандартизировали большую часть организмов и собрали конструктор. С его помощью удалось ускорить дальнейшую работу над hi-fi макетами, сделать их консистентнее и подключить второго дизайнера без потери качества

Визуальная концепция

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

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

Юикс-тесты

В процессе проектирования у нас было несколько итераций низкоуровневого прототипирования и тестирования на ЦА. Получая фитбек мы вносили изменения и снова тестировали. Прежде чем перейти к высокоуровневым макетам, концепция будущего интерфейса поменялась 2 раза. К сожалению у нас нет метрик, насколько быстрее пользователь решает задачу с помощью нового интерфейса, но качественные показатели говорят что прогресс есть

Результат

Спроектировали вход в систему, поиск ЛС, флоу создания обращения, флоу загрузки и сканирования документов, 27 сценариев внесения изменений в ЛС. Собрали прототипы и спецификации и передали в разработку

Что дальше

А дальше в работу ушел следующий проект: Журнал обращений

Юикс-экспертиза и поиск проблем

Исследование ЦА: интервью и наблюдения

Проектирование сценариев и юзерфлоу

Проектирование нестандартного лейаута заточенного под клавиатуру

Низкоуровневое проектирование и гипотезы

Юикс-тесты

Разработка юай-концепции и стиля

Высокоуровневое проектирование

Разработка дизайн-системы

Подготовка спецификаций разработчикам

Моя роль

Старший дизайнер (я)

Арт-директор

Проджект-менеджер

Младший дизайнер

Разработчики на стороне клиента

Команда