Photoshop
UI-дизайн

Портал ЖКХ

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

Контекст

Портал ЖКХ это сервис для жителей Иркутска, который позволяет всё общение со службами ЖКХ вести онлайн, начиная от подачи показаний счётчиков и заканчивая вызовом мастера. Сейчас у продукта 100 000+ пользователей, он доступен на Web, iOS и Android.

Задача

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

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

Решение

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

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

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

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

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

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

Команда

Менеджеры проекта:

  • Марина Раковская
  • Филипп Кононов