Catalyx 2.0
2 Years • Senior Product Designer • Figma,Sketch,Invision
Catalyx stands as a leading cryptocurrency trading platform renowned for providing the most extensive range of trading options in Canada. In my role, I undertook the redesign of Catalyx's web interface, aiming to enhance the overall trading experience for users.
“Poor trading experience, broken links, low engagement with new users, and customer retention issues”
Problem Space
User Frustrations
“I appreciate the real-time trading, but I'd like sorting options on the 'Markets' page and the ability to edit my profile information. The 'Identification' tab seems redundant, showing only verification status. I hope to be able to change passwords and edit account information”
Keith Finley, Beginner Trader • Experience: ~ 1 year
“Navigating the platform is easy, but occasional broken pages initially raised security concerns for my asset investment. However, trading becomes straightforward with use.”
Monet Goode, Intermediate Trader • Experience: 2 ~ 3 years
“Depositing/withdrawing FIAT is straightforward, but digital wallet transactions can be confusing. I’d like additional security protocols for trading, and the language is sometimes unclear. Exporting transaction history can also be challenging to locate.”
Channing Lee, Expert Trader • Experience: 4 ~ year
For a more detailed user insight, you can view additional information here.
Research Summary
Design Principles
Solution
User Journey
It maps out how users' emotions change over the course of trading experience journey, from present(gray) to future(black). Basic Development is laid out at the bottom, indicating the opportunities for new functions of the app.
User Flow & Information Architecture
The user flow analysis encapsulates a meticulous examination of each task, gauging user sentiments, navigation patterns, and solution discovery on our existing website. Leveraging insights from this research, I crafted a detailed sitemap for the new web experience, aligning with the identified user tasks and flow to optimize navigation and enhance overall user satisfaction.
Design Approach 1 - Strengthen Brand & Consistency
I established brand identity, brand guidelines, component systems and the design system 2.0.
Design Approach 2 - Additional Security
A. API Management
There was a noted absence of API management functions, setting us apart from competitors who offer this feature with additional security settings. To address user needs, I implemented a system allowing users to utilize API keys selectively for tasks like deposit/withdrawal, login, and trading.
Users expressed a desire for the ability to toggle 2FA settings and edit personal information. During the dashboard revamp, we’ve added additional account editing features as well as more security personalization.
In Market’s page, recognizing the limitation of a continuous scroll for the market list without sorting options, I introduced a sorting feature, enabling users to easily find and trade the desired assets. The platform now highlights top assets, organizes them by markets for easier navigation, provides comprehensive asset details, and includes a direct trade button to streamline user actions.
Applying Fitts's Law, I ensured that essential features and actions, like featured products and redirects to the trading page, were easily accessible, reducing cognitive load and enhancing user efficiency.
Design Approach 3 - User Control & Customization
+
Additionally, I added more depth to the visual experience by implementing Darkmode, Lightmode features and personalized trading experience by incorporating Risk & Financial Assessment Survey upon sign-up which allowed users to have different choices according to their expertise and level of knowledge in trading.
Design Approach 4 - Personalization by level of experience
To comply with ASC regulations, I integrated a Risk & Financial Assessment step into the Sign-Up process. This enabled us to assess users' expertise levels and tailor the visual experience based on their proficiency, ensuring a personalized and informed onboarding journey.
Design Approach 5 - Simplified User Flow
In the previous version, users needed to navigate between the Receiving and Sending Wallet tabs to copy and paste addresses, causing inconvenience. In the revamped 2.0 version, I streamlined the process. Now, users can select the coin from a dropdown menu and easily paste the address from an external wallet, eliminating the need for constant tab-switching.
Design Approach 6 - Flexibility
Deposit & Withdraw Options
Users found it challenging to locate the Deposit/Withdraw options, as they anticipated them to be in the Bank Info Tab. However, the functions were placed inside the Wallets page, causing confusion. The Fund & Deposit functions have been relocated from the wallets page to the 'Fund' tab within the dashboard, resulting in a more user-friendly interface with improved interactions.
Design Approach 7 - Feedback Mechanism
+ Microinteractive animations to engage with our users
Design Approach 8 - Conventional Placement
A. Trades Page
I observed that the order form placement was unconventional, positioned on the left. In response to user preferences and industry standards, I adjusted the layout to place the order forms on the right side or bottom. This aligns with the user's inclination to first assess trade graphs and data before making order decisions.
Before
The order form was located on the left side of the interface.
After
The order form has been repositioned and is now located at the bottom of the interface.
B. Main Navigation Menu
I aimed to enhance our website's functionality by addressing issues within the navigation bar and footer, particularly resolving broken links and ensuring a consistent user experience. Additionally, by introducing new pages and functionalities, the goal was to cultivate a more credible and trustworthy online image, recognizing the paramount importance of credibility and trust in our industry.
The user interface now features interactive feedback, improved iconography, and strategic placement, resulting in a cleaner design.
Before
The original Navigation Bar and Footer were characterized by a lot of menus, making it challenging for users to visually comprehend the functionality of each page.
After
The Navigation Bar and Footer have undergone a redesign, introducing additional functionality while ensuring a less cluttered appearance and incorporating more interactive feedback for users.
C. Secondary Navigation Menu - Dashboard
The user interface now features interactive feedback, improved iconography, and strategic placement, resulting in a cleaner design.
Before
The existence of a dual navigation system in consecutive rows led to confusion among some users.
After
The dashboard menu system has been restructured with a vertical alignment, creating a more visually comfortable experience for users. The increased white space and adoption of a more universal design contribute to this improvement.