Bullish

OTC Trade Builder - UI/UX

The proposal
Designing a tool tailored for pro-traders to facilitate over-the-counter (OTC) trading, enabling seamless execution of high-volume transactions across various products and strategies through direct interactions with other traders.

My Role
UX flow design, User interface design, Business/ Tech requirement validation

Tools
Figma, Figjam

Product Link

Challenge:

How might we design a tool tailored for pro-traders to facilitate over-the-counter (OTC) trading, enabling seamless execution of high-volume transactions across various products and strategies through direct interactions with other traders?

Feature Brief
The OTC UI provides a user interface to all the functionality provided by the OTC Trade facility. The primary features are:

OTC Booking UI: Provides an interface for users to book an OTC trade
OTC Match Blotter: View a live blotter of users’ OTC trades and status
OTC Positions: View all OTC positions held at Bullish
OTC Trades: View the history of OTC trade bookings and trade legs

1. Market Research

OTC vs RFQ Trading -

Market Insight:
In the current market, tools for Over-The-Counter (OTC) trading are limited, especially for pro traders. Instead, Request for Quote (RFQ) systems are more commonly used—particularly by retail clients.

Below is a comparison highlighting the key differences between OTC trading and RFQ:

2. Competitive Analysis

Derbit & Binance flow, features, UIUX analysis -

I analyzed the RFQ functions of two key industry players: Deribit (a leader in options and futures trading) and Binance (a leading retail crypto exchange). The review focused on their trading flows, feature sets, and included a UI/UX analysis to identify best practices and gaps.

3. Design Approach

Existing modal Audition(Bullish) -

Identifying reusable design patterns to implement new functions across the platform — ensuring UI/UX consistency while reducing development effort and improving scalability.

4. Design Process:

Ecosystem Flow Design Process -

I began by designing the overall user flow to understand how the ecosystem functions when a trade order is initiated within the OTC Trade Builder.

Trader Builder Flow Design Process -

I conducted a deep dive into the Cornea flow, detailing how users can construct a trade, add legs, simulate amount and risk, submit, and cancel orders within the interface.

Wireframe Exploration:

Builder structure -

I designed multiple wireframe options to help the business and development teams evaluate different structural approaches for the OTC Trade Builder:

Option 1: "Partial Reveal" – Optimized for a more engaging experience by progressively disclosing information, helping users manage complexity and reduce information overload.
Option 2: "Parallel Design" – Focused on efficiency, allowing traders to view and compare multiple trade components side by side to support faster decision-making.

Final Structure Design Decision:
The final approach reflects a constructive trade-off between business goals and stakeholder feedback, with a clear priority placed on streamlining the trade construction process to best support user needs and strategic objectives.

UI design:

Screen Flow Design-

I designed responsive desktop, tablet, and mobile versions of the OTC Trade Builder to ensure seamless Day 1 adoption across all key platforms and user environments.

Extreme Case Design -
Button and Data Overload in One Row

Objective

To test the limits of usability and visual clarity when an interface row must display:

Multiple action buttons
High-volume data fields
Limited horizontal space in mobile

Design Considerations

Action Prioritization
Use of space-saving patterns (iconography)
Use of a long-press gesture for the device

Agile Collaboration:

Future version (Adding trade with strategies) -

Following an agile approach, I typically provide multiple design versions to support the development team’s adaptation, aligning with their implementation timelines and sprint goals.

Launched: Sep 2025 | Product Link