Optimizing the Watchlist: Reducing Errors and Cutting Task Time by 42%

Who are we?

Farabi Financial Group is one of Iran’s leading financial firms, offering services in trading, consultancy, financial technologies, and asset management. As one of the largest brokerages in the country, we serve over 3 million users. Our trading dashboard makes it easy for investors to buy and sell stocks while keeping track of their portfolios, market trends, and real-time financial updates. With a strong focus on technology and customer needs, we are always looking for new ways to improve and innovate in Iran’s capital market.

Design Begins with the Right Problem

To understand our current setup, it's important to look at how the watchlist works in our trading dashboard.

A watchlist in trade dashboards is a customizable feature that allows users to track specific stocks, assets, or financial instruments they are interested in. It helps traders and investors follow price changes, trends, and performance in real time without searching for each item repeatedly.

In our trading dashboard, the watchlist included a drop-down menu with categories for organizing stocks. One of these categories was "Portfolio," which automatically updated with any stocks the user purchased. However, users couldn’t manually add or remove stocks from the "Portfolio" category, nor could they delete the category itself.

By analyzing user behavior through Microsoft Clarity session recordings, we found several issues in how users interacted with the watchlist. These insights revealed gaps in the workflow and overall user experience, showing areas that needed improvement.

What's the problem?

• Error when adding stock to the watchlist

  Users couldn’t manually add or remove stocks in the "Portfolio" category, as it automatically updated with purchased stocks. Attempting to add a stock while "Portfolio" was selected caused an error, forcing users to switch to another category before adding new stocks. This disrupted their workflow and created confusion.

  
  

• The complex process for adding stocks to specific categories

  To add a stock to a specific category, users first had to select the desired category from a drop-down menu before adding the stock. This process was unintuitive and time-consuming.

  
  

• Unclear stock status

  Users couldn’t easily see which category a stock belonged to. To check if a stock was already in the watchlist or its category, they had to manually switch between categories. This lack of visibility was especially frustrating for users managing large watchlists, adding unnecessary complexity to the experience.

These issues made managing and organizing watchlists cumbersome, negatively impacting user satisfaction and efficiency.

Old flow

Success Metrics

To evaluate the impact of the redesign and ensure measurable improvements in user experience, we defined and tracked the following key metrics:

1. Error Prevention

   • Eliminate errors and reduce confusion in user interactions with the watchlist.

2. Improvement in Task Completion Time

   • Reduce the time users take to complete tasks in the watchlist.

3. Scenario Completion Rate

   • Ensure that all users successfully complete the usability test scenario, covering tasks such as adding, managing, and removing stocks.

Why Optimizing the Watchlist is Critical

The watchlist is an important part of any trading dashboard. It helps traders, investors, and portfolio managers keep track of the market in real-time. With quick access to price changes and important assets, users can spot opportunities and react faster. Since financial markets move quickly, a well-designed watchlist makes it easier to make faster and more accurate decisions. By improving the speed and usability of the watchlist, we help users make better decisions about buying or selling.

Usability test

We were aware of these problems, we wanted to ensure our assumptions were accurate and grounded in real user behavior. To validate our hypothesis, we conducted usability testing with users. This approach allowed us to gather direct feedback, confirm the issues, and prioritize solutions based on actual user needs.

Objective

The objective of this usability test was to evaluate the usability of the watchlist feature and validate our hypothesis regarding user difficulties. The goal was to identify friction points, improve user experience, and ensure that users could efficiently add, edit, and manage stocks within the watchlist.

Target Segment

For our usability test, we focused on pro users who actively use the watchlist feature. This segment was chosen because 60% of our users engage with the platform daily. If experienced users struggle with the watchlist, it would be highly detrimental to new users as well.

Goal

The primary goals of this usability test were to:

• Validate our hypothesis regarding the issues with the watchlist.

• Improve usability by addressing key pain points that hinder user experience.

Test Scenario

We created a scenario for 5 users to assess their interactions with the watchlist. The scenario included the following steps:

• Create a new watchlist category with "Z" name.

• Add the "KTSE" stock to "Z" category.

• Edit an existing watchlist (named "X") and update the category name by adding the number "8" to it.

• Purchase 1,000 units of the selected stock.

• Delete the stock from the "Z" category.

• Delete the "Z" category.

Result

"For users who failed to complete the task, a penalty time of 60 seconds was assigned to calculate the average task time."

Validate final problems

Based on the results, we validated several critical issues with the watchlist feature:

• Error when adding stock to the watchlist (Validated):
  Users faced errors because they did not select a new category. The default category (which couldn’t be edited) added confusion and led to mistakes.

  
  

• Unclear stock status (Validated):
  Users could not easily determine whether a stock was already in a particular category, making the experience frustrating and inefficient.

  
  

• Difficulties with deleting stocks (New problem):
  Users had trouble recognizing the delete icon, resulting in errors and incomplete tasks. Some users mistakenly clicked on the star icon instead.

  
  

• The complex process for adding stocks to specific categories (Validated):
  The process for adding stocks to multiple categories was long and cumbersome, causing frustration.

Competitors Analysis

A watchlist is an important feature for our industry even another industry. So we can use their experience with this feature. We checked and analyzed their watchlist and bookmark features. Also, we made a flow and video from their watchlist for analysis and check. We gathered some pros and cons points from our competitors.

UI Design

Wireframing

Now we know that there are some major issues with our watchlist. After finding the problems, we need to focus on solving them. I started with wireframing to solve this problem.

Collaboration and Design Iteration

To address the identified issues, I created wireframes and low-fidelity prototypes, which I shared with the team for feedback. We held a productive meeting where we evaluated the pros and cons of each design approach. After discussing the options, we selected the most promising prototype for further development. We then decided to refine this prototype and conduct another round of usability testing to validate the changes and ensure we were moving in the right direction.

UI and Prototyping

In the updated design, several key improvements were made to enhance usability:

• No error states: Users are required to select a category before adding a stock, removing any confusion caused by the default uneditable category.

• Clear stock status: Users can easily see the current status of stocks within their watchlist.

• Multiple category additions: Users can now add a stock to multiple categories without issues.

• Easy removal: Removing a stock from any category is straightforward.

• Instant category creation: Users can create new categories on the spot without disrupting their workflow.

These changes are meant to make the user experience simpler and smoother, fixing past problems and improving overall usability.

New flow

Post-Design Usability Test Results

After iterating on the design and testing a new prototype, we observed notable improvements in user experience:

• Error Rate: Reduced to 0%, as we eliminated error-prone paths that previously caused confusion.
  
  

• Scenario Completion: Achieved a 100% success rate, with all users completing the usability test scenario successfully.
  
  

• Task Time Reduction: Task completion time decreased by 42%, demonstrating the efficiency gains from the design changes.
  
  

• Stock Management Improvements: Users were able to:

  • Add stocks to multiple categories seamlessly, without unnecessary steps.

  • Easily understand the stock status in their watchlist, eliminating previous confusion.

Before

After

Conclusion

The redesign and iterative usability testing proved highly effective in addressing the initial issues with the watchlist feature. By focusing on simplifying workflows, reducing errors, and improving clarity, We were able to greatly improve the user experience. The error rate was reduced to 0%, and all users successfully completed the test scenarios, with task completion times improving by 42%.

The changes allowed users to manage stocks more intuitively, add them to multiple categories seamlessly, and better understand their status in the watchlist. These results not only validate the design improvements but also highlight the importance of continuous testing and iteration in building a user-centric product.

Learning Box

• Usability testing helps to find real problems and validate assumptions.

• Preventing errors is better than fixing them after they happen.

• Iterative design improves the final solution step by step.

• Working with a team creates better ideas and solutions.

• Balancing simplicity and flexibility is key to meeting user needs.