Кейс · 2021–2022
Личный кабинет для контроля электроэнергии
Я адаптировал наработки корпоративной энергетической платформы для клиентов: спроектировал связанные веб- и iOS-сценарии, уточнил интерфейс на ранних проверках и создал визуальный стиль продукта.
Контекст
От B2B-платформы к личному кабинету
У команды уже были наработки корпоративной платформы для энергетики. Когда продукт начали развивать в сторону личного кабинета, изменился адресат: вместо профессиональных участников рынка интерфейсом должны были пользоваться клиенты компании.
Пользователю важно быстро увидеть показания, понять динамику потребления и найти документы или оплату. Я участвовал в подготовке пользовательских историй вместе с Product Manager, подготовил прототипы и спроектировал интерфейсы обеих платформ. Он определял концепцию продукта и согласовывал UX; визуальный стиль и часть интерфейсных решений я проектировал самостоятельно.
Проверка решений
Гипотеза → прототипы → изменения
Мы исходили из того, что пользователю нужны наглядные показания и состояния устройств. После предварительного опроса я подготовил прототипы и проверял, удаётся ли пройти сценарий и найти нужную информацию без лишних вопросов.
Сотрудники компании, не связанные с продуктом, проходили сценарии в роли конечных пользователей. В «коридорках» обычно участвовали 2–3 человека.
По обратной связи команда сделала расположение элементов более привычным, пересмотрела палитру, размер шрифтов при высокой плотности данных, иконки и обозначения.
В iOS мы уточнили приоритет показаний, графиков и состояний устройств: они стали заметнее второстепенной информации.
Проверки помогли уточнить расположение элементов, подписи и визуальные акценты, но не подтверждают потребности всех клиентов. Полноценное тестирование планировалось после релиза.
Решение
Одна система · два контекста
Веб-кабинет собирал полную информацию об объектах, показаниях, статистике, финансах и документах. В iOS на первом экране были основные данные и уведомления.
Клиент видит текущие показания и состояние устройства. В сценарии предусматривалась ручная передача данных и возможность получать их со счётчика автоматически.
Веб: подробности по объекту; iOS: главное на первом экране
История и графики помогают оценить потребление во времени. Веб даёт больше деталей; мобильный экран оставляет короткий путь к ключевому графику.
Веб: таблицы и статистика; iOS: компактная динамика
Документы и платёжные сценарии связаны с объектом пользователя. Веб раскрывает полный состав информации, а iOS даёт доступ к основным документам в пути.
Веб: финансы и документы; iOS: квитанция под рукой
Итог
Результат и рефлексия
Я разработал UI, айдентику, логотип и маскота для личного кабинета. Дополнял набор системных иконок кастомными. Иллюстрации использовал стоковые.
Организованного тестирования готового приложения при мне не проводилось, только проверка сборки. Данных о влиянии на продуктовые показатели нет.
Что изменил бы сегодняПересмотрел бы визуальный стиль, разбил длинные формы на шаги и сильнее выделил показания и состояния устройств.