Wireframe
Before I dive into creating the high-fidelity design, I developed a wireframe to ensure the layout was visually appealing and feasible for transitioning to the actual size. This step allowed me to identify any potential issues early in the design process and make necessary adjustments, ensuring a smooth progression from conceptual sketch to practical implementation. By carefully planning the wireframe, I was able to create a solid foundation that would support the detailed and polished elements of the high-fidelity design.
.png)
CRYPTO-ARSENAL
All-In-One Copy Trading Platform
.png)
Overview
Crypto Arsenal is a cloud-based automated crypto-trading platform. As a UX designer, I led the design team to create an new content management system called 'Back Office,' which enables bot developers to upload their trading strategies and provides detailed insights into strategy performance, earnings, and deployment status across multiple platforms.
I was responsible for designing the dashboard, information architecture, user flows, and project management.
Duration
April 2024/ 4 months
ROLE
Lead UX Designer
.png)
The problems
Crypto trading developers face a range of challenges when deploying trading strategies across multiple platforms. These include time-consuming manual processes for uploading and configuring strategies, complex platform compatibility requirements, high maintenance overhead to keep strategies updated, inconsistent pricing management, disjointed user interfaces, and lack of unified performance monitoring.
Requirements and features
In order to achieve our business goal through our new system, several requirements and features were considered. The primary feature is to allow users to list live/ copy trading strategies to multiple platforms and manage from our new system.
Site Structure
Based on the design strategy and business goals, I develop the site structure that would best serve our new system. During the design process, we continuously refined the site structure to ensure our system structure remained intuitive and consistent both internally and externally.
Iteration
This collaborative approach with the client helped us meet the client's expectations and exceeded them, leading to their approval of the final product. Three iterations were made and the third iteration was a combination of elements from the previous two.
Ideas
Initially, the client did not specify a preferred design style. Given that their product exudes an elegant aesthetic, we proposed an elegant design style. After presenting the initial design, the client expressed their preferences, leading us to create a second iteration based on their feedback.
The client appreciated the overall second design but requested a combination of elements from both design styles. We incorporated their suggestions into a third iteration, which the client found highly satisfactory.
Final sketch
After a thorough discussion, we decided to continue developing the wireframe based on this version of the sketch. This version provides the most intuitive interface and allows users to customize their dashboard contents based on their preferences and needs.
Low Fidelity Design
I started to sketch out all of my ideas after the site structure was determined, ensuring my design would align with business goals and be intuitive.
Grid
Since the Back Office is a new system, I created a new grid style to fit our design better and ensure the entire Back Office design stays consistent.
Container: 1440px / 12 columns
Column width: 88px / Gutter: 24px
Margin：82px
%20(2).png)
Design System
Crypto Arsenal has its own design system to ensure that all components and design elements follow a unified style and behavior. Additionally, it allowed our designers and developers to reuse pre-designed and pre-coded components, reducing the time and effort required to create new interfaces. However, in this project, we still made a few unique components specifically for the Back Office
Coloar Palette
Icons
UI Components
Add Info Card
We allow users to customize the dashboard based on their needs and select the desired info cards, including Developer Summary, Copy Trader Summary, Strategy Adoption, Account Performance, Published Strategy, and Crew Management.
Visual Design
Although we already have a mature design system and guidelines, I still faced quite a few challenges. Since I needed to design from scratch and we had no experience designing such a system, I had to find a solution to balance the business's goals and the user's expectations. The primary goal was to build an intuitive platform for users to manage their trading bots' performance on different platforms. Four iterations were created to determine the proper user flow that would best fit user needs and be the most intuitive.
Edit card content
I elevated the customization feature to the next level. Beyond simply adding additional info cards, I designed a feature that allows users to tailor the content within specific cards, providing a truly personalized experience.
Takeaway
The idea of creating a system that allows users to manage and monitor their trading bots across different platforms simultaneously has been successful. As a team leader, I was responsible not only for the dashboard design but also for overseeing the entire project process. I provided ideas and assistance to the team whenever needed, ensuring smooth progress and alignment with our goals. This collaborative effort resulted in a robust, user-friendly platform that meets both business objectives and user expectations.
All Projects
Design Strategy
After understanding the primary challenges faced by bot developers, we identified two major user issues and crafted a design strategy for the project. Creating a sleek and customized dashboard for performance monitoring, and a streamlined user flow for uploading strategy
Pain point
Solution
Performance monitoring: Users are not able to track their bots performance at once. They need to use multiple browser to do so.
Dashboard: Design a dashboard for monitoring all platforms performance, and add customization feature to meet user's needs and expectation.
Uploading processes, users need to undergo a time-consuming manual procedure every time. It is a repetitive and tedious workflow.
Strategement Management: Users would be able to upload the strategy to different platforms at once without repititive process.
Next Step
Using existing UI components speeds up development. However, given the new system's characteristics, I designed a futuristic glassmorphism style for the next update. This enhances visual appeal and aligns with modern design trends, offering a sleek and intuitive user experience.
Dashboard
Spacing guidelines
Between elements: 24 px
Element padding: 20 px
Spacing
We used a 4-point grid system in spacing for better readability and visual hierarchy. Using the 4-point grid system allows us to maintain greater consistency throughout the entire website and helps direct the user's focus to specific elements.
Cards
Card padding: 20 px
Between elements: 24 px
Text gap: 12 px
User Flow
We continually refined the user flow to ensure the best possible experience for users interacting with the dashboard customization feature. By iterating on design elements, we aimed to make the customization process intuitive, efficient, and highly responsive to individual user needs.
%20(1).png)
.png)
