личный кабинет для utility-сценариев. / 2025
Энергокабинет
Личный кабинет, где частые действия вынесены вперед: оплата, показания и важный статус не должны теряться среди справочных разделов. Пользователь приходит в такой продукт не изучать интерфейс. Чаще всего у него есть одна задача: оплатить, передать показания, проверить состояние счета, найти документ. Если эти действия спрятаны в общей навигационной массе, кабинет начинает ощущаться тяжелее, чем сама задача. Этот кейс лучше держать компактным: он не про большую трансформацию, а про ясную информационную архитектуру массового сервиса.
Моя роль
структура разделов, сценарии оплаты и передачи показаний, desktop/mobile responsibility split.
SOURCE/REDACTED
DESKTOP/MOBILE UTILITY CABINET SOURCE SHOTS; ОСНОВНЫЕ КАНДИДАТЫ site/public/case-media/energy-cabinet/source/redacted/figma-4-96216-energy-desktop-redacted.png И site/public/case-media/energy-cabinet/source/redacted/figma-4-96378-energy-mobile-redacted.png
Граница публикации
Публично можно говорить про utility cabinet task flow, redacted desktop/mobile screens, payment, meter reading and status/history. Нельзя заявлять support reduction, payment conversion, fewer errors or client name without approval.
Визуальные материалы
ImageGen используется для JTBD/task maps, urgent-vs-reference IA, meter flow, desktop/mobile split and source boundary cards. Реальные desktop/mobile screens показывать только как SOURCE/REDACTED.
Коротко
Коротко
Продукт: личный кабинет для utility-сценариев.
Роль: структура разделов, сценарии оплаты и передачи показаний, desktop/mobile responsibility split.
Фокус: частые действия, справочный слой, предупреждения в вводе показаний, разные задачи desktop и mobile.
Публичное доказательство: redacted source shots, task layer map, meter reading flow, desktop/mobile split.
Граница результата: не писать про снижение нагрузки на поддержку, рост оплат, сокращение ошибок или client name без approval.
Глава 02
Рабочая ситуация
Личный кабинет такого класса обслуживает разные задачи: регулярная оплата, показания, начисления, история, документы, настройки, обращения. Но в момент входа пользователя эти разделы не равны.
Кто-то заходит на desktop, чтобы посмотреть историю и документы. Кто-то на mobile, чтобы быстро отправить показания или проверить статус. Если интерфейс не различает эти режимы, простое действие превращается в поиск.
IMAGEGEN-АРТЕФАКТ
JTBD-КАРТА ЭНЕРГОКАБИНЕТА; РОЛЬ "ПОЛЬЗОВАТЕЛЬ"; СИТУАЦИИ "ОПЛАТИТЬ", "ПЕРЕДАТЬ ПОКАЗАНИЯ", "ПРОВЕРИТЬ НАЧИСЛЕНИЯ", "НАЙТИ ДОКУМЕНТ"; ДЛЯ КАЖДОЙ - JOB, НУЖНОЕ СОСТОЯНИЕ, СЛЕДУЮЩИЙ ШАГ
Глава 03
Что нужно было решить
Задача была не в том, чтобы показать все возможности кабинета сразу. Нужно было отделить частые действия от справочного слоя и сделать так, чтобы пользователь быстрее находил свой текущий job.
Я разложил кабинет на два режима:
- Быстро закрыть задачу: оплатить, передать показания, проверить важный статус.
- Разобраться в информации: история, документы, настройки, обращения.
IMAGEGEN-АРТЕФАКТ
TASK TREE; "ВХОД В КАБИНЕТ" -> "СРОЧНАЯ ЗАДАЧА" ИЛИ "СПРАВОЧНАЯ ЗАДАЧА"; СРОЧНАЯ ВЕТКА: ОПЛАТА, ПОКАЗАНИЯ, СТАТУС; СПРАВОЧНАЯ ВЕТКА: ИСТОРИЯ, ДОКУМЕНТЫ, НАСТРОЙКИ, ОБРАЩЕНИЯ
Глава 04
Моя роль
Я работал над структурой кабинета и ключевыми сценариями: как вывести частые действия ближе к первому уровню, как не потерять справочные разделы и как разделить ответственность desktop и mobile.
В этом кейсе важно не преувеличивать результат. Сила работы в том, что повторяющиеся задачи получили более понятное место в интерфейсе.
IMAGEGEN-АРТЕФАКТ
ROLE/JOB BOARD; СЛЕВА "ПОЛЬЗОВАТЕЛЬ ПРИШЕЛ С ЗАДАЧЕЙ", ПО ЦЕНТРУ "ОПЛАТА / ПОКАЗАНИЯ / СТАТУС / ДОКУМЕНТЫ", СПРАВА "ЗАДАЧА ЗАКРЫТА ИЛИ ПЕРЕХОД В СПРАВОЧНЫЙ СЛОЙ"
Глава 05
Что должно быть видно в кейсе
Кейс должен показывать не "редизайн кабинета", а task-first логику.
Минимальный набор:
- Redacted desktop/mobile screenshots.
- JTBD-карта частых задач.
- Схема быстрых действий и справочного слоя.
- Flow передачи показаний с warning state.
- Desktop/mobile split.
- Source/result boundary.
IMAGEGEN-АРТЕФАКТ
КАРТА ВИЗУАЛЬНОГО СОСТАВА ЭНЕРГОКАБИНЕТА; ГРУППЫ "SOURCE SHOTS", "JTBD", "TASK LAYER", "METER FLOW", "DESKTOP/MOBILE", "SOURCE BOUNDARY"
Глава 06
Что я проверял дизайном
Главная идея: пользователь должен закрыть повторяющуюся задачу без изучения всего кабинета.
Я проверял это через несколько решений:
- оплата должна быть действием первого уровня;
- передача показаний должна быть коротким flow с понятной проверкой;
- важный статус должен быть виден без поиска;
- справочные разделы не должны мешать быстрым задачам;
- desktop и mobile могут решать разные части одной системы.
IMAGEGEN-АРТЕФАКТ
ПЯТЬ РАБОЧИХ ГИПОТЕЗ; "ОПЛАТА ПЕРВЫМ СЛОЕМ", "КОРОТКИЙ METER FLOW", "ВИДИМЫЙ СТАТУС", "СПРАВКА НИЖЕ", "MOBILE TASK-FIRST / DESKTOP OVERVIEW"
Глава 07
Как я разложил сценарий
Публичный путь лучше показывать через короткое завершение задачи:
- Пользователь входит с конкретной задачей.
- Видит быстрые действия.
- Выполняет оплату или передачу показаний.
- Получает предупреждение, если значение выглядит необычно.
- Уходит в историю или документы только если это нужно.
IMAGEGEN-АРТЕФАКТ
USER FLOW ENERGY TASK; ВХОД -> БЫСТРЫЕ ДЕЙСТВИЯ -> ОПЛАТА/ПОКАЗАНИЯ -> WARNING/CONFIRMATION -> ИСТОРИЯ/ДОКУМЕНТЫ ПО ТРЕБОВАНИЮ
Глава 08
Решение 1. Быстрые действия отдельно от справочного слоя
Оплата, передача показаний и проверка состояния должны быть видны как действия, а не как пункты, которые пользователь ищет в меню.
Я разделил кабинет на два слоя: первый отвечает за частые действия и актуальное состояние, второй - за историю, документы, настройки и дополнительные сведения.
IMAGEGEN-АРТЕФАКТ
TASK LAYER MAP; ВЕРХНИЙ СЛОЙ "ОПЛАТИТЬ", "ПЕРЕДАТЬ ПОКАЗАНИЯ", "ПРОВЕРИТЬ НАЧИСЛЕНИЯ", "ВАЖНОЕ УВЕДОМЛЕНИЕ"; НИЖНИЙ СЛОЙ "ИСТОРИЯ", "ДОКУМЕНТЫ", "НАСТРОЙКИ", "ОБРАЩЕНИЯ"; СТРЕЛКИ ОТ ВХОДА К TOP ACTIONS
SOURCE/REDACTED
DESKTOP OVERVIEW CROP, ЕСЛИ ВИДНЫ ТОЛЬКО ОБЕЗЛИЧЕННЫЕ РАЗДЕЛЫ И СТАТУСЫ
Глава 09
Решение 2. Передача показаний
Передача показаний - маленький, но чувствительный сценарий. Пользователь вводит число, система проверяет значение, показывает предупреждение при необычном вводе и дает возможность исправить ошибку до отправки.
Здесь важна не сложность формы, а ясность состояния: что вводится, почему появилось предупреждение, что произойдет после подтверждения.
IMAGEGEN-АРТЕФАКТ
METER READING FLOW; ТРИ MOBILE FRAMES "ВЫБОР ЛИЦЕВОГО СЧЕТА", "ВВОД ПОКАЗАНИЙ", "ПРОВЕРКА ЗНАЧЕНИЯ"; ТРЕТИЙ FRAME С WARNING STATE И CLEAR CORRECTION ACTION; ЭТО СХЕМА FLOW, НЕ FAKE UI
SOURCE/REDACTED
site/public/case-media/energy-cabinet/source/redacted/figma-4-286013-meter-warning-mobile-redacted.png КАК РЕАЛЬНЫЙ SOURCE CROP
Глава 10
Решение 3. Desktop и mobile
Desktop лучше держит обзор: историю, документы, настройки, несколько счетов и более плотные данные. Mobile должен быстрее закрывать короткие повторяющиеся действия.
Такое разделение помогает не пытаться уместить весь кабинет одинаково в каждом формате.
IMAGEGEN-АРТЕФАКТ
DESKTOP/MOBILE SPLIT; СЛЕВА DESKTOP "ОБЗОР", "ИСТОРИЯ", "ДОКУМЕНТЫ", "НАСТРОЙКИ"; СПРАВА MOBILE "ОПЛАТА", "ПОКАЗАНИЯ", "СТАТУС"; СТРЕЛКИ ПОКАЗЫВАЮТ DESKTOP OVERVIEW-FIRST И MOBILE TASK-FIRST
SOURCE/REDACTED
SIDE-BY-SIDE REDACTED DESKTOP/MOBILE SOURCE SHOTS, ЕСЛИ ОБА CROP БЕЗ CLIENT/NDA DETAILS
Глава 11
Итоговый путь пользователя
Финальный артефакт должен показывать, что пользователь не изучает кабинет, а идет по короткому пути к задаче.
IMAGEGEN-АРТЕФАКТ
WHOLE-PATH BOARD ENERGY; "ВОШЕЛ С ЗАДАЧЕЙ" -> "УВИДЕЛ БЫСТРЫЕ ДЕЙСТВИЯ" -> "ВЫПОЛНИЛ ОПЛАТУ/ПОКАЗАНИЯ" -> "ПРОВЕРИЛ СТАТУС" -> "УШЕЛ В ИСТОРИЮ ТОЛЬКО ЕСЛИ НУЖНО"
Глава 12
Что изменилось
Кабинет стал читаться как набор понятных задач, а не как общая сервисная витрина. Частые действия вынесены ближе к первому уровню, а справочный слой не мешает оплате, показаниям и проверке начислений.
Публично это supporting case. Его сила - в аккуратной задаче и реальных redacted screenshots, а не в неподтвержденных метриках.
IMAGEGEN-АРТЕФАКТ
МАТРИЦА "РЕШЕНИЕ -> ЧТО СТАЛО ПОНЯТНЕЕ"; БЫСТРЫЕ ДЕЙСТВИЯ -> ЧТО ДЕЛАТЬ СЕЙЧАС, METER FLOW -> ГДЕ ОШИБКА, DESKTOP -> ГДЕ ИСТОРИЯ, MOBILE -> КАК ЗАКРЫТЬ ЗАДАЧУ, SOURCE BOUNDARY -> ЧТО МОЖНО ПОКАЗАТЬ
Глава 13
Что не показываю публично
Я не называю клиента без отдельного approval и не заявляю снижение нагрузки на поддержку, рост оплат или сокращение ошибок. Все реальные screenshots должны быть redacted; generated artifacts - только как объясняющие схемы.
IMAGEGEN-АРТЕФАКТ
SOURCE BOUNDARY CARD; КОЛОНКИ "REDACTED SOURCE SHOTS", "PRIVATE CLIENT DETAILS", "IMAGEGEN TASK MAP", "NO HARD OUTCOMES"
Глава 14
Финальная формулировка для кейса
Получился более понятный кабинет для повторяющихся utility-сценариев: быстрые действия вынесены ближе к первому уровню, а справочные разделы не мешают оплате, передаче показаний и проверке начислений.
Количественные эффекты не раскрываются публично, пока нет подтвержденного источника.
Глава 15
Что нужно проверить перед публикацией
- Можно ли назвать клиента или оставить категорию энергетическая компания.
- Какие роли точно входили в scope: физлица, юрлица, операторы.
- Какие task-flow artifacts должны быть source shots, а какие generated explanations.
- Есть ли подтвержденный эффект по оплате, показаниям или обращениям.
- Какие SOURCE/REDACTED shots можно переносить в runtime.
Глава 16
Схемы и JTBD
Здесь схемы фиксируют разделение частых действий и справочного слоя, а также точку предупреждения при передаче показаний.



Предыдущий кейс
Полевая карта
Следующий кейс
Corely