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

Клиент

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

Задача

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

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

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

Обновленное приложение


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

Ход работы

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

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

старое приложение Умное ЖКХ


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

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

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

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

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

Референсы


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

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

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

Кнопки в UI KIT
Инпуты в UI KIT
Переключатели и чек-боксы в UI KIT

Разработка

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

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

Разработка экрана входа


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

Каталог услуг в разработке
Каталог услуг в итоговом виде

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

Модалки


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

До и после

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

arrow-compare-left.svg arrow-compare-right.svg

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

Цвет и текст

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

Палитра бренда

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


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

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

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

Авторский надзор. Главный экран
Авторский надзор. Страница «Услуги»
Авторский надзор. Страница «Новости»

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

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

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

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

Результат

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

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

Готовое приложение

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

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

Что дальше

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

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

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

Работа с контрастностью

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

Работа над доступностью

 

Команда проекта

  • Всеволод

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

  • Динара

    Дизайнер

  • Артём

    Главный дизайнер

  • Анатолий

    Менеджер со стороны клиента

Смотреть следующий проект

Давайте обсудим ваш проект

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания Google, Политика kokoc.tech