Интерфейс мобильного приложения Умное ЖКХ

Клиент

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

Задача

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

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

Так выглядит обновленный дизайн мобильного приложения.

Подобные задачи мы уже решали ранее, например, разработали приложения для онлайн-аптеки TabStore и кэшбэк-сервиса Кэшбака.

Ход работы

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

Так выглядело приложение до начала работы.

Кроме текущего интерфейса, мы проанализировали референсы — приложение «ЮИТ+», упрощающее взаимодействие между жильцами, управляющей компанией и подрядчиками.

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

В приоритете у заказчика было пять кейсов:

• оплата
• отправка заявки
• новости
• передача показаний счетчиков
• голосование на собраниях собственников.

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

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

Однако, после первой итерации мы поняли, что система неорганично смотрится на iOS — требовался более универсальный дизайн, без наследия той или иной платформы. Обсудив ситуацию с заказчиком, мы отказались от отсылок к Google Material и отрисовали собственную версию дизайна. Наша команда из двух дизайнеров, лида и миддла, отрисовала четыре концепции и создала UI Kit. В процессе мы также навели порядок в стилистике сайта — поработали над шрифтами и отступами, доступностью и контрастностью.

Вот что у нас получилось в итоге.

Разработка

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

Так происходила разработка экрана входа.

Вот так работали над страницей услуг с большим количеством пунктов.

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

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

До и после

Так приложение выглядело до редизайна и после.

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

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

Пример решения цвета для одной из УК.

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

Также мы осуществляем авторский надзор за разработками заказчика — следим за стилем и UI. Ниже — работа дизайнеров заказчика и наши правки по ней. 

Тестирование

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

Фишка проекта 

Приложение в цветовой палитре «по умолчанию» будет использоваться для демонстрации у небольшой части пользователей. У управляющих компаний есть возможность брендировать приложение, настраивая свою цветовую палитру без отхода от палитры Material. 

Результат

Итог нашей работы над мобильным приложением — обновленный дизайн интерфейса, положительно принятый реальными пользователями.

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

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

130 часов на первую версию.

Что дальше

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

Доступность в веб-разработке — это обеспечение возможности пользоваться продуктом (сайтом, приложением) как можно большему количеству людей, в том числе, людям с особенностями, например, людям с ослабленным зрением. 

На скриншоте ниже, вы можете посмотреть, что все текстовые блоки на макете прошли проверку на контрастность.

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