UX/UI Design
User Flows
Team
1 Designer, 2 Project Managers, 2 Developers, 3 QA
Year
2020-2021
Challenge
Goal
The vision was to build a platform that was capable of infinite customization across multiple displays
E*Trade Pro, a single-window desktop application containing modular tool windows
Power E*Trade, a web-browser based platform with a tabbed navigation of pages
First, Pro users participated in interviews and contextual inquiries to understand their needs and pain points throughout their trading day. This helped us understand these were users with very specific and varied approaches to reaching the goal of placing successful trades, and their needs required a platform that allowed complete customization over the trading experience. Users were asked to rank the features and tools on Pro that they valued most, helping us understand what aspects of the experience were most critical. We also asked if they had tried the Power E*Trade web experience, and what was missing that experience that kept them from moving to a more modern platform.
We also met with current Power E*Trade users, to find out what pain points in the web experience could be resolved by a more robust native desktop experience. After synthesizing these insights, they were used to drive and prioritize the product roadmap and our project milestones, as well as help define our design principles.
Goals
To reach financial freedom faster with a steady stream of trading income
Develop investment and trading skills
Become a better investor through hands-on practice
Get consistent above-average returns relative to his benchmark and grow assets over time
Needs
Powerful trading platform with up-to-date, streaming quotes
High-quality resources and quick support
Performance reporting
Pain Points
Disruption to trading routine
Unexpected changes to website features or trading platform, including site outages
Slow data or platform performance
Bad fills / order executions
Attitudes
Follows the market very actively
Sophisticated, systematic, and serious in investing approach
Information hungry - enjoys learning about new investment trends and strategies
Financial Profile
50 - 1,000 trades per quarter
$100k to $10M in brokerage account value
Instruments / strategies traded:
Stocks / ETFs
Futures
Options & advanced options strategies
Crypto
Users need to feel empowered to create the exact trading experience that suits their needs without constraints, with just enough bumpers in place for a smooth cohesive user experience.
In this domain, milliseconds can make the difference between a gain and a loss, so performance for our users is paramount. What we build has to be able to handle a large amount of realtime streaming data across several tools and displays, across all user devices.
While the mechanics and understanding of trading tools can be complex and intimidating, we want a platform that the user can set up and use without needing to read a lengthy user manual.
Anything that could slow a user’s momentum during the trading session should be removed as much as possible. Users shouldn’t have to continuously set up their order ticket preferences manually, or be blocked by error states.
Pages accessible via tabs for Chart, Watch List, and Positions in the Power E*Trade web experience
Independent tool windows for Chart, Watch List, and Positions in the Power E*Trade desktop experience
Power E*Trade web navigation bar
Power E*Trade desktop menu bar
Instead of using a single view with tabbed navigation to view pages, the desktop app launches single window instances from a tool menu
Testing sessions involved users creating trading setups that involved several other desktop programs
Ideate, Iterate, Prototype, Test
Next steps were to create a responsive chrome and filter bar for all the tool windows. On the web experience, the navigation bar included a global symbol search and account selector to navigate content on the platform pages. On desktop, we wanted to give users the ability to refine the symbol or account they were interacting with on a window-by-window basis instead of a global selection.
A new chrome was designed for each window that integrated the symbol search and/or account selector to drive the window content in addition to “table stakes” for independent windows - controls (close, minimize, maximize), as well as active/inactive states
We also designed a new “slim” version of the quote bar on trading pages and integrated it into the filter controls we inherited; then new responsive views were created for the quote bar and filters (web platform at this point contained little to no responsive behavior). Prototypes of the responsive tools were made to test, validate, and iterate with users that the overflow patterns were meeting their expectations.
Responsive behavior for the menu bar, chrome, and secondary nav bar
Impact
Designing the base experience of the platform and validating that we could make such a concept into a working reality was the foundation that we could build the rest of the E*Trade desktop experience on top of. While the platform was still very far away from achieving all of the features and tools that were necessary for a full public launch, having a working MVP in production allowed us to onboard internal and external alpha users to start interacting with the experience and making real trades.
While working on designs and prototypes for other features, we conducted feedback sessions (user interviews / contextual inquiries) with stakeholders and clients on the MVP experience. Having a working platform allowed us to gain valuable insights into the user journey that prototyping was not able to flush out, and this proved crucial as we continued to evolve on the next stages of our roadmap.
