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.

### 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

User journeys

### 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.


### 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

### 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

Development

### 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

First trade

Trade execution

Second time

### 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.

Trading scans

Traders are increasingly using automated trading, whereby the trader defines rules by which a trading platform automatically trades on their behalf.

Because of this, as part of their new mobile trading platform, a brokerage wanted to explore possible ways of integrating automated trading.

_How could we empower users to become better traders through automation?_

### 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.
* Automated trading is an emerging tool becoming increasingly popular amongst (particularly experienced) traders
* Inclusion of any aspect of automated trading as a feature could therefore potentially provide a competitive advantage and increase trading volume through the brokerages’ platform
* The project timeframe was 4 weeks.

### Process

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



1. Desk research including survey data, and talking to sales and support staff
2. Performed competitor analysis on existing implementations of automated trading on the market
3. Interviewed SMEs and stakeholders to better understand the use for automated trading, good third-party implementations and where they fit into the user’s workflow
4. Mapped out user journeys and flows
5. Iteratively prototyped possible solutions
6. Tested and refined prototypes with SMEs and other designers

### Research

For this project I did some desk research into interest in automated trading and existing automated trading tools and techniques.

My desk research included looking into pre-existing survey data. From survey data I found:



* Data showed 30% of trades placed using some kind of automated strategy
* A lot of interest in automated trading, but not as much uptake

I found there were a number of existing tools and techniques that provide some or all parts of automated trading including:



* **Expert advisors**
* **Backtesting**
* **Copy-trading**
* **Signals**
* **Screeners**

I spoke to several SMEs and stakeholders inside the company, including people from sales and support and those with trading experience and knowledge. They raised some key issues:



* **Scaling:** automated trading allows traders to scale their trading strategy and trade 24/7 across more markets
* **Risk:** with scaling comes massively increased risk - both losses and wins can be magnified
* **Strategy:** a lot of traders don’t necessarily have a trading strategy, making it hard for them to automate. Professional traders will have a well-defined strategy.
* **Micro-management:** traders often like to micromanage their trades; they want to be in control
* **Testing:** testing the strategy over time and refining is critical
* **Emotion:** automation takes emotion out of the equation, allowing more rational trading behaviour

Ultimately, automated trading allows traders to:



* Scale their trading “system” to operate 24/7, across more markets without manual effort
* Take emotion out of the equation

However:



* There are massive risks to both the trader and the business of full automated trading, as both losses and gains are scaled. Inexperienced traders would incur massive losses, and the business could potentially be on the hook for losses incurred using their system.
* Traditionally automated trading has required programming ability, which limits its growth

Competitor analysis showed:



* Most existing automated trading tools had a steep learning curve and complex interface
* The more successful tools greatly reduce the learning curve by having conversational interfaces where you build an automation from simple building blocks

Research notes

Competitors

### User Cohorts

From my research and discussions I decided there were three primary cohorts of users relevant to automated trading:



* **Traders with a well-defined strategy**: they have a written trading plan that they stick to religiously, along with a strict risk management strategy. They only make changes to their trading plan derived from post-trade analysis.
* **Traders with a loosely-defined strategy:** they may or may not have a trading plan written down; the key thing is that they are flexible and apply their own rules (if any) subjectively. They may or may not do post-trade analysis and may not have a comprehensive risk management strategy.
* **Copy traders:** some automated trading tools allow you to automatically duplicate trades performed by other traders. These traders are not actively engaged and have no interest in improving their own trading ability.

Journeys

### Ideas

Based on what I had learned, I decided that full automation was far too risky, both for the individual trader and for the business. 

I ultimately decided the three key pillars of my solution should be:



1. **Enable traders to be alerted when opportunities relevant to their strategies occur**
2. **Enable traders to quickly and confidently make a discretionary trade from an opportunity**
3. **Help traders to understand, formalise and refine their trading strategies**

With that in mind, I came up with some broad ideas to explore, including:



* **Discovery:** Enable users to search for instruments to trade using complex queries which could be saved and reused later, with alerts, and projections past on past performance
* **Algorithmic ordering:** allow users to define complex criteria for when to buy or when to sell a specific instrument.
* **Copy-trading:** allow users to publish their trades, and other users to copy them
* **Pre-defined expert advisors:** provide a suite of expert advisors that traders can use rather than making their own
* **Custom signals/alerts:** allow users to define their own signals/alerts, providing their own criteria for which they will get alerted to potential opportunities to trade

### Development

I chose to disregard **copy-traders** as a cohort from consideration as they are not engaged traders, not particularly interested in becoming better traders, and their use case isn’t really relevant to a mobile app (they are hands-off). Furthermore, copy-trading requires a community which would be hard to build.

I ultimately decided to go with a conservative solution of:



* Allowing the trader to define custom alerts they can then trade from
* Projecting potential trades and providing theoretical performance stats based on those user-defined alerts

Users could therefore start thinking strategically about trading and see what the outcomes would be on paper without any risk. Because of the relative simplicity, it wouldn’t require any programming ability, therefore eliminating a major barrier. Over time this solution would create a passive feedback loop, slowly encouraging them to become better traders.

I iterated on this concept, and tested wireframe flows of this concept with SMEs and stakeholders I previously canvassed, as well as other designers in my team. I used their feedback to further iterate and improve it.

Key design problems I had to overcome were:



* **Information architecture:** as the lead designer initially intended for there to be some kind of section in the top-level navigation for managing any notifications, I extended that to manage custom user-defined alerts
* **User creation of alerts:** Criteria for alerts would be based on price changes or indicator changes. These can be chosen by the user to be displayed on charts on the instrument screen, where they can also start a trade. As such, it made sense for the user to be able to create an alert and set the criteria on those charts from the same screen.
* **Tracking performance of alerts:** I chose three key stats for tracking the theoretical performance of each alert - number of trades, win ratio, and profit and loss - because these stats would make it easy for a user to understand performance over time. I provided visual indicators to make them easy to understand at a glance.

### Solution

As a **trader with a loosely defined strategy**:



* When you view the details of an instrument with an eye to trade at some point in future, you can select and view different indicators that may affect your decision to trade
* You can choose to be alerted in future when conditions you choose are met
* When you receive such an alert you can jump to the instrument detail screen and quickly make a discretionary decision to trade or not
* At any time you can view active alert rules from a top-level alerts section in the app - from here you can see simple statistics that tell you how successful your historical trades are for each alert
* You can turn successful one-time alerts into recurring alerts and refine the conditions over time to increase the performance of the strategy

As a **trader with a well-defined strategy:**



* You can jump straight to the alerts section and define alerts for entire categories of instruments, so you can just trade off of alerts
* With performance statistics for the trades you make off the back of these alerts, you can reduce effort required in post-trade analysis
* You can directly compare the performance of different strategies (alerts), building confidence and certainty in your successes
* You can tweak and refine your strategies over time, adding and changing conditions as necessary to improve performance of the strategy or strategies

Flows

### 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. **One-time alerts and basic alert management:** Test the effectiveness of this feature for all user cohorts and assess its usefulness. Feedback from the use of alerts would help prioritise further development. The workflow for creation of alerts should be subjected to through user testing to find any issues.
2. **Recurring alerts:** Need to test how traders might use these and integrate them into their workflow.
3. **Alert performance history:** Assess how traders might use this to inform decision-making.

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

View instrument

Create alert for instrument

Edit alert condition

Alert notification

Alert triggered

Manage alerts

Create new alert

View alert history

View alert trade history

Automated trading

In partnership with [Xequals](https://xequals.co.nz), I worked a cross-platform mobile game called State Asset Wars. Inspired by the popular trading game Dope Wars, it puts a dark satirical spin on national and international politics.

On this project I spearheaded the UX design, wireframing and prototyping and the screens. Functional prototypes were user tested with friends and acquaintances.

I was also responsible for development of the UI, and providing creative direction on that front.

Wireframes

Functional development

State Asset Wars

In the absence of any tools on the market fulfilling their needs, [EightyOne](https://eightyone.co.nz) got me to design and develop a time management tool for OS X.

Specifically, they needed a simple yet powerful tool which would enable each of their employees and freelancers to easily track their time worked against any given job and upload timesheet entries to WorkflowMax.

Through ongoing discussions with the future users, I created wireframes and iterated functionality and layout to suit their needs.

The final application makes it easy for users to track just the jobs that are relevant to them, even when working with other applications. With just two clicks they can track time against a job. The application adapts to the user’s workflow with a range of display and behaviour options, and automatically resolves network issues so the user does not need to worry about the backend.

ben cotton ux & ui

Native projects

Native projects

Trading scans

Automated trading

State Asset Wars

Prod Timer

ben cotton ux & ui