Valeria Sablina
theme:

All cases Case 04 — agency project

Trading Strategy Management

Portfolier is a web product where a trader connects a trading account, studies how strategies actually performed and subscribes to the ones worth copying. I designed the MVP — the analytics the decision is made on, the marketplace, copying and subscriptions.

1.5 months from brief to an MVP handed over to development
  • Data-heavy by nature — equity curves, monthly tables, breakdowns by day, hour and symbol, and a filter panel that drives all of them at once
  • Analogues studied — Portfeller and, in part, TradingView, to see how a trader uses products like these
  • Breakpoints generated — I ran my mockups through Figma Make so the frontend developers could immediately see how the page adapts to different screen sizes.
Role
UX/UI designer — lead designer on the project
Team
Head of Product — set the tasks and reviewed every screen; two front-end developers
Timeline
About one and a half months, MVP handed over to development
Scope
Portfolio analytics, chart and table filtering, adding a trading account, strategy marketplace, smart copying, subscriptions, profile, entry flows
Status
In development — part of the screens is published here

In this product a trader has two main questions to answer: which strategy to choose and what share of the deposit to give it. So I built the interface around those decisions.

I split the analytics into three columns: filters on the left, the main charts and metrics in the middle, the detailed breakdown on the right. Any filter immediately changes the data across all three columns.

Before designing I studied the analogues, first of all Portfeller and partly TradingView. The result is a structure familiar to a trader that works on real data: from capital dynamics and profit by day and hour to how the deposit is distributed across strategies.

Portfolio analytics — the screen the decision is made on

Portfolio analytics — the screen the decision is made on.
Filters on the left, capital growth and the monthly table in the middle, the breakdown by day, hour and symbol on the right. Every filter recalculates all three columns.

The strategy marketplace and subscriptions

top strategies The strategy marketplace and subscriptions: top strategies.
subscriptions The strategy marketplace and subscriptions: subscriptions.
A rating of strategies with growth, drawdown, equity and followers, and the subscription management behind it.

Copying a strategy

Copying a strategy.
The longest flow of the product: choosing a strategy, setting the share of the deposit and the rules by which trades are mirrored.

Connecting an account and the profile

add a trading account Connecting an account and the profile: add a trading account.
profile Connecting an account and the profile: profile.
Adding a trading account: until an account is connected the user essentially has guest access, so this step carries its own states.

Interactive prototypes

Breakpoints, generated from my mockups

Instead of adapting each screen by hand, I moved a few key mockups into Figma Make. That made it quick to check how the interface reflows at different screen sizes, and gave the frontend team a clear reference.

Get in touch

Open to product design roles — remote across Europe and Eurasia, or hybrid in Serbia. The quickest way to reach me is email or Telegram.

@Lsablina_R LinkedIn