PRODUCT DESIGN | UI DESIGN
Option Trade Builder tool for novice traders
Background
What was the problem?
With Fidelity experiencing an influx of new options-enabled accounts over the last 5 years, it made sense to further lower the barrier of entry to the complex world of options trading by providing a step-by-step wizard tool to guide novice options traders through building their very first options trades.
Vision & Methods
What were our objectives?
- Ensure that the visual design meets Fidelity’s design system standards for personal investors
- Offer an options trading experience different to services provided by our competitors
- Provide the best possible UX in order to exceed our KPIs
How did we get there?
We were tasked with creating a proof-of-concept for a new, educational walkthrough experience geared towards novice options traders, so our development process was Agile, and my design process was as lean as possible while providing sufficient design artifacts to support future design and development beyond the proof-of-concept.
What were my responsibilities?
- Wireframing and interaction design
- Produce high fidelity designs in Figma
- Graphic design for diagrams
- Copywriting and content creation
- Conduct creative quality assurance passes
Design
What was my approach?
We designed Option Trade Builder as a three-step wizard comprising of the three fundamental steps of placing an options trade: (1) choosing your strategy based on numerous factors, such as your sentiment towards a given underlying security, like “DIS”; (2) choosing your option contract(s) for the strategy; and (3) previewing and analyzing your trade before considering whether to execute the trade.
How did we design step one?
We wanted to distill the complex terminology of options trading—and trading in general—into more intuitive language for novice options traders. We chose clean and simple iconography to reinforce our content and guide our user towards potential options strategies based on their outlooks towards their selected underlying security. For more optimistic outlooks, in this example, we display three available strategies with accompanying descriptions and diagrams. A typical source of confusion around option strategies is the behavior of an option strategy as it reaches its expiration date and whether it is below, at, or above the strike price; to alleviate this pain point, we provided straightforward explanations of the profit/loss and risk potential for each strategy.
Live version of Option Trade Builder (as of February 2024); first step of the wizard.
How did we design step two?
Here, the user has chosen their strategy, so we display a simplified version of the option chain—stripping away the more complex data points—to guide the user towards selecting an option contract. Educational tooltips are available to explain options-specific terminology and how each parameter, such as expiration date, strike price, or moneyness (whether or not a contract is “in the money”) is best used to choose a suitable contract.
Live version of Option Trade Builder (as of February 2024); second step of the wizard.
How did we design step three?
We theorized that Option Trade Builder would be most effective if we were to reinforce the user’s learning experience by reiterating much of the educational content from the previous steps and support the user’s confidence by teaching them how to fundamentally preview an options trade before considering execution.
Live version of Option Trade Builder (as of February 2024); third (and final) step of the wizard.
Test & Learn
How did we validate?
By way of Qualtrix surveys, we monitored user feedback on a regular and frequent basis to determine how well Option Trade Builder was adopted by novice options traders and to identify usability issues and any missing or incomplete features. Analyzing this feedback in the Agile framework allowed us to design and build a more comprehensive yet elegant successor to Option Trade Builder that integrates more seamlessly into our research and analysis platform.