Редизайн интерфейса и обновление дизайн-системы для Умное ЖКХ

Клиент

Умное ЖКХ — платформа для застройщиков, управляющих компаний, жителей и поставщиков услуг ЖКХ. Платформа объединяет информацию по сфере ЖКХ в рамках одной системы, у каждой категории пользователей — собственники, администраторы и подрядчики — есть свой личный кабинет.

Задача

Мы давно знакомы с командой проекта Умное ЖКХ. После запуска пилота для нескольких управляющих компаний, бэклог продукта начал разрастаться. Вместе с новыми фичами, команда Умного ЖКХ решила обновить визуальную часть. 

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

Подобные задачи мы уже решали ранее: например, разработали интерфейсы для портала недвижимости «ГдеЖК?» и CPA-платформы «Где Слон?», спроектировали интерфейс для сервиса рекламодателей и веб-разработчиков ADVgame. 

Ход работы

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

Вместе с заказчиком выбрали дизайн-систему Google Material. В этой системе есть реализация для frontend-фреймворков, а компонентная база позволяет дизайнеру заниматься проектированием пользовательского опыта и решением конкретных проблем вместо придумывания отдельных ui-элементов. Кроме этого, в Google Material есть готовые базовые паттерны работы с контентом, часть из которых мы также применили. В итоге мы сократили время разработки — это было важно для заказчика.

Так выглядит дизайн-система веб-кабинета

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

На этих сложных с точки зрения структурирования информации экранах мы отработали основные паттерны пользования личным кабинетом: как работают режимы редактирования, как использовать фильтры. Удобная фильтрация на экране заявки крайне востребована из-за большого объема предоставляемой информации и требований к высокой скорости ее нахождения — часто диспетчеру нужно найти информацию по заявке в процессе беседы с собственником. Громоздкая фильтрация в таблице замедляла работу и требовала изменений. Даже в переработанном виде в отдельных фильтрах — 9-10 позиций против 15 и более изначальных. 

Это пример личного кабинета оператора до редизайна и после него. 

Раздел «заявки» до и после

Раздел «новая заявка» до и после

Раздел «персональные счетчики» до и после

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

Фильтры до редизайна и после него

Работа с отдельными страницами

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

Сейчас мы наглядно покажем некоторые страницы интерфейса до и после редизайна. 

Страница «список домов» до и после

Страница «список собственников» до и после

Страница «список уведомлений» до и после

Так происходил процесс разработки таблиц.

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

Ниже можно посмотреть как выглядели настройки шахматки изначально.

Так выглядит шахматка после редизайна. 

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

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

Ограничения

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

Результат

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

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

Затраты по времени

200 часов.