Валерия Саблина
theme:

Все кейсы Кейс 04 — portfolier

Trading Strategy Management

Открыть прототип

portfolier — веб-продукт, в котором трейдер подключает торговый счёт, разбирается, как стратегии вели себя на самом деле, и подписывается на те, которые стоит копировать. Я спроектировала MVP: аналитику, на которой принимается решение, маркетплейс, копирование и подписки.

1,5 месяца от брифа до MVP, переданного в разработку
  • Данных много по самой природе продукта — кривые эквити, таблицы по месяцам, разрезы по дням, часам и символам и панель фильтров, которая пересчитывает всё это сразу
  • Аналоги разобраны до первого экрана — Portfeller и отчасти TradingView, чтобы понять, где трейдер ожидает что найти
  • Брейкпоинты сгенерированы, а не нарисованы — свои же экраны я прогнала через Figma Make, чтобы фронтенд увидел, как страница перестраивается
Продукт
portfolier — веб-приложение для подписки на торговые стратегии и их копирования (MVP)
Роль
UX/UI-дизайнер — ведущий дизайнер проекта
Команда
Head of Product — ставил задачи и ревьюил каждый экран
Сроки
Около полутора месяцев, MVP передан в разработку
Объём
Аналитика портфеля, фильтрация графиков и таблиц, добавление торгового счёта, маркетплейс стратегий, умное копирование, подписки, профиль, флоу входа
Статус
В разработке — здесь опубликована часть экранов

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

Аналоги я разобрала до того, как рисовать, — Portfeller и отчасти TradingView. В такой устоявшейся категории трейдер заранее знает, где что должно лежать, и спорить с этой привычкой значит терять пользователей, а не выигрывать конкурсы. Получилась трёхколоночная структура, которая выдерживает настоящие числа: рост капитала по месяцам, прибыль и убыток по дням недели, по часам и по символам, и доля портфеля, показывающая, какую часть депозита занимает каждая стратегия.

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

Аналитика портфеля — экран, на котором принимается решение

Аналитика портфеля — экран, на котором принимается решение.
Слева фильтры, в центре рост капитала и таблица по месяцам, справа разрезы по дням, часам и символам. Любой фильтр пересчитывает все три колонки.

Маркетплейс стратегий и подписки

топ стратегий Маркетплейс стратегий и подписки: топ стратегий.
подписки Маркетплейс стратегий и подписки: подписки.
Рейтинг стратегий с приростом, просадкой, эквити и числом подписчиков — и управление подписками за ним.

Копирование стратегии

Копирование стратегии.
Самый длинный флоу продукта: выбрать стратегию, задать долю депозита и правила, по которым сделки повторяются.

Подключение счёта и профиль

добавление счёта Подключение счёта и профиль: добавление счёта.
профиль Подключение счёта и профиль: профиль.
Добавление торгового счёта — шаг, после которого продукт либо начинает работать, либо теряет смысл, поэтому у него свои состояния.

Флоу входа

вход Флоу входа: вход.
регистрация Флоу входа: регистрация.
восстановление пароля Флоу входа: восстановление пароля.
Вход, регистрация и восстановление пароля, нарисованные набором, а не одним экраном.

Брейкпоинты, сгенерированные из моих же экранов

широкий экран Брейкпоинты, сгенерированные из моих же экранов: широкий экран.
телефон Брейкпоинты, сгенерированные из моих же экранов: телефон.
Одна и та же страница аналитики на широком экране и на телефоне. Я не перерисовывала её: мои экраны ушли в Figma Make, и собранная версия показала фронтендерам, как перестраивается раскладка, — вечер вместо недели ручных вариантов.

Связаться

Открыта к продуктовым дизайнерским ролям — удалённо по Европе и Евразии или гибрид в Сербии. Быстрее всего — почта или телеграм.

Открыть прототип

Откроется рабочий прототип, собранный из этих экранов.