Trading scans

An online brokerage was developing a mobile app for trading and wanted to integrate scans as a feature.

Scans are dynamically generated lists of trading instruments that meet specific criteria, reducing the need for analysis to find trading opportunities.

How could we help users to trade better through integrating scans?

Background

  • The brokerage previously supported third-party trading software platforms but now wanted to create their own mobile app to innovate and differentiate themselves.
  • I was in a team of several UX designers - my solution would need to adapt and fit into what was being designed by others. A design system was being collaboratively developed which facilitated prototyping.
  • The app would have a "discovery" section that offers personalised trading opportunities based on user behaviour and interests.
  • The project timeframe was 4 weeks.

Process

During the 4-week timeframe, the following steps were taken:

  1. Interviews with SMEs and stakeholders to understand the use of scans, third-party implementations, and user workflows.
  2. Desk research, including survey data and conversations with sales and support staff.
  3. Mapping user journeys and flows.
  4. Competitor analysis to assess existing scan implementations in the market.
  5. Information architecture mapping to determine the optimal integration of scans within the app.
  6. Iterative prototyping of potential solutions.
  7. Testing and refinement of prototypes with SMEs and other designers.
Trading data
Trading data
 
User journeys
User journeys
 

User Cohorts

Firstly, I interviewed three SMEs with experience in trading and supporting the brokerages' clients. I also looked at existing data from surveys of the customer base, and actual trades.

Survey data suggested traders predominantly traded based on statistical indicators and price movements, rather than qualitative data such as news and events.

I determined the target audience could be divided into two cohorts and mapped user journeys for each cohort based on different times or events in a trading day, such as at the start of the day, prior to opening a trade or after closing a position:

Experienced traders:

  • Know what to trade and how to trade
  • Tend to trade a limited number of markets or instruments they know the dynamics of
  • Are event-driven (looking for trigger points to trade)
  • Perform more post-trade analysis to make decisions and improve
  • May test their trading strategies against historical data
  • Want to be more efficient in their trading

Beginner traders:

  • Don’t know how to trade or what to trade
  • Tend to browse for opportunities
  • Tend to be driven by what is popular to trade
  • Micro-manage their trades and would spend more time in the app
  • Don’t do much, if any analysis
  • Want to learn and improve

From this I derived three primary goals for these two cohorts:

  1. To understand what scans mean and how they can be used to trade
  2. To see a variety of instruments that match their trading style
  3. To know what market movements are affecting the instruments they trade and when
Trading data
Trading data
 
View Figma
User journeys
User journeys
 
View Figma

Competitor Analysis

Competitors included trading platforms such as TradingView, and standalone tools for traders such as Autochartist. I also looked at automation tools such as Capitalise.ai.

Notably only some brokers offer scans as an integrated feature (likely due to varying usage by traders).

The competitor analysis also revealed the following insights:

  • Sophisticated trading platforms offer powerful and user-friendly systems for signals and alerts.
  • Existing scan implementations are often complex and jargon-heavy, making them less intuitive for beginners.
  • Some standalone products offer scans but are not comprehensive trading platforms.
  • Popular products for scans and alerts use conversational UI patterns, such as "If this, then that," found in mass-market consumer products.

Ideas

Based on the primary goals for users, several ideas were generated:

  1. Understanding scans: Show when instruments enter or exit specific scans on charts and provide contextual help to explain scan derivation and interpretation.
  2. Variety of instruments: Personalise scans based on the user's trading style, strategy, or timeframe. Provide popular scans or scans applicable to a wide range of trading styles for users who are unsure of their preferences.
  3. Market movements: Configure alerts for specific instruments entering or exiting scans. Display trading statistics for scans to show the user's past trading success with those instruments.
Information architecture
Information architecture
 

Development

The research and discussions with SMEs and designers led to the identification of key features for the solution:

  • Personalised view of scans: Beginner traders benefit from a customised view of scans, helping them navigate the trading landscape.
  • Contextual help for beginners: Provide in-app guidance to help beginners understand how to use scans and develop their trading style.
  • Configurable alerts for scan changes: Experienced traders can receive alerts when instruments enter or exit scans, minimising the need for constant monitoring.
  • Presentation of scan information before trades: Provide a compact set of tags indicating which scans an instrument has entered, allowing users to quickly understand market movements.
  • Historical market scan data: Traders benefit from understanding the historical context of scan data, allowing them to make future inferences based on them.

Different information architectures were explored for integrating scans, including:

  • Integrating scans into a front-page feed of content alongside news and editorial content, but this was found to be less suitable due to the continuous updating of scans and the varying relevance thresholds.
  • Treating scans as a special type of dynamic watchlist, but this conflicted with the user's mental model of watchlists as entirely user-controlled.
Information architecture
Information architecture
 
View Figma
User flows
User flows
 
Development
Development
 

Development (cont'd)

I iteratively prototyped solutions using prebuilt components and components I adapted. Iterative design and feedback addressed key issues:

  • Integrating contextual help and personalization: To provide a personalised view of discovery content, including scans, the app needs to understand the user's trading style. A skippable first-time experience was implemented, asking questions in plain language and offering links to contextual help content. Jargon was avoided in favour of intuitive nomenclature.
  • Displaying scan information: Instrument information screens were redesigned to include tags indicating the scans an instrument has entered, alongside other relevant data. Historical scan data was also included to provide context.
  • Organising scans and ensuring relevance: Scans are filtered based on the user's selected trading style, which can be changed at any time to explore different scans.
  • Navigating between scans: Experienced traders prefer instruments similar to their past trades, so the navigation allows quick jumps between related instruments within the same scans. Beginner traders can filter their view by specific markets of interest.
User flows
User flows
 
View Figma
Development
Development
 
View Figma
Discovery
Discovery
 
First trade
First trade
 
Trade execution
Trade execution
 
Second time
Second time
 

Solution

For beginner traders:

  1. The first-time experience asks simple, jargon-free questions about the user's trading interests and style. Supplementary content in the app helps them understand different asset classes and trading styles so they can more confidently trade.
  2. After completing the first-time experience, the customised scans tab provides relevant trading opportunities. The view is continuously refreshed, allowing users to open the app and view at any time.
  3. Users can easily expand or change scan filter parameters and learn more about asset classes or trading styles.
  4. Clicking on an instrument in the view enables trading, and users can set alerts for when the instrument leaves or enters specific scans to modify positions accordingly.

For experienced traders:

  1. Experienced traders can skip the first-time experience and start trading immediately.
  2. Content is automatically personalised based on their trading behaviour, improving workflow efficiency.
  3. The instrument detail screen displays the scans in which the instrument is included, allowing quick assessment of market movements without interpreting charts.
  4. The pulldown navigator provides quick access to other instruments with similar market dynamics within the scans.
  5. Alerts can be set for instrument scan changes to facilitate timely trading decisions without micro-management.
Discovery
Discovery
 
View Figma
First trade
First trade
 
View Figma
Trade execution
Trade execution
 
View Figma
Second time
Second time
 
View Figma

Next Steps

Although further development was not possible within the given timeframe, the concept can be broken down into milestones which could potentially be implemented and released independently:

  1. First-time experience: Test the effectiveness of this feature for all user cohorts and assess its ability to personalise content.
  2. Scans: Test different user journeys to ensure understanding and decision-making.
  3. Alerts: Assess the impact on workflow and determine additional information needed for informed decision-making.

Moderated user testing is recommended for each component to validate and refine the design with each cohort.

9 images