назад

12 минут

Overview редизайн

Контекст

Overview — это стартовая страница кошелька, на которую пользователь попадает после входа в раздел Wallet. В идеале она должна быстро отвечать на базовые вопросы: сколько у пользователя средств, где они лежат, как изменился портфель и что можно сделать дальше.

Цель

1. Добавить PnL под общий баланс
Пользователь должен быстро понимать, как изменился его портфель: в плюсе он или в минусе.

2. Показать активы прямо на Overview
Пользователь должен видеть список своих активов без перехода на отдельную страницу и иметь возможность быстро перейти к действию: trade, transfer, deposit или withdraw.

Дополнительно в процессе редизайна нужно было переосмыслить структуру страницы: вынести бонусный баланс в отдельный виджет, упростить блок последних операций и визуально разделить направления Spot и Futures.

Моя роль

Я отвечал за анализ текущего Overview, изучение проблем в пользовательских сценариях, работу с JTBD и гипотезами, проектирование новой структуры страницы, логику отображения активов, PnL, быстрых действий и вспомогательных виджетов.

Проблемы старой версии

В старой версии Overview пользователь видел баланс, но не получал достаточно информации для принятия решения.

Основные проблемы:

  • не было списка активов

  • не отображалась текущая стоимость каждого актива

  • не было PnL под общим балансом

  • пользователь не понимал, как изменился портфель

  • не было аналитики по составу кошелька

  • переход от актива к торговле был неочевидным

  • новичку было сложно ориентироваться без подсказок

  • блок последних операций занимал много места и плохо работал как быстрый виджет

  • бонусный баланс находился в активах и вызывал путаницу

Ключевая проблема:

Overview не доводил пользователя от просмотра баланса к следующему действию.

PNL

На старте задачи продуктовая команда подготовила исследование по PnL и проблеме обратной связи после торговых операций. Я использовал его как основу для проектирования: изучил ключевые выводы, проблематику, ожидаемый бизнес-эффект и паттерны конкурентов.

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

Для Overview это означало, что PnL должен быть не отдельной сложной аналитикой, а быстрым сигналом рядом с балансом: пользователь открывает кошелёк и сразу понимает, как изменился его портфель. Поэтому в новой версии я разместил Today’s P&L под Estimated balance, а более глубокую аналитику оставил как потенциальное развитие отдельной страницы PnL Analysis.

JTBD

Чтобы не проектировать Overview как просто страницу с балансом, я разложил основные пользовательские задачи через JTBD. Это помогло понять, какие решения пользователь хочет принять на этой странице: оценить состояние портфеля, разобраться в структуре средств, быстро перейти к действию и понять, нужно ли менять стратегию.

Из этого стало понятно, что Overview должен отвечать на следующие вопросы:

  • где лежат мои средства

  • какие активы доступны для действий

  • что изменилось с портфелем

  • куда можно быстро перейти дальше

  • нужно ли что-то сделать прямо сейчас

Эти сценарии легли в основу новой структуры страницы: PnL под балансом, карточки Spot/Futures, таблица активов, быстрые действия и виджеты последних операций.

Гипотезы

PnL

Если показать нереализованный PnL (unrealized gain/loss) на Overview, то вырастет вовлечённость и частота сессий у активных трейдеров, потому что отсутствие этой метрики — одна из главных жалоб на Coinbase в UX-аудите: «Not showing users the rate of unrealized gain/loss. This one is HUGE».

Assets on Overview

Если показать список ассетов с % изменением за 24ч прямо на Overview без перехода в отдельную вкладку, то количество переходов на отдельную страницу Assets снизится, а время до первого действия (Trade/Deposit) сократится, потому что пользователи заходят на Overview как на «стартовую точку» и хотят принять решение, не блуждая по навигации.

Карточки wallets

Если показать балансы Spot и Futures как отдельные «карточки» с быстрыми действиями для каждой, то пользователи реже будут совершать ошибки перевода (отправить деньги не туда), потому что смешение двух типов счётов — типичный mental model mismatch у новичков на биржах.

Available balance

Если вынести «Available balance» (а не только Total) на первый план, то снизится количество ошибок при создании ордеров (попытки торговать зарезервированными средствами), потому что исследование UX криптокошельков фиксирует «zero balance confusion» как один из топовых pain points. Исследование



Hide small

Если добавить toggle «Hide small assets» (< N USDT) по умолчанию включённый, то пользователи с диверсифицированным портфелем будут получать overview быстрее без информационного шума, потому что у Binance эта функция стала стандартом именно из-за запросов пользователей с большим количеством монет.

История транзакций

Вынос полной истории транзакций с Overview на отдельный раздел снизит время до первого целевого действия (Trade/Deposit/Withdraw) и повысит частоту этих действий, потому что пользователь перестанет «застревать» в информационном шуме NNGroup формулирует чётко: «В системе, спроектированной с progressive disclosure, само появление чего-либо на первом экране сигнализирует пользователю: это важно.» Если ты показываешь историю на Overview наравне с балансом и кнопкой Trade — ты сообщаешь пользователю, что это одинаково важно. Но это ложь. История — справочная информация, а не action-driven контент.

Исследование конкурентов

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

В старой версии Overview пользователь видел общий баланс, но не получал цельной картины по активам: не было списка монет, доступного и зарезервированного баланса, быстрых действий с конкретным активом и понятного разделения между Spot и Futures. Из-за этого страница работала скорее как статичный экран состояния, а не как точка управления кошельком.

В рамках исследования я также изучил, как подобные страницы устроены у конкурентов: как они показывают активы, разделяют типы счетов, выводят быстрые действия и помогают пользователю перейти от просмотра баланса к торговле или переводу средств. Это помогло сформировать требования к новой структуре Overview и определить, какие блоки должны появиться на первом экране.

Варианты решения

В процессе проектирования я не сразу пришёл к финальной структуре Overview. Сначала было несколько вариантов компоновки страницы: с разным расположением PnL, таблицы активов, карточек Spot/Futures, бонусного блока и последних транзакций.

Часть итераций была более аналитической: с акцентом на графики и подробную структуру портфеля. Другие варианты были с быстрыми действиями, таблицей активов и прямым переходом к торговле. Эти решения обсуждались с продуктовой командой, чтобы найти баланс между информативностью и скоростью перехода к действию.

В итоге мы сфокусировались на MVP-структуре, которая решала две главные задачи: показать PnL рядом с общим балансом и вывести активы прямо на Overview. Более сложную аналитику решили не перегружать на первом экране, а оставить как потенциальное развитие в отдельную PnL / Asset Analysis страницу.

Финальная версия Overview строится вокруг трех сценариев:

  • быстро понять общее состояние портфеля через баланс и Today’s PnL

  • увидеть структуру средств через карточки Spot/Futures и таблицу Assets

  • быстро перейти к действию через Deposit, Withdraw, Convert и Trade в строке актива

User Flow

Главное изменение: Overview стал не конечной страницей просмотра, а стартовой точкой для действий.

Результат

В результате была собрана новая версия Overview, которая стала не просто страницей с общим балансом, а рабочим экраном для управления активами. Пользователь сразу видит баланс и Today’s PnL, понимает структуру средств через карточки Spot/Futures, может быстро найти нужный актив в таблице Assets и перейти к действию через Deposit, Withdraw, Convert или Trade. Бонусный баланс был вынесен в отдельный виджет, а последние операции — в компактный блок, чтобы не перегружать основной сценарий и сохранить быстрый доступ к важной информации.

Рефлексия

На текущий момент у решения ещё нет продуктовых результатов после внедрения, потому что дизайн находится на этапе передачи в разработку. Поэтому в кейсе я оцениваю результат через качество проработки сценариев: новый Overview закрывает ключевые проблемы старой версии, показывает PnL под балансом, выводит активы на первый экран и сокращает путь от оценки портфеля к действию. После релиза я бы проверил влияние редизайна на CTR по Trade, переходы из Overview в торговлю и время до первого действия с активом.