Background
I collaborated with stakeholders and the design team on user research, information architecture, and user journey mapping for Headway. I developed a unified design system across its mobile app, web app, and website, ensuring a consistent and seamless user experience, which helped guide the design to meet user needs effectively.
My role
Product Designer, UX Researcher, Visual Designer
Tools
Figma, Adobe Illustrator & Photoshop, Adobe After effect, Spline and Jira
Introduction
Tradline is a web-based trading platform designed to provide traders of all levels with a secure, intuitive, and efficient environment for managing financial activities. The platform offers comprehensive features such as authorization, a dashboard, wallet management, account handling, deposits, internal transfers, withdrawals, bonuses, a partner area, and access to trading through MetaTrader 4 (MT4) and MetaTrader 5 (MT5).
Challenges
Tradline addressed key challenges by focusing on security, simplicity, and functionality. The onboarding process featured password login, two-factor authentication (2FA), and biometric options for secure and easy access. A customizable dashboard served both novice and advanced traders, highlighting essential tools like account balance and portfolio overview while keeping advanced features accessible but unobtrusive.
Financial management was simplified with a wallet interface for real-time tracking of balances, deposits, withdrawals, and transfers. Integrated bonuses, like the $199 promotion, and a partner area for affiliates were easily accessible. MetaTrader 4 (MT4) and MetaTrader 5 (MT5) were seamlessly integrated for a smooth trading experience.
Approach
I conducted user research to create personas for beginner, intermediate, and experienced traders, ensuring the platform met diverse needs. The information architecture was designed for seamless navigation across the dashboard, wallets, accounts, and MetaTrader platforms. Starting with low-fidelity wireframes, I focused on structure and user flow, advancing to high-fidelity prototypes to refine the visual design. Usability tests helped gather feedback, refine features, and resolve pain points. The final design prioritized accessibility, security, and ease of use, with a clear visual hierarchy and real-time data integration to support informed decision-making.
Project goals
Create a user-friendly interface that makes it easy for beginners to trade while offering advanced features for experienced users.
Implement robust security measures like 2FA, biometric login, and transparent financial operations to foster trust.
Enable users to personalize their dashboard and manage both real and demo accounts seamlessly.
Ensure users can easily access MetaTrader platforms, making the transition between Tradline and MT4/MT5 smooth and frictionless.
User Journey
I start the user journey by researching user needs and behaviors through surveys, interviews, and usability testing. Engaging directly with users provides insights that guide the design process, ensuring the product meets their expectations.
Information Architecture
Crafting Headway’s information architecture ensures intuitive, efficient navigation by organizing content to match traders’ workflows, from market analysis to trade execution. Through research and feedback, we create a logical flow that empowers users to easily access tools and resources, enhancing their experience and building confidence.
Low-fidelity Prototype
After defining the information architecture, I created low-fidelity designs to translate concepts into tangible layouts. These served as blueprints for structure and functionality. Through feedback and refinement, I ensured alignment with user needs before moving to higher-fidelity iterations.
Design system
After developing low-fidelity designs, I created a comprehensive design system for Tradline, unifying principles for typography, color, iconography, and layout to ensure a consistent, accessible interface. This system serves as a central repository for reusable components, streamlining collaboration and speeding up development. It adapts to user feedback and trends, ensuring a cohesive and user-focused trading experience.
BRINGING IT ALL TOGETHER
At this stage, all that’s left is bringing all the elements together— the features defined in the initial mockups, the app layout derived from the sitemap, and the UI features according to the design system.
Dashboard
The dashboard provides users with an overview of their accounts and wallets, facilitating easy monitoring of their financial activities. Users have the option to create both real and demo accounts, enabling them to explore trading strategies risk-free. Additionally, users can access a $199 bonus and enjoy quick access to essential functions such as making deposits, opening trading platforms, and executing orders with ease.
Account
Users can efficiently manage their financial transactions by depositing funds, making withdrawals, and executing internal transfers between their wallet and account. Access to transaction histories allows for effective tracking of account activities, enabling users to monitor their financial operations seamlessly. Furthermore, users can initiate trades and engage in various other financial activities directly related to their account, enhancing their control over their financial portfolio.
Wallet
Users can perform various financial actions within their wallet, including depositing funds, making withdrawals, and transferring money. They also have the option to customize MetaTrader settings related to their wallet and access detailed account information, such as transaction histories, providing a comprehensive view of their financial activities.
Payment system
The payment system facilitates seamless deposits and withdrawals for users. Once their accounts are verified, users can conveniently deposit or withdraw funds using various methods, including bank transfers and digital currencies. This streamlined process ensures efficient and secure financial transactions tailored to user preferences.
Transaction history
Users can easily access their transaction history, including deposits, withdrawals, and internal transfers. They have the flexibility to filter their search by date, transaction type, account or wallet, and status, allowing for efficient navigation. By tapping on a specific transaction, users can view detailed information and take actions such as copying details, repeating the transaction, or contacting support for assistance. This intuitive interface ensures a seamless experience for tracking and managing financial activities.
Final Thoughts
The final design of Tradline met the diverse needs of its user base by combining simplicity and advanced features in a secure and intuitive environment. The platform provided seamless access to MetaTrader 4 and 5, and users could easily manage their financial activities, track account histories, and execute trades. Through thoughtful design and iteration, Tradline created a powerful, user-centric trading platform that facilitates efficient portfolio management and financial transactions.
Other Projects
Critical-Communication
TASSTA
Critical-Communication
TASSTA
Crypto Wallet
Cryptopio
Fintech
Tradline