My role
UX/UI Designer
Job summary
As a UX/UI Designer at Spire Trading, I investigated, analyzed, designed, developed, implemented, operated, and managed information systems based on computers and related technologies using specialized knowledge and professional judgment. Specifically, I worked with development, marketing, and creative teams to build a mobile experience for day traders.
Challenge
Day traders often face several challenges, including high levels of stress due to the fast-paced nature of the market, difficulty in making quick and accurate trading decisions, and difficulty in finding reliable and timely market information.
Traders need to receive constant feedback related to events affecting their accounts. Some portion of the mobile app needs to be reserved for constantly giving an update about the trader's profit and loss, order status, and other events that can happen at any time.
Hypothesis
1. Add real-time market data and quotes that would allow traders to stay up-to-date on the latest market movements and make quick trading decisions.
2. Help traders make informed decisions and manage their trades effectively by adding customizable watchlists and alerts: This would allow traders to monitor specific stocks, indices, or other securities and receive notifications when certain price or volume thresholds are met.
3. Add order management capabilities that would allow traders to place, modify, and cancel orders quickly and easily.
Discovering and understanding the problems
The very first thing I've done after learning the day trading topic and understanding the problem I've analyzed the quantitative data available. Also, I conducted research interviews with our stakeholders (day traders, marketers, sales, and directors) to uncover any pain points that they might have discovered. The interviews with existing users were set and completed to get insights on any pain points of the users and to uncover the most evident blockers on their journey within the Spire Trading app.
My upfront research covered:
- User's goals and needs
- Pain points and blockers within the current flow
- Company growth goals and KPIs
Understanding "WHO"
Day traders - people who buy and sell financial instruments, such as stocks, currencies, and derivatives, within the same trading day. They typically hold their positions for a few hours or less and often use technical analysis and other short-term trading strategies to make decisions. Day traders can be professional traders who work for financial institutions, or they can be individual investors who trade on their own. Day trading can be a high-risk and high-stress activity and requires a significant amount of time and dedication to be successful. Day traders usually have a trading plan with strict rules and they stick to it, they are also willing to take more risks than other types of traders.
Based on the user persona I gathered important insights into demographics, clear goals, habits, behaviors, needs, and wants. It helped me a lot to get a better understanding of who our users are, and what they want and need.
Core Pillars
These three pillars of the users' journey helped me constantly stay on track with the results that new solutions should bring to the product and help day traders reach their goals.
User's Pain Points
- There is no way to view the trading summary for the day.
- Difficulty in finding reliable and timely market information.- Difficulty in making quick and accurate decisions.
- Risk of overtrading - day traders may be tempted to overtrade, which could lead to significant financial losses.
Opportunity Assessment
I took the extra step of categorizing these problems into broader Epics to provide the stakeholders and engineers with visibility into the key areas of the platform that needed to be addressed from a usability standpoint. This not only helped to prioritize usability issues in order of need but also helped to shape the product roadmap for the quarter. The outcomes that represent the strongest score will be those that receive the HIGHEST importance and LOWEST satisfaction.
Creating concept
Based on the problems identified above, I worked towards addressing these issues with potential solutions:
- Create a trading summary that would allow day traders to see all currencies that they are trading and securities related to these currencies.
-Quick and efficient way to stay notified about all updates that are happening on the day trader's profile.
Competitor analysis
Competitor analysis helped a lot to understand the market, identify opportunities, and make informed decisions about how to help traders solve their pain points.
User Flow
The user flow is created by mapping out the different pages or screens that a user will encounter, and the different actions that they will need to take in order to navigate through the interface. This process helped to ensure that the user's experience is seamless and efficient.
Wireframing the solution
I created rough mockups of the P/L section and used them to help define the layout, navigation, and overall structure of the interface. Lo-fi wireframes were made to help me and stakeholders quickly and inexpensively explore different design options and test different ideas. Lo-fi wireframes were extremely useful for communicating the design concept to stakeholders, developers, and other members of the team, as they provide a clear, high-level view of the interface's structure and functionality
After reviewing and approving the Lo-fi wireframes I worked on detailed, polished mockups of a website's UI. Hi-fi wireframes were made to help me and stakeholders to visualize the final design, and they provide a clear understanding of how the interface will look and function before development begins.
I created a prototype and used it for getting feedback, validating design decisions, and getting buy-in from stakeholders. Additionally, a prototype was used to simulate the final product and test its usability. By allowing users to interact with the prototype, I gathered valuable feedback on how easy the interface is to use and identify any areas where users may encounter difficulty. This feedback was used to make adjustments to the design and improve the user experience. The prototype was also used as a guide for developers during the development process. By providing a detailed view of the interface's structure and functionality, the prototype helped developers understand the design intent and ensure that the final product meets the design specifications.
No stocks trading
The Unrealized Profit and Loss is indicated as $0, providing a clear and concise representation of the trader's current status. The absence of a button on the right side and a timer tape offers a clean and uncluttered interface, allowing the trader to focus on other aspects of the platform. The presence of a dropdown handler provides the trader with the ability to access a dropdown menu, offering additional information and options as needed.
Stocks are trading
The Unrealized Profit and Loss is displayed as a numerical value of $#, providing a clear and concise representation of the trader's current status. The presence of a button on the right side, which provides an overview of all traders' positions, offers an additional level of information and accessibility. At this stage, the timer tape is not displayed, offering a clean and uncluttered interface. The dropdown handler, which is displayed, provides the trader with the ability to access a dropdown menu, offering additional information and options as needed. This design offers a professional and intuitive user experience, allowing the trader to quickly and easily manage their portfolio and make informed investment decisions.
Under the loss allowance
The Unrealized Profit and Loss has turned red, indicating that the account has gone below the loss allowance. The button on the right side continues to display all traders' positions, while the timer tape appears and starts to fill with red color from right to left. This visual representation of the account's current status serves as a clear indication of when the trader will be disabled from trading for the remainder of the day. The presence of a dropdown handler allows the trader to access a dropdown menu at any time, providing additional information and options as needed. This design offers a professional and intuitive experience, allowing the trader to quickly and easily understand their account status and take appropriate action.
Disabled from trading for the rest of the day.
The Unrealized Profit and Loss for all traders' positions is indicated as $0, and there are no ongoing positions present on the right side of the header. The timer tape, which is typically used to display real-time updates, is filled with a red color and is no longer in motion. The presence of a dropdown handler provides the trader with the ability to access a dropdown menu, offering additional information and options as needed. This visual representation of the trader's current position and activity, combined with the ability to access additional information through the dropdown menu, creates a professional and streamlined user experience.
Trading summary
The header presents a comprehensive overview of the trader's total volume, profit and loss, and fees across all traded currencies. The currencies are displayed in alphabetical order and the total P/L, along with fees for each currency, are calculated and presented separately. A dropdown button is available to the right of each currency, providing detailed information on the total P/L and fees for all securities associated with that currency. The trader has the ability to view an unlimited number of currencies and can effortlessly scroll to load more, as needed. The dropdown can be easily closed by swiping up, utilizing the intuitive gesture-based navigation. This design offers a streamlined and professional experience for the trader to manage their portfolio.
Trading summary and securities
When the trader clicks the right-side button to expand the currency bar, a comprehensive list of all securities related to that currency is displayed in alphabetical order. The list includes the profit and loss, volume, and fees for each security, providing a comprehensive overview of the trader's investments. The intuitive gesture-based navigation allows the trader to easily close the dropdown by simply swiping up, utilizing the handler located under the navigation bar. This design offers a streamlined and professional experience for the trader to effectively manage their portfolio and make informed investment decisions.
Results & takeaways
I have created a dedicated section for day traders to enhance their ability to stay informed about their account activity. This section provides real-time information on the Unrealized Profit and Loss, allowing traders to closely monitor their account status and avoid exceeding their day allowance.
Additionally, I have implemented a dropdown menu with a comprehensive trading summary. This feature presents all currencies that the trader is trading today, organized in alphabetical order, along with the total Profit and Loss and fees for each currency and its related securities. This design offers an efficient and professional way for day traders to stay informed and in control of their investments.