I was asked by RabbitX to design a DEX trading page for an advanced user profile who is in their mid to late 20s, has a deep knowledge of DeFi and Tech, is self employed trader and needs to have access to the markets he wants to trade, leverage to take on bigger bets and have good customer service.
My focus was primarily on 4 main competitors “DydX, Binance, ByBit and BitGet”. I started with an audit by researching and organizing the most important features that each competitor provided that were crucial to the target user and broke it down into primary and secondary categories.
Primary
- Trading View
- Orders - Market / Limit / Stop
- Position / Orders / Fill
- Margin Ratio
- Deposit / Withdraw
- Order Book
Secondary
- Switch Markets
- Market Stats
- Tradingview Tools
- Wallet
Since the user prefers UX/UI of centralized exchanges, the goal was to analyze all of the features, layouts, information and visual design provided by competitors and design an improved and more optimized user interface, that’s a lot more simplified, with unneeded features and information taken out and centered around UCD with a better approach towards watching and tracking the market, order book, placing orders, watching your positions, margin ratio and being able to make quick deposits and withdrawals.
Once the majority of research was completed, my next area of focus was to design a grid and layout that followed UCD principles (Scroll from top to bottom, left to right) focused on primary features, followed by secondary ones.
To create wireframes, I analyzed all of the features from competitors, gathered all of the necessary requirements for each feature set and got rid of the rest to ensure that information is easy to read, not overwhelming to the user and set my priorities on highest ROI / time spent activities.
With high fidelity wireframes completed, I began creating a visual moodboard of various CEX/DEX exchanges and visual concepts to draw inspiration and ideas from on colors, typography and aesthetic for the user interface.
2 very different visual languages/interface styles were designed in total, including a light mode version. After getting the desired result, color and text styles were created, followed by a reusable component library for scalability and quick design improvements.
