Scalpee
Scalpee
crypto trading terminal
crypto trading terminal
|
|
desktop app
desktop app
scalper trader setup SAMPLE
about
about
Scalping is a specific trading strategy in which traders make deals over an extremely short period of time.
Scalping is a specific trading strategy in which traders make deals over an extremely short period of time.
Scalping is a specific trading strategy in which traders make deals over an extremely short period of time.
A scalper trader is using up to six displays to monitor and control 50–70 order books and charts, requiring specialized software known as a ‘terminal’.
Due to high hardware demands and the need for a powerful GPU, most terminals are built as Windows apps.
Like any modern software, to win the users and gain an edge over competitors, a terminal must have simple, intuitive controls that deliver the right information at the right time, even while managing large volumes of data and entities.
A scalper trader is using up to six displays to monitor and control 50–70 order books and charts, requiring specialized software known as a ‘terminal’.
Due to high hardware demands and the need for a powerful GPU, most terminals are built as Windows apps.
Like any modern software, to win the users and gain an edge over competitors, a terminal must have simple, intuitive controls that deliver the right information at the right time, even while managing large volumes of data and entities.
Role & Scope
Role & Scope
Role & Scope
Role
Founding Designer
Founding Designer
domain
Crypto | Web 3 | Fintech | Trading
Crypto | Web 3 | Fintech | Trading
Worked on
▪ Deep UX research
▪ Product design
▪ UI design & Animations
▪ Design systems
▪ Design-related processes
▪ Cross-team processes
▪ Strategic product planning
▪ Product brand design
▪ Deep UX research
▪ Product design
▪ UI design & Animations
▪ Design systems
▪ Design-related processes
▪ Cross-team processes
▪ Strategic product planning
▪ Product brand design
platform
▪ Windows native app
▪ Web app
▪ Windows native app
▪ Web app
scalper trader setup SAMPLE
impact
impact
Building and launching the Scalpee terminal from scratch, with a user experience significantly better than competitors, was the main achievement.
Building and launching the Scalpee terminal from scratch, with a user experience significantly better than competitors, was the main achievement.
■ Built a flexible and scalable design system based on variables and tokens.
■ Designed features with up to 5x fewer clicks compared to competitors.
■ Created industry-leading solutions for complex functions with up to zero clicks required.
■ Reduced front-end dev cost by 30% through upgrading processes, approach and tools.
■ Reduced product hardware load up to 20% with design changes and design optimisation.
■ Founded and implemented cross-platform and cross-product design systems.
■ Embedded research and design vision into strategic planning.
■ Set several new UX standards in scalping trading domain.
■ Built a flexible and scalable design system based on variables and tokens.
■ Designed features with up to 5x fewer clicks compared to competitors.
■ Created industry-leading solutions for complex functions with up to zero clicks required.
■ Reduced front-end dev cost by 30% through upgrading processes, approach and tools.
■ Reduced product hardware load up to 20% with design changes and design optimisation.
■ Founded and implemented cross-platform and cross-product design systems.
■ Embedded research and design vision into strategic planning.
■ Set several new UX standards in scalping trading domain.
orderbook & chart group overview
orderbook & chart group overview
challenge
challenge
Scalpee is the most challenging project I have ever worked on. The goal was to make the most complex trading software intuitive and easy to use.
Scalpee is the most challenging project I have ever worked on. The goal was to make the most complex trading software intuitive and easy to use.
Scalpee is the most challenging project I have ever worked on. The goal was to make the most complex trading software intuitive and easy to use.
For a scalper trader, it's crucial to manage orders quickly and intuitively. Even a one-second delay can mean significant profit or loss in a volatile market. There is no room for mistakes or ambiguity in the interface.
The number of substances, numbers, controls, and indicators is large. While it’s possible to fit all data and features on screen, this would make the interface extremely overloaded and leave new users no chance to start without reading a lengthy manual.
For a scalper trader, it's crucial to manage orders quickly and intuitively. Even a one-second delay can mean significant profit or loss in a volatile market. There is no room for mistakes or ambiguity in the interface.
The number of substances, numbers, controls, and indicators is large. While it’s possible to fit all data and features on screen, this would make the interface extremely overloaded and leave new users no chance to start without reading a lengthy manual.
Research
Research
Scalping trader patterns, needs, and problems are highly unusual. Nothing even close to what non-trading users have.
Scalping trader patterns, needs, and problems are highly unusual. Nothing even close to what non-trading users have.
Scalping trader patterns, needs, and problems are highly unusual. Nothing even close to what non-trading users have.
Our user patterns are quite uncommon. We conducted several interview series with traders to identify their problems and specific trading needs and, as well as to gather suggestions on how to craft the perfect trading terminal.
Along with researching user patterns and behaviour, we structured the user flow and journey maps to visualize and build the product and design strategy.
Weekly interview sessions with traders helped to shape features and UX from a very early stage.
Our user patterns are quite uncommon. We conducted several interview series with traders to identify their problems and specific trading needs and, as well as to gather suggestions on how to craft the perfect trading terminal.
Along with researching user patterns and behaviour, we structured the user flow and journey maps to visualize and build the product and design strategy.
Weekly interview sessions with traders helped to shape features and UX from a very early stage.
price alert zero click dismiss
APPROACH
APPROACH
The goal was to design a UX that keeps trader focused on the area they are currently working with and preselect the most likely options, reducing clicks and lowering cognitive load.
The goal was to design a UX that keeps trader focused on the area they are currently working with and preselect the most likely options, reducing clicks and lowering cognitive load.
The "don't make me think" approach is used, or at least challenged, for every feature, button, text or user action.
As a result, Scalpee requires up to 5x fewer clicks and significantly less cognitive load than competitors for similar features. Moreover, some features have zero click solutions, and where clicking is required, the target area was challenged to be large, not just a button.
We set several new UX standards in trading software and competitors started copying our solutions. That’s what I’m proud of.
The "don't make me think" approach is used, or at least challenged, for every feature, button, text or user action.
As a result, Scalpee requires up to 5x fewer clicks and significantly less cognitive load than competitors for similar features. Moreover, some features have zero click solutions, and where clicking is required, the target area was challenged to be large, not just a button.
We set several new UX standards in trading software and competitors started copying our solutions. That’s what I’m proud of.
tabs linking feature prototype: intuitive ux
tabs linking feature prototype: intuitive ux
SOLUTION
SOLUTION
Smart multi-level search result sorting
For ticker search result output, I created a smart sorting logic that shows the most relevant tickers appear at the top.
This logic is based on what is most frequently used by scalper traders and covers 90% of ticker search scenarios. Compared to simple result sorting and competitors, the number of clicks was reduced by up to 3x.
For ticker search result output, I created a smart sorting logic that shows the most relevant tickers appear at the top.
This logic is based on what is most frequently used by scalper traders and covers 90% of ticker search scenarios. Compared to simple result sorting and competitors, the number of clicks was reduced by up to 3x.
sorting logic in documentation
sorting logic in documentation
Progressive orderbook scaling
Trader needs to adjust the orderbook scale for each ticker, market situation and his trading volume. Adaptive scaling logic saves 5–10 clicks each time a trader changes orderbook scale:
■ Progressive steps. The higher is the current scale value, the larger the step. Progression formula was tuned to cover most of cases.
■ Instant preview. Hovering a value preset in the list shows the result in the orderdbook immediately. This way it takes literally a few seconds to select the right scale and one click to apply it.
■ Hotkeys and tooltips. Most used controls are duplicated with keyboard shortcuts. Tooltips are adaptive: the delay depends on the control and UX scenario.
Trader needs to adjust the orderbook scale for each ticker, market situation and his trading volume. Adaptive scaling logic saves 5–10 clicks each time a trader changes orderbook scale:
■ Progressive steps. The higher is the current scale value, the larger the step. Progression formula was tuned to cover most of cases.
■ Instant preview. Hovering a value preset in the list shows the result in the orderdbook immediately. This way it takes literally a few seconds to select the right scale and one click to apply it.
■ Hotkeys and tooltips. Most used controls are duplicated with keyboard shortcuts. Tooltips are adaptive: the delay depends on the control and UX scenario.
developed feature preview
developed feature preview
conditional logic prototype
conditional logic prototype
Contextual settings architecture
Orderbook and instrument settings have dozens of parameters depending on the instrument, trading style, and more. Pro traders need deep adjustments, while newbies use only basic settings. I've managed to create a UX solution that meets all trader types needs.
■ Contextual UX approach: only relevant setting are displaying at the moment to focus on the parameters a trader is likely going to change.
■ The tab of the settings panel depends on which area was clicked, with the most likely field pre-focused and pre-filled.
■ Quick access to other settings via shared panels with intuitive navigation. Icons with adaptive tooltips makes the panel compact, while meets both pro and newbie traders needs.
■ Default values and presets based on the most popular and most likely values to reduce clicks.
Orderbook and instrument settings have dozens of parameters depending on the instrument, trading style, and more. Pro traders need deep adjustments, while newbies use only basic settings. I've managed to create a UX solution that meets all trader types needs.
■ Contextual UX approach: only relevant setting are displaying at the moment to focus on the parameters a trader is likely going to change.
■ The tab of the settings panel depends on which area was clicked, with the most likely field pre-focused and pre-filled.
■ Quick access to other settings via shared panels with intuitive navigation. Icons with adaptive tooltips makes the panel compact, while meets both pro and newbie traders needs.
■ Default values and presets based on the most popular and most likely values to reduce clicks.
feature prototype
feature prototype
Web account tools
The terminal is connected with a web portal with its own functionality and tools, while both products are under one brand. Therefore, the user experience built to be similar and maintain visual consistency.
However, the development environments for the web and Windows app were different and did not share a single design system, so we had to align them and create two interconnected design systems, each with its own differences.
The terminal is connected with a web portal with its own functionality and tools, while both products are under one brand. Therefore, the user experience built to be similar and maintain visual consistency.
However, the development environments for the web and Windows app were different and did not share a single design system, so we had to align them and create two interconnected design systems, each with its own differences.
web widgets and dialogs samples
web widgets and dialogs samples
Documentation
Documentation
Complex features require highly detailed documentation and careful consideration of dozens of edge cases and scenarios.
Complex features require highly detailed documentation and careful consideration of dozens of edge cases and scenarios.
The entire team relies on documentation and design: development, QA, product management, marketing, and others. The approach was to spend more time creating the detailed documentation that would answer almost any question of any team member. Complex interactive prototypes are not an addition, but a necessity, and in most cases, they significantly save the team's resources, allowing them to convey the idea and technical features more quickly.
The entire team relies on documentation and design: development, QA, product management, marketing, and others. The approach was to spend more time creating the detailed documentation that would answer almost any question of any team member. Complex interactive prototypes are not an addition, but a necessity, and in most cases, they significantly save the team's resources, allowing them to convey the idea and technical features more quickly.
Each feature file is divided into logical sections and scenarios for all the controls and possible cases. That structure makes it easy to navigate, discuss, and work on individual parts without rebuilding the entire design file structure.
Each feature file is divided into logical sections and scenarios for all the controls and possible cases. That structure makes it easy to navigate, discuss, and work on individual parts without rebuilding the entire design file structure.
To help the development and QA team there are also dedicated sections with detailed UI descriptions and annotations, local components, and prototypes. It's also will be helpful to designers who could join later to navigate in this sea of frames and tiny UI details.
To help the development and QA team there are also dedicated sections with detailed UI descriptions and annotations, local components, and prototypes. It's also will be helpful to designers who could join later to navigate in this sea of frames and tiny UI details.
With this number of frames and sections per feature, a design change log is a must-have. It stores all updates of new versions with image previews and links to the relevant frames, making developer's work much easier and helping the feature layout stay consistent through versios.
With this number of frames and sections per feature, a design change log is a must-have. It stores all updates of new versions with image previews and links to the relevant frames, making developer's work much easier and helping the feature layout stay consistent through versios.
Design Systems
Design Systems
Due to different development environments and interconnected products, there are three design systems, particularly one merged into the other.
Due to different development environments and interconnected products, there are three design systems, particularly one merged into the other.
Due to different development environments and interconnected products, there are three design systems, particularly one merged into the other.
The first system is specifically designed for all trading components, which are heavy, custom and have it's own dev environment, while the second system, WinUI3, was used for the common UI to reduce development costs and time to market.
The first system is specifically designed for all trading components, which are heavy, custom and have it's own dev environment, while the second system, WinUI3, was used for the common UI to reduce development costs and time to market.
We had to add one more, third-party web-specific design system Fluent 2.0 , because WinUI3 doesn't support Vue 3, the environment of the web user account.
We had to add one more, third-party web-specific design system Fluent 2.0 , because WinUI3 doesn't support Vue 3, the environment of the web user account.
All systems were modified and cross-integrated to use unified tokens and variables. Therefore, we can actually call it a cross-product design system.
All systems were modified and cross-integrated to use unified tokens and variables. Therefore, we can actually call it a cross-product design system.
outro
outro
Scalpee is currently my most interesting and challenging project. The result is a combination of engineering, trading, complexity, and unbelievable data density wrapped in an intuitive and user-friendly experience. The product set multiple industry standards, elevating trading UX to the next level.
Scalpee is currently my most interesting and challenging project. The result is a combination of engineering, trading, complexity, and unbelievable data density wrapped in an intuitive and user-friendly experience. The product set multiple industry standards, elevating trading UX to the next level.
