Previous market cycles have shown significant risks with centralized cryptocurrency exchanges. Users lost millions due to the collapses of MtGox (2014), Bitfinex (2015), and FTX (2022). This indicates a lack of trust in centralized products, driving the search for decentralized solutions. While decentralized asset exchanges like Uniswap exist, no fully decentralized derivative trading solution is available.
We need to create a prototype for a decentralized derivatives exchange web interface that:
Meets client requirements.
Is easy to learn for users familiar with existing market solutions.
Features simplicity, an appealing interface, sufficient data, and potential for future expansion.
The process followed Design Thinking principles, with several iterative stages based on usability research, previous insights, user empathy, and design lead consultations. Unfamiliar with cryptocurrency intricacies, I consulted an industry specialist. Based on these consultations, user research was initiated, involving the exploration of existing solutions, competitor analysis, and understanding of common patterns in the field.
The startup's problem was already formulated and validated, and I aimed to gather data for design hypotheses directly from users. I conducted qualitative (interviews) and quantitative (surveys) research to understand which applications users used, their challenges, and what aspects were important in cryptocurrency-related apps.
To understand industry trends and practices, I studied earlier research by the startup and other significant research in financial and cryptocurrency organizations. I also used applications from indirect competitors (Binance, Okex, Bybit, DYDX, Perpetual Protocol, and DerivaDEX) as there are no direct competitors.
The primary factors influencing competitor choice are competitive advantages and fee savings. Design is decisive for only 21% of respondents, but it still plays a crucial role in assisting or not hindering task completion. 58% prefer dark themes, 32% have no preference, and 10% prefer light themes. High-contrast shades and monochromatic tones (mainly blue-dark blue) are favored. Accent shades often use gradients. Dashboard navigation systems are a market trend, enhancing user experience if clear.
Samples of personas
To gain a better understanding of the structure, I developed an Information Architecture (IA).
After understanding general UX through application analysis, it was crucial to address color schemes, typography, iconography, layout, and graphics. The goal was to create an interface that is:
Simple and minimalist
Unobtrusive, enhancing functionality
Cost-effective in development
User-friendly Graphics were intentionally avoided to simplify and standardize the application. The layout followed a dashboard system, leveraging research insights on its convenience.
A dark theme was preferred. Two final color options emerged: one with a dark blue background and clean yellow accents, and the other with a dark blue background and a purple gradient. After sketching mockups, a hallway usability study favored the second option for its harmonious use of white as a secondary accent and better contrast. To convey user-friendliness, safety, digitalization, and innovation, interface elements were placed on tiles with large corner rounding. Emphasis was on hierarchy, order, and compactness, fitting most of the interface onto a single desktop screen.
I created a prototype from the available screens, but it was far from the final version as the Testing stage approached. We conducted multiple iterations of testing the prototype with users, addressing identified issues. You'll have the opportunity to try the prototype yourself as we work on questions in the next stage.
The application dedicates one-third of the screen to the account management panel (vaults) and the rest to the account’s content panel. It includes three user entities: Trader (T), Market Maker (MM), and Liquidator (L), with usage levels of approximately 82%, 15%, and 3%, respectively.
Initially, the user selection sections were placed on a vertical side panel, but T and MM have accounts, while L does not. To maintain their status, T and MM were transformed into tabs, and L became a section. The L button needed to be noticeable despite space constraints, so the three sections were aligned based on the participant’s name in the header. The side panel appears in the T and MM sections but disappears in the L section, creating room for content.
As the screen width decreases, the account management panel hides and can be accessed through a right-side dropdown menu triggered by a button. This solution had issues due to the unconventional button shape, ambiguity, and poor placement. The solution was to make the trigger button circular, located in the bottom right corner for thumb comfort. The close button remained in the same spot. The button to open a new account was also placed at the same level in a square shape.
Some interface elements underwent minor changes. For example, the first version of the chart was uninformative. The second version added:
Price Axis Emphasis: Highlighting the 'Price' axis.
Display Format Functionality: Options for choosing the chart display format.
Hover Interaction: Displaying the price at a selected point in the past with a graphical pointer, numerical value, and date.
The tabs for selecting the viewing period were made more noticeable and clear when selected. The central element of the account panel (Vault) gained increased utility. Further modifications to this element were less substantial.
Given the interface's simplicity and limited functionalities, measuring time to achieve results wasn't practical. Instead, we prioritized existing interface details and measured the percentage of correct first clicks. One advantage of dashboard-oriented solutions was that users could reach any action within two clicks.
We also measured SUS (System Usability Scale) and NPS (Net Promoter Score). Initially, the correct first-click rate was around 73%. Through successive iterations, we achieved a rate of 91%. SUS improved from 57.5% to 82.5%, and NPS increased from 59 to 67. The modest growth in NPS was due to the high baseline effect from a unique value proposition, making further improvement challenging.
We will continue to work on improvements. As of now, the project has moved to the development stage, and I am consulting with developers on any questions. By the time you're reading this, the application might already be released and operational. Remember, this is just the first working version of the prototype, intended for investor presentations to secure funding. If successful, we will continue enhancing the application.
I will be glad to any cooperation
What’s on
Skills
Prototyping
Wireframing
User centred aproach
UX/UI design
Competitive Audit
Design Thinking Process
Mobile web-app interface