Trading Application UI Kit
TLDR:
I tasked myself with looking into trading platform UI as I started learning how to trade myself. This led me to a variety of platforms that varied wildly in terms of experience and interface design. I decided to extract certain patterns and screens partly because, upon some investigation, I discovered that there are no available viable trading UI kits out there that cater to advanced traders needing professional-grade software. This is a work-in-progress and something I will build as I become more and more familiar with various trading platforms myself (through simulated and actual trading).
The [Future State] Product
A base UI kit for a trading application.
My Role
Designer and front-end coder
The Problem/Opportunity
A personal exercise in UI, data visualization, design systems, and front-end development in a financial niche that happens to interest me at the moment.
Team
Team of one
Time Spent
Ongoing. This is a work-in-progress.
1. Dashboard.
This contains the base patterns for displaying tabular content in a trading application, such as watch lists, indices, and positions. It also includes a ticket for trade execution, a news component, and a basic display for account information.
2. Charts.
Here is a 6-7 month-range candlestick chart over a volume bar chart—a fairly common chart used in several trading strategies (ex. price action).
2. Details.
The devil is in the details of this project. I aimed to be as accurate and realistic as possible as I created various re-usable elements.
Here, I'm showing three examples of common candlestick patterns—from the “hammer” candle (or the “hanging man”—when it indicates a pullback), to the very important DOJI, and the bearish “shooting star” candle.