Crypto Trading Dashboard
Web
Lead Designer
Yang Cong
Product Manager
Ting Fu
Tech Lead
Kent Tang
Project Overview
With countless crypto exchanges operating worldwide—each offering different prices and supporting varying tokens—traders face the challenge of fragmentation. Ideally, a trading platform would aggregate these global prices and allow users to trade seamlessly across multiple exchanges from a single interface. That’s exactly the problem Apifiny aims to solve.
Apifiny consists of two core products: Apifiny Connect (AC) and Hybrid Exchange (HEX).
Apifiny Connect serves as a unified global trading platform, enabling users to access and trade across more than 25 exchanges through one account. Hybrid Exchange, on the other hand, leverages automated market-making strategies to source the best available prices from those same exchanges, optimizing trade execution.
The diagram below illustrates how these two products work together to streamline global crypto trading.
Apifiny Products
Redesigning for Scalability & Growth
Apifiny’s first trading dashboard closely resembled other exchanges, initially supporting only USDT/BTC trading without connections to external platforms. As new features and requirements emerged, the original design struggled to keep up. While developers temporarily added a few fields to accommodate changes, it became clear that the user experience would suffer significantly over time.
Recognizing the need for a scalable solution, I initiated a design and redesign project. My first step was to document all the key features to ensure a comprehensive foundation.
Customer Feedback & Journey
I gathered valuable feedback from our existing customers through the sales team, which allowed me to create a current-state journey map.
I want to add funds to KuCoin but it won’t let me select it.
Oh I didn’t even notice there were multiple exchanges
So I do I have to manually connect every exchange?
Is there a better way to compare the fees?
I am not sure how to find a trading pair under a certain exchange.
I’d like to star some of the exchanges so I can quickly find them.
Trader Journey Map
Current Experience Evaluation
Based on the customer feedback and stakeholder requirements, I evaluated the UX of the current design.
Design
Trade Dashboard
After completing the current UX analysis, I moved into the design phase. Since the trading page and the admin portal are quite different, I’ll walk through them separately. It took at least three major iterations to arrive at the final design. The evolution across these iterations reflects my design thinking process.
Design
Admin Portal
While not as visible as the front-end trading page, the admin portal houses many critical functionalities that support front-end operations. Much of the admin portal’s functionality was designed through separate projects; here, I’m focusing on the features most closely connected to the trading dashboard.
Design
Design System
As part of this project, I also decided to build a UI library to ensure the basic elements could be reused over time. To establish the design system, I collaborated closely with stakeholders, iterating on the visual style until we reached a consensus, and then expanded the system from there.
Design
UX vs. Technical Feasibility
Technical limitations have always been a challenge for me as a UX designer, but they are a reality of the process. After completing the design, I carefully evaluated each constraint to determine which aspects could be adjusted and which were non-negotiable.
Here’s a great example of how I learned that sometimes investing extra time is necessary to preserve a strong user experience.
This pop-up allows traders to select a trading pair along with one of its supported exchanges, offering a clear comparison of price and fee differences across exchanges.
However, building this feature would have required significantly more development effort than initially anticipated. The development team asked me to design a simplified version that would be quicker to implement. Wanting to support their timeline, I agreed — but in hindsight, I should have advocated more strongly for the original design. The simplified version received poor customer feedback, and I had to return to the development team to push for building the full version. In the end, we spent even more time correcting the issue.
In a startup environment, rapid iteration is critical. New features are constantly emerging while the development team also works to fix existing front-end issues. That’s why it’s essential for designers to anticipate upcoming needs during the design process. Looking back, I could have saved considerable time if the initial design had been more forward-thinking.
This project taught me valuable lessons, and with the infrastructure we’ve built, I’m confident that designing a new product and scaling new features will now be much smoother.
Other Projects
