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

Цифры проекта

Старт проекта — январь 2022
Срок проекта — 2 месяца
Часы на реализацию — 140 часов

О клиенте

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

Постановка задачи

В январе 2022 продуктовая команда «Умного ЖКХ» приступила к редизайну веб-приложения жильца. Наша задача — адаптировать дизайн мобильного приложения к десктопному виду, используя UI Kit, над которым мы раньше работали.

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

Почему такая задача это челлендж

Представьте, что к вам прилетает готовый UI Kit, разработанный под мобильное приложение. И задача состоит в том, чтобы сделать из него веб-приложение для десктопа.

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

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

Если вы евангелист подхода mobile first, то это идеальная задача для проверки вашего скилла.

Ищем раскладку главного экрана

Мы начали проект с разработки вайрфрейма главной страницы. Это самая трудоемкая и ответственная задача. Раскладка главной задает сетку остальным страницам. После нескольких подходов мы определились с раскладкой и виджетами на главной. А детальные сценарии решили прорабатывать уже в дизайне.

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

А что если пойти в сторону аналитического дашборда? Нет — слишком сложно.

Ребята, у нас тут нарушение логики! Пока вайрфрейм получается несогласованным =(

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

Приступаем к дизайну

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

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

Первый вариант. Применяем стили к блокам. Собираем список проблем.

Тестиуем варианты расстановки блоков основной контентной части.

Финальный вариант. Расставили акценты, убрали шумные плашки.

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

Финальная версия страницы квартиры в Веб-приложении Умное ЖКХ

Трудности адаптации. Приборы учета

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

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

Как выглядела страница приборов учета до редизайна.

Первый вариант. Все основные стили уже взяли из UI Kit.

Финальный вариант. Добавили навигацию в шапку страницы, основную кнопку перенесли под контент.

Больше услуг

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

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

Выбрали наиболее универсальный вариант для каталога и обложки услуги.

Примеряем категории услуг в вайрфрейм.

Страница со списком услуг категории.

На странице услуги оционально реализовываем форму заказа.

Архив, просмотр квитанций, голосования

В мобильном приложении не было таблиц, поэтому списки элементов мы разрабатывали заново.

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

Голосования — важная функция для многих управляющий компаний.

Адаптируем дизайн квитанций из мобильного приложения к десктопу.

Один из экранов в сценарии оплаты квитанций.

Расширяем дизайн гайдлайна для Управляющих компаний

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

В итоге задачи по брендированию занимали всего по паре часов для каждой управляющей.

Результаты

Мы отрисовали основные экраны, сделали брендирование и построили воркфлоу еще для одного продукта из экосистемы «Умное ЖКХ». Сейчас проект на паузе — ждем реализации отрисованного функционала, чтобы провести авторский надзор.

Подробнее об обновлении платформы на сайте клиента