top of page

Trader's Journal: Notes

Aid users in making quick sound decisions when trading by symbol annotations 
Seamlessly integrate a Notes feature into the NextGen IBKR Desktop application, empowering traders to document insights and strategies within their trading workflow.

DURATION

4 weeks

AREA OF WORK

User Experience Interaction Design

YEAR

2023

TEAM

Anjali Bakliwal
Austin Eder (UX Designer)
Steven McClenning (UX Manager)

How I added value

Group 8.png

Championed User Accessibility: 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.

Modernized User Experience: Leveraged the latest design system to custom-build the new UX for the notes feature, fostering a consistent and modern user experience.

Expanded Project Scope: The success of the desktop notes feature led to its expansion onto the mobile app, further increasing its reach and user benefit.

About the company: 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.

tws-mosaic-laptop.jpeg

Target Audience

Users of IBKR Desktop Application; Individual users and investment firms

Trader's Journal.png

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

Process_Notes.png

Ideation

MULTIPLE ENTRY POINTS - MORE ACCESSIBILITY

Originally, accessing notes required navigating to a specific location within the app. To streamline workflows and empower quicker decision-making, we 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".

TJ_EntryPoints.png

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, we 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.

OldDesign.png

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.

Column_AllNotes - Simple.png

2 - COLUMN

PRO: Ability to switch between notes easily

CON: Different symbols are not distinguishable

Column_AllNotes - SortedBySymbol - Modal.png

2 - COLUMN + 1 OVERLAY MODAL

PRO: Different symbols are easily distinguishable

CON: Not easy to switch between notes

Column_AllNotes - SortedBySymbol - Edit-Click.png

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

Rows_AllNotes – Clicked.png

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

Graveyard – Edit Options – 1.png

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.

Horizontal_WL – Click - Filtered Selection.png
Horizontal_WL – Hover-1.png
Horizontal_WL – Select.png

Final Component Interactions

NAV BAR

WATCHLIST OR TABLE VIEW (Last Modified Tooltip)

TRADE ORDER PLACEMENT TICKET

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.

STOCKS - Notes – Screenshot – 1.png
STOCKS - Notes – Widgets.png
Portfolio Custom – 1.png
iOS_AllNotes_Filter Annotated.png
iOS_Notes_Edit Notes.png
Trade Launchpad.png
Home.png

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

STOCKS - Notes – Widgets-1.png

Accessing notes directly from the designated symbol page. It is added as a widget where the "Last Modified" message will be visible

Reflection and Learning

 

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.

bottom of page