web3 | product design | crypto exchange
CREATING EXCHANGE FOR digital and TOKENIZED ASSETS
Symbridge digital asset exchange built specifically for future-minded traders. My goal was to create end-to-end design from scratch and apply corporate branding, which was on parallel track.
role: IC Principal designer
initial hands-off: < 1 month
CI adaptation: 3 weeks
software costs: 1 FIGMA SEAT
role: IC Principal designer
initial hands-off: < 1 month
CI adaptation: 3 weeks
software costs: 1 FIGMA SEAT
project challenges and pecularities
Project timeline
Onboarded as IC
Kick-off and workshops week
First hands-off
CI delivery
Consulting on ecosystem CI
Research&Design
Feedback & change requests cycle
CI impl.
Design update
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sept
Oct
Nov
Dec
Jan
Feb
2019
2020
No established design process
I was the first designer onboarded and my task was not only create, well, design, but also setup the whole work environment, arrange collaboration with the developers and analytics.
I've introduced modern product design principles like doing research first, focus on user needs, change request management. I also insisted on using Figma as the primary design tool for remote collaboration, hands-off, easy versioning.
Working around visual pivot
I was involved in advising on branding creation process made by a Carbone Smolan Agency. With all client-side communication and decision making delays it was obvious we can not wait several months and need to start working on product.
I've split the project work into two major phases. The first one was focused on product features, user flows and design system, and the second one — on CI implementation, additional feedback-based updates and polishing.
Institutional focus
The product was focusing on institutional clients and market makers first while keeping wider audience. It added an extra level of complexity to the scope and included business features like Trading strategies, OTC trading, Subaccounts.
I've worked on design with both professionals and casual traders in mind and aimed for consistency, intuitive usability.
OTC TRADING
CONCIERGE SERVICE
SUBACCOUNTS
TRADING STRATEGIES
MARKET IMPACT CALCULATOR
VALIDATOR NODES
Regulated blockchain
Symbridge was built on a deeply customized Hyperledger Fabric, and required blockchain-related tools both for security and transparency. Crypto-specific tools like key generators or blockchain explorer were also included. And Validator nodes for extra transparency (and monetization!).
design process and validation
Iterative approach
I believe in iterations in design. The whole Symbridge designing was built on multitude of iterations: ideas gathering and whiteboard validating them. Making early sketches and collecting feedback from the main stakeholders who were also professional traders and could help with usability and professional expectations. Iterating on visuals, working with feedback from the wider team and experts. Requesting peer review from other team members, including consultations on whether the proposed design can be implemented at all. Sometimes it could not, so I iterated further.
Stakeholder workshops
Obviously, there are no users in the early-stage startups. To get insights on what to include in design I've organised a week-long workshop series with professional traders and investors. I've conducted deep interviews, existing exchanges reviews and whiteboard sessions to gather ideas, insights and collect BRDs that affected the whole product.
Besides getting insights I used these workshops to connect with the analytics and development teams. We agreed on our internal workflows and also validated the most important feature ideas.
trading terminal
Classical trading exchange terminal — completely built anew to meet the highest trader's requirements.
Subaccounts
An important feature for institutional clients that allows delegating funds to employees or subcontractors and trade on behalf of the owner.
Market impact calculator
Orderbook calculator to immediately estimate the impact of the order on the market
Design assets
using navigation strategically
Navigation panel in Symbridge is the entry point to the internal products and is serving so many purposes:
- Addressing the complexity of the audience. Besides classical exchange terminal it incorporates access to institutional tools, OTC trading and other products.
- Providing clarity — fast and easy access to the most important features with hierarchy representation.
- Brand communication. Menu is accessed via logo, to establish habits of getting the best out of touching the brand. And no more burger menu!
- Technical information on latency, online status and other important settings. These would clutter UI and are not needed all the time, yet have to be easily accessible.
Subaccounts
An important feature for institutional clients that allows delegating funds to employees or subcontractors and trade on behalf of the owner.
Quick Inputs
A modular subsystem to enable fast user input with predefined typical values. Microinteractions to precisely adjust bps.
Tooltips
A tooltip system that allows explanatory tooltips on any level of UI, i.e. even on each subcomponent
Onboarding overview
Complete all three required steps and start trading. KYC, Security, Blockchain access.
Validators
Institutional clients have an option to invest in validator nodes and earn extra money for supporting blockchain infrastructure.
On pictures, design v1 and v2.
Account security: login locations
An additional way to maintain security. besides password, 2FA, key pairs, white lists, and settings in subaccounts.
RESULT: 100% design coverage for complex product meeting the institutional requirements
marketing assets
Impact: 900m Euro trading volume via OTC
Read more about otc trading
read more about tokenization platform
web3 | product design | crypto exchange
CREATING EXCHANGE FOR digital and TOKENIZED ASSETS
Symbridge digital asset exchange built specifically for future-minded traders. My goal was to create end-to-end design from scratch and apply corporate branding, which was on parallel track.
role: IC Principal designer
initial hands-off: < 1 month
CI adaptation: 3 weeks
software costs: 1 figma seat
project challenges and pecularities
Project timeline
Onboarded as IC
Kick-off and workshops week
First hands-off
CI delivery
Consulting on ecosystem CI
Research&Design
Feedback & change requests cycle
CI impl.
Design update
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sept
Oct
Nov
Dec
Jan
Feb
2019
2020
No established design process
I was the first designer onboarded and my task was not only create, well, design, but also setup the whole work environment, arrange collaboration with the developers and analytics.
I've introduced modern product design principles like doing research first, focus on user needs, change request management. I also insisted on using Figma as the primary design tool for remote collaboration, hands-off, easy versioning.
Working around visual pivot
I was involved in advising on branding creation process made by a Carbone Smolan Agency. With all client-side communication and decision making delays it was obvious we can not wait several months and need to start working on product.
I've split the project work into two major phases. The first one was focused on product features, user flows and design system, and the second one — on CI implementation, additional feedback-based updates and polishing.
OTC TRADING
SUBACCOUNTS
TRADING STRATEGIES
MARKET IMPACT CALCULATOR
VALIDATOR NODES
CONCIERGE SERVICE
KYB process
Institutional focus
The product was focusing on institutional clients and market makers first while keeping wider audience. It added an extra level of complexity to the scope and included business features like Trading strategies, OTC trading, Subaccounts.
I've worked on design with both professionals and casual traders in mind and aimed for consistency, intuitive usability.
A new mnemonic phrase will be generated automatically if left empty
key generator
mnemonic phrase
Generate phrase
Passphrase (optional)
repeat Passphrase
Generate keys
Regulated blockchain
Symbridge was built on a deeply customized Hyperledger Fabric, and required blockchain-related tools both for security and transparency. Crypto-specific tools like key generators or blockchain explorer were also included. And Validator nodes for extra transparency (and monetization!).
design process and validation
Iterative approach
I believe in iterations in design. The whole Symbridge designing was built on multitude of iterations: ideas gathering and whiteboard validating them. Making early sketches and collecting feedback from the main stakeholders who were also professional traders and could help with usability and professional expectations. Iterating on visuals, working with feedback from the wider team and experts. Requesting peer review from other team members, including consultations on whether the proposed design can be implemented at all. Sometimes it could not, so I iterated further.
Stakeholder workshops
Obviously, there are no users in the early-stage startups. To get insights on what to include in design I've organised a week-long workshop series with professional traders and investors. I've conducted deep interviews, existing exchanges reviews and whiteboard sessions to gather ideas, insights and collect BRDs that affected the whole product.
Besides getting insights I used these workshops to connect with the analytics and development teams. We agreed on our internal workflows and also validated the most important feature ideas.
trading terminal
Classical trading exchange terminal — completely built anew to meet the highest trader's requirements.
Orders with quality of life
To make trading faster and easier: bps preselects, amount preselects and different limit orders options.
Market impact calculator
Orderbook calculator to immediately estimate the impact of the order on the market
Design assets
using navigation strategically
Navigation panel in Symbridge is the entry point to the internal products and is serving so many purposes:
- Addressing the complexity of the audience. Besides classical exchange terminal it incorporates access to institutional tools, OTC trading and other products.
- Providing clarity — fast and easy access to the most important features with hierarchy representation.
- Brand communication. Menu is accessed via logo, to establish habits of getting the best out of touching the brand. And no more burger menu!
- Technical information on latency, online status and other important settings. These would clutter UI and are not needed all the time, yet have to be easily accessible.
notable features
Name
Surname
Trading pairs
Choose pairs
USD
Placeholder
24h trade limit
USD
Placeholder
MAX TRADE SIZE
USD
Placeholder
deposit limit
USD
Placeholder
withdraw limit
Create subbaccount
Upload documents
Attach employee documents for KYB processing
create subaccount
Subaccounts
Important feature for institutional clients that allows delegating funds to employees or subcontractors and trade on behalf of the owner.
Quick Inputs
A modular subsystem to enable fast user input with predefined typical values. Microinteractions to precisely adjust bps.
Tooltips
Detailed design to enable detailed explanations on different levels, from whole component to sub-components.
Onboarding overview
Complete all three required steps and start trading. KYC, Security, Blockchain access.
Validators
Institutional clients could invest in various validator nodes and earn extra money for supporting blockchain infrastructure.
On pictures, design v1 and v2.
Account security: login locations
An additional way to maintain security. besides password, 2FA, key pairs, white lists, and settings in subaccounts.
RESULT: 100% design coverage for complex product meeting the institutional requirements
marketing assets
Impact: 900m Euro trading volume via OTC
Read more about otc trading
read more about tokenization platform