Trader's Journal: Notes
Aid users in making quick sound decisions when trading by increased effeciency
Seamlessly integrate a Notes feature into the NextGen IBKR Desktop application, empowering traders to document insights and strategies within their trading workflow.
JUNE 2023
WHAT I DID?
I identified the need for increased accessibility to the notes feature and actively advocated for its importance to stakeholders. This resulted in the addition of more entry points, ensuring easier access for users. Additionally, I leveraged the latest design system to custom-build the new UX for the notes feature, fostering a consistent and modern user experience.
AREA OF WORK
User Experience
Interaction Design
TEAM
UX Designer (Me)
UX Designer
UX Manager
Impact: The success of the desktop notes feature led to its expansion onto the mobile app, further increasing its reach and user benefit.
INTRODUCTION
What is Interactive Brokers?
Interactive Brokers (IB) is a well-known and established brokerage firm that provides a wide range of financial services for both individual and institutional investors. The company brokers stocks, options, futures, EFPs, futures options, forex, bonds, funds, and some cryptocurrencies.
LAYING THE LAND
Target Audience
Users of IBKR Desktop Application; Individual users and investment firms
for Trader's Journal (The Notes Tool) on the IBKR Desktop Application
Only 1 entry point:
Nav Bar
Current UI
Notes feature directly empowered traders by giving them a tool to document their insights, strategies, and observations in real-time.
Why it matters?
Goal
Support seamless note viewing experience to view notes in one location and have multiple entry points to access them.
Empower traders to add insightful annotations to their portfolio, watchlist, and orders, providing a centralized hub for better trading decisions.
Comprehensive note management features, including the ability to view all notes, sort by symbol or keyword, edit, and delete in bulk.
PROCESS
IDEATION INSIGHTS
Initiated new entry points leading to more accessibility
Originally, accessing notes required navigating to a specific location within the app. To streamline workflows and empower quicker decision-making, I focused on user journeys and identified key moments where immediate access to notes would be valuable. This led to the addition of multiple ENTRY POINTS, allowing users to seamlessly switch/add to their notes directly from "the trade confirmation screen" and "the stock chart view".
Evolution not revolution - Combining the old and new
Trading is all about focus! I knew that drastically overhauling the notes feature could disrupt users' workflows. Instead, I opted for a subtle visual refresh that maintained the core layout and functionality. This ensured a seamless transition while laying the groundwork for future enhancements.
PROTOTYPES
*only covering the "Nav Bar" entry point to keep it concise.
For the main Notes feature modal (entry point from Nav Bar), we explored the 2-column vs. 1-column approach. There were several pros and cons for each but we decided to move forward with the bottom two and flush them out a little bit more.
2 - COLUMN
PRO: Ability to switch between notes easily
CON: Different symbols are not distinguishable
2 - COLUMN + 1 OVERLAY MODAL
PRO: Different symbols are easily distinguishable
CON: Not easy to switch between notes
1 - COLUMN (Used in Nav Bar view)
PRO: Easy to switch between notes as well and notes are sorted according to symbols and hence distinguishable. Good for direct Nav Bar "Notes" entry point
1 - COLUMN (Used in Table view)
PRO: Less information load, more compact for an overlay. More useful for entry from a table view
Edit mode options
FEEDBACK
We did two rounds of feedback/critique. From the feedback I was able to incorporate the different tools available on the edit screen like “attach link” or “upload image”. Additionally, changing the “Cancel”, “Delete” and “Save” buttons that looks more consistent with the rest of the components in the product.
FINAL DESIGN INTERACTION
Nav Bar
Watchlist table view (Last Modified Tooltip)
Trader order placement ticket
PROJECT SCALING
The project got bigger and moved to the Mobile Application as well
To provide traders with a seamless and unified experience, regardless of device.
CHALLENGES
Different Entry Points: Ensuring a consistent and intuitive path to access and interact with notes across these different entry points was a challenge.
Touch vs. Mouse: Designing for touch required larger, more accessible touch targets and different interaction patterns, especially when adapting for “Hover States”.
We made use of “Force Touch” to preview the last modified message on the table view.
By utilizing the existing “Pill/Button” Navigation option on the “Dashboard” page, we were able to add more entry points to the mobile application without having deep hierarchies
Added ability to screenshot any page and add the image to any note
Sorted notes from symbol and edit mode
Accessing notes directly from the designated symbol page. It is added as a widget where the "Last Modified" message will be visible
REFLECTION AND LEARNINGS
What made the integration of the Trader's Journal feature so meaningful to me was the opportunity to learn about the unique challenges and opportunities of designing for traders. Traders are a demanding audience, and they need tools that are both powerful and easy to use. I learned a lot about how to design for this specific user group, and I am confident that this knowledge will be valuable to me in my future career.