Личный кабинет инвестора для D8
2026 · Senior Designer
D8 — инвестиционный дом. Не массовый брокер: работает с состоятельными частными и корпоративными клиентами, за каждым закреплён персональный менеджер. Личный кабинет — веб-контур, в котором клиент смотрит портфель, торгует на бирже и покупает внебиржевые продукты.
Я участвовал в редизайне кабинета как продуктовый дизайнер. Моя часть — торговый контур: портфель, котировки, доска опционов и состояния экранов. Витрину внебиржевых продуктов и документооборот вели другие дизайнеры команды, и в кейсе они появляются только там, где стыкуются с моими сценариями.
Что было
Старый кабинет достался от терминальной эпохи: плотные серые таблицы, вкладки в три ряда, названия разделов прямо из учётной системы. Им пользовались — но как справочником. Всё, что сложнее «посмотреть остаток», клиент делал голосом: звонил персональному менеджеру и просил сделать за него.
Для дома это дорого дважды. Персональный менеджер — самый дорогой ресурс в компании, и он должен продавать, а не зачитывать вслух состояние счёта. А клиент, привыкший звонить, не заходит в кабинет и не видит того, что дом на витрине продаёт.
Задача
Метрика редизайна формулировалась не как «улучшить юзабилити», а конкретно: поднять долю операций, которые клиент совершает сам, без звонка менеджеру. Стартовали с 38%. Всё остальное — следствие.
Гипотеза
Клиент звонит не потому, что не умеет. Он звонит потому, что не уверен, что правильно понял экран, а цена ошибки высокая. Значит, работать надо не с обучением, а с определённостью: не оставлять места для двойного толкования и предупреждать об ограничениях до того, как человек начал действовать.
Отсюда неочевидный для многих продуктов вывод: упрощать нельзя. Каждая спрятанная ради чистоты деталь — это ещё один повод перепроверить голосом.
Четыре критерия, по которым отсекали решения
Редизайн большой, спорить можно про каждый экран. Чтобы не спорить про вкус, зафиксировали четыре проверки. Решение, не проходившее хотя бы две, не выпускалось. Три сформулировали на старте, четвёртый появился на середине проекта — как он туда попал, ниже.
Деньги, которых ещё нет
Самый частый источник непонимания в брокерском кабинете — остаток, который «не сходится». Причин две, и обе ежедневные. Клиент продал актив: сделка заключена, позиции уже нет, а деньги придут после расчётов — купить на них другой инструмент можно сейчас, вывести ещё нет. И гарантийное обеспечение: под открытые позиции на срочном рынке часть денег заблокирована до закрытия позиции. В интерфейсе это замок с суммой рядом со свободным остатком — заблокированное показано отдельной величиной, а не вычтено молча. Молча вычесть значит получить звонок «куда делись деньги».
В портфеле такие суммы приходят строкой с названием из учётной системы — «Future money». За ним стоят ожидаемые поступления от внебиржевых сделок продажи. Клиент видит это в своём портфеле и имеет полное право не знать, что оно значит.
Я предлагал переименовать по-человечески. Бэк-офис отказался, и по делу: это не подпись на экране, а имя учётной сущности, по которой сходится отчётность. Переименуешь в кабинете — разъедется с брокерским отчётом и выпиской, и клиент увидит в трёх документах три разных слова про одни и те же деньги. Стало бы хуже, а не лучше.
Компромисс: имя оставили, расшифровку поставили в саму строку. Ссылку в базу знаний третий критерий не проходил, поэтому подсказка встала там, где возникает вопрос. Тот случай, когда правильное дизайнерское решение проигрывает правильному учётному, и продолжать спор было бы упрямством.
Разворот на середине проекта
В первой сборке переключатель счёта жил в выпадающем меню в шапке — компактно, как принято в продуктах, где счёт один. На тестировании выяснилось, чего это стоит.
Мы проектировали для человека с одним счётом, а проектировать надо было для человека с несколькими договорами сразу. Один и тот же экран котировок означает разные вещи в зависимости от того, с какого счёта на него смотрят: где-то инструмент доступен, где-то нет, где-то другое обеспечение. Интерфейс об этом молчал.
Отсюда единственное сознательное дублирование во всём кабинете: счёт и его сумма стоят и в теле экрана, и в шапке. Шапка не уезжает при скролле по длинным таблицам, поэтому контекст виден в момент действия, а не только в момент входа. Это стоило верхней полосы экрана и одного долгого спора с продуктом про «зачем одно и то же дважды». Отсюда же четвёртый критерий отсева: экран без явного счёта — это экран, на котором нельзя принимать решение.
Экраны
Сверху общая картина по всем договорам, ниже выбранный счёт с графиком, под ним три действия, ради которых клиент чаще всего заходит: пополнить, вывести, аналитика. Требование подтвердить почту для двухфакторной авторизации показано полосой под графиком, а не модалкой на входе. Безопасность важна, но заслонять клиенту его деньги ради неё — значит приучать закрывать окна не глядя. Экран — в начале кейса.
Классы активов считаются по-разному: акции в рублях за штуку, облигации в процентах от номинала, фьючерсы в пунктах, валюта в курсе. Это не оформительская мелочь — это разные сущности в одной колонке «Цена». Поэтому единица пишется рядом со значением всегда: иначе процент от номинала под ценой акции читается как сбой данных, и это очередной повод снять трубку.
Отдельная ловушка — облигации. Котировка идёт в процентах от номинала, но заплатит клиент больше: сверху ляжет накопленный купонный доход. Цена в списке и сумма в заявке честно не совпадают, и если этого не объяснить, расхождение выглядит как ошибка системы. НКД вынесен отдельной величиной в карточку инструмента — там, где клиент считает деньги, а не в общей таблице, где он сравнивает бумаги между собой.
В начале строки — избранное, заметка по инструменту и алерт по цене. Мы вынесли их из меню «⋮» после того, как на тестировании алерты там не нашёл никто: при работе со списком наблюдения это самые частые действия, и лишний клик убивает сценарий целиком.
Одна валюта лежит несколькими позициями, набранными по разным ценам в разное время. Для налогов и для понимания результата это разные записи, для вопроса «сколько у меня юаня» — одна. Строки схлопнуты до уровня инструмента, детализация по позициям раскрывается по запросу. Итог виден всегда, разбор — когда он нужен.
Опционы: самый дорогой отказ в продукте
Доска опционов — самый плотный экран кабинета, и по-другому не бывает: чтобы выбрать контракт, нужно видеть страйк, теоретическую цену, волатильность и обе стороны стакана одновременно. Разрежать здесь — значит заставлять сравнивать по памяти. Текущая цена базового актива врезана строкой внутрь таблицы: она делит страйки на «в деньгах» и «вне денег», и это главный ориентир при выборе. У каждого заголовка стоит подсказка — даже опытный клиент не обязан помнить, по какой модели в конкретной системе считается теоретическая цена.
Но дорогой была не плотность. Торговать опционами можно не с любого счёта — только с выделенных, у остальных договоров доска доступна на просмотр. Правило само по себе нормальное, беда была в моменте: в старом кабинете клиент узнавал о нём при отправке заявки, уже выбрав актив, страйк и дату. На разборе обращений это оказалось самым частым поводом для звонка в трейдинге — и ровно тем, что отсекает второй критерий: ограничение показано до сборки заявки, а не после.
Поэтому пустое состояние и состояние запрета я развёл намеренно. «По этим фильтрам ничего нет» и «отсюда торговать нельзя» — разные проблемы с разными следующими шагами. Склеить их в один серый экран значит отправить человека выяснять причину по телефону.
Сочетание базового актива и даты экспирации не дало контрактов. Фильтры и список активов остаются на месте: клиент меняет дату здесь же, не возвращаясь назад и не гадая, что сломалось.
Ограничение показывается при входе на экран с этого счёта, а не при отправке заявки. Данные под сообщением остаются видимыми: смотреть доску можно всем, нельзя только торговать отсюда. Следующий шаг очевиден — переключить договор в шапке, которая никуда не делась.
Регуляторный барьер на стыке с витриной
Витрину внебиржевых продуктов вёл другой дизайнер, но барьер выходил в мой сценарий: заявка собиралась в торговом контуре, а спотыкалась о требование витрины. Разбирали вдвоём, поэтому дальше — про стык, а не про весь раздел.
Перед сделкой со сложным инструментом неквалифицированный инвестор обязан пройти тестирование. Требование закона, снять нельзя. Важная оговорка про масштаб: в сегменте D8 большинство клиентов проходит по имущественному цензу и имеет статус квалифицированного инвестора — их тестирование не касается вовсе. Барьер видит примерно пятая часть базы, и это заранее ограничивало, сколько на нём вообще можно выиграть.
Управлять можно единственным — моментом, когда человек об этом узнаёт. Раньше тест всплывал в конце: клиент выбирал продукт, задавал параметры, жал «купить» и получал анкету. Статус тестирования и кнопку подняли в карточку заявки, на первый экран продукта. Барьер виден до того, как вложено время, — а впустую вложенное время и превращает требование закона в обиду на брокера.
Сам тест идёт модалкой поверх страницы продукта, а не отдельным разделом: после последнего вопроса человек оказывается ровно там, откуда ушёл, с уже выбранным инструментом.
Результаты
Первый замер — через четыре месяца после раскатки на всю базу.
Главное число выросло с 38% до 64%: две трети операций клиенты стали делать сами. Отказы по опционам просели сильнее всего в процентах и подтвердили гипотезу буквально — людям не нужно было объяснять правило, им нужно было увидеть его вовремя.
Последнее — честный промах. Я рассчитывал, что вынос барьера на первый экран заметно поднимет долю прошедших тест. Не поднял. Тут сошлись две вещи: тестирование видит только неквалифицированных клиентов, то есть примерно пятую часть базы, и на такой выборке шесть процентов неотличимы от шума. Похоже, анкета отсекает не тех, кто не дошёл, а тех, кто не готов на неё садиться в принципе, и переносом кнопки эта стена не берётся. Задним числом я бы и не ставил сюда отдельную гипотезу: цена вопроса была мала с самого начала, и это было видно по размеру сегмента ещё до замера.
Что осталось после проекта
Видимый итог — кабинет. Более ценный — таблица, которая под ним лежит. Один компонент держит разные классы активов с разными единицами измерения, группировку позиций по инструменту, состояния пустоты и запрета и подсказку у любого заголовка: это одна и та же сборка на котировках, на валютах и на доске опционов — три экрана выше. Всё новое, что дом заводит в продажу, ложится в неё без нового дизайна.
Второе — четыре критерия отсева. Они дешевле любой дизайн-системы и снимают большую часть споров ещё до макета: вопрос не «нравится или нет», а проходит или не проходит. И, как видно по четвёртому, они дописываются по ходу — из того, что не сработало.
Ближайшее в работе — разбить тестирование на шаги с сохранением ответов между сессиями и вывести плановое состояние счёта отдельной сущностью, а не подсказками к остатку. Дальше — полноценные алерты по цене: сейчас это иконка в строке котировки и самый частый запрос клиентов после редизайна.