Контекст
Застройщик согласует с банком перенос денег между статьями сметы проекта. Раньше это были Excel и почта: цикл в недели, а арифметические ошибки находил банк уже после отправки.
Задача звучала как «перенести подачу в интернет-банк». Я сформулировал её иначе: ошибки должны ловиться до отправки.
Подача в три шага
Заявка целиком живёт в интернет-банке: реестр проектов, просмотр, статусы, замечания банка и повторная подача. Центральная часть сценария, сама подача, разбита на три шага: смета, график строительства и обоснование с итоговой сметой перед подписью.
Таблицы на сотни строк
Живая дельта сумм прямо в таблице вместо проверки при отправке: дальше не пустит, пока не сойдётся. Закреплённые столбцы, итоги, которые остаются на месте при прокрутке, свёртка статей и настройка столбцов.
Исследование
До запуска исследователи провели юзабилити-тест прототипа с семью застройщиками, клиентами проектного финансирования. Интерфейс узнали сразу: он похож на привычные таблицы, и клиенты сказали, что при такой реализации вести Excel больше не придётся. Пошаговая подача была для них новой: многие ждали подписи сразу после сметы, но на шаге с графиком строительства легко перестраивались.
Каждую находку я разобрал и превратил в правку макетов.
В графике строительства непонятно, где заёмные, а где собственные средства
Убрал из графика деление на типы средств: в периодах вводятся только свободные средства
Кнопку сброса изменений не замечали
Перенёс сброс в нижнюю панель рядом с основными действиями
Непонятно, что делает иконка в поле ввода
Добавил подсказку «Сбросить до текущего значения»
Подсказки «Добавьте» и «Сократите» появлялись у строк, которые нельзя редактировать
Оставил подсказки только у статей, где вносятся изменения
Без закреплённых строк и столбцов теряется контекст при прокрутке
Закрепил статьи, сметную стоимость и шапку с итогами
Перед подписью хочется увидеть итог целиком
Третий шаг стал предпросмотром: итоговая смета и график с выделенными изменениями
Столбец собственных средств нужен не всем
Добавил настройку столбцов
Результат
- Несходящуюся заявку невозможно отправить.
- Статусы и замечания банка живут в кабинете, а не в почте.
Что бы сделал иначе
- Прототипировал бы сразу во фронтенде, а не в Figma.
- Раньше сверился бы с бизнесом по дальнейшим планам: архитектура сразу строилась бы с запасом на масштабирование, и исследование, возможно, нашло бы меньше проблем, хотя критичных среди них не было.