WORK

ABOUT

RESUME

Backtester: A Tool for Investors to Test Stock Screener on Real Historical Data

Backtester: A Tool for Investors to Test Stock Screener on Real Historical Data

About Project

I designed the Backtester feature from concept to launch, collaborating closely with a financial analyst, front-end engineer, and back-end engineer to balance between development feasibility, business goal and user experience.

I designed the Backtester feature from concept to launch, collaborating closely with a financial analyst, front-end engineer, and back-end engineer to balance between development feasibility, business goal and user experience.

My Role

My Role

  • Conceptualized and defined scope through competitive analysis and stakeholder discussion

  • Iterated designs through 4 sprints (2 months)

  • Collaborated with a front-end and back-end engineer to ensure feasibility

  • Delivered high-fidelity mockup, prototypes, and micro-interaction for new components

  • Conceptualized and defined scope through competitive analysis and stakeholder discussion

  • Iterated designs through 4 sprints (2 months)

  • Collaborated with a front-end and back-end engineer to ensure feasibility

  • Delivered high-fidelity mockup, prototypes, and micro-interaction for new components

Who I worked with

1 CEO / Back-end Engineer

1 Front-end Engineer

1 Financial Analyst

1 UX/UI Designer (Me)

1 UX/UI Designer (Give design critique)

Company

ValueGlance

Tools

Figma

TEAM

1 CEO / Back-end Engineer

1 Front-end Engineer

1 Financial Analyst

1 UX/UI Designer (Me)

1 UX/UI Designer (Give design critique)

COMPANY

ValueGlance

TOOLS

Figma

Impact

Impact

55%

55%

Feature adoption

Feature adoption

Positive feedback from active users

Positive feedback from active users

“The backtester alone is worth the price! ValueGlance’s screener and backtesting tools gave me the confidence that my approach can withstand market cycles. Slow and steady wins the race—this tool makes it effortless!”

“The backtester alone is worth the price! ValueGlance’s screener and backtesting tools gave me the confidence that my approach can withstand market cycles. Slow and steady wins the race—this tool makes it effortless!”

Alfred C.

Alfred C.

from San Francisco Bay Area

from San Francisco Bay Area

Support the internal financial analyst to develop 4 sample strategies

Support the internal financial analyst to develop 4 sample strategies

“Really good job on backtester. It's really cool and professional!“

“Really good job on backtester. It's really cool and professional!“

Internal financial analyst

Internal financial analyst

Context

Context

After User Research

After User Research

Facing low active users and conversion, I led user research using survey and usability interview, generating insights that shaped the redesign priorities across four key features and informed the business decision to plan a new feature.

Check out User Research Project

Customer Journey

Customer Journey

PROBLEM STATEMENT

PROBLEM STATEMENT

"Long-term investing takes time to see performance.

How can I tell it's working?"

"Long-term investing takes time to see performance.

How can I tell it's working?"

What did users and internal team say?

What did users and internal team say?

Active User

Active User

If there's a way to go back in time and show someone following the same logic if they invested 10 years ago, what’s their investment would have grown to now, and that'll be great, like a proof of concept.

If there's a way to go back in time and show someone following the same logic if they invested 10 years ago, what’s their investment would have grown to now, and that'll be great, like a proof of concept.

Active User

Active User

The backtester might give me more confidence in using this strategy.

The backtester might give me more confidence in using this strategy.

Internal Marketing Staff

Internal Marketing Staff

I think the backtester is gonna help the customers to trust us more. And also it's gonna be helpful for the user to make the decision

I think the backtester is gonna help the customers to trust us more. And also it's gonna be helpful for the user to make the decision

Solution

Solution

A tool allowing users to know how much they would have earned in the long term by following ValueGlance's investing strategy using actual historical prices. In financial tools, this is commonly referred to as a backtest.

A tool allowing users to know how much they would have earned in the long term by following ValueGlance's investing strategy using actual historical prices. In financial tools, this is commonly referred to as a backtest.

COMPETITIVE ANALYSIS

COMPETITVE ANALYSIS

Look into existing backtesting tool

Look into existing backtesting tool

To get familiar with the tool, I tried on existing backtesting tools. From there, I learned two problems:

Problems

PROBLEMS

  1. The learning curve is steep, with many complex fields to fill in at one time.

  1. Most tools require users to already have a portfolio in mind, e.g. the exact number of assets, before they can start a backtest.

Reduce steps and fields

Reduce steps and fields

Define Goals

Define Goals

From competitive insights,

How might we make backtesting approachable for beginners without requiring them to set up a portfolio or enter any metrics?

How might we make backtesting approachable for beginners without requiring them to set up a portfolio or enter any metrics?

From business problem,

How might we build confidence in ValueGlance’s simple long-term investment strategy through the backtesting experience?

How might we build confidence in ValueGlance’s simple long-term investment strategy through the backtesting experience?

SOLUTION

SOLUTION

Link Existing Stock Screener Feature with Backtesting Feature

Link Existing Stock Screener Feature with Backtesting Feature

Allow users to run backtests directly from curated screener results. This eliminates setup friction while simultaneously building confidence in the Screener by showing its actual historical returns.

FIRST MVP

FIRST MVP

Start with Basic

Start with Basic

Collaborate with Stakeholders to Define Feature Scope & Iterate User Flows

Collaborate with Stakeholders to Define Feature Scope & Iterate User Flows

I collaborated with the back-end engineer and financial analyst to discuss the functionalities while taking technical feasibility into consideration.

VER. 1

Allow users to select companies into their portfolio

TECHNICAL CHALLENGE

Selecting companies during backtest setup requires loading a very large dataset on a single page, which would slow performance. Moreover, allowing selecting company adds complexity to editing this dataset on the back end.

VER. 2

Remove the company-selection step while allowing users to explore company earnings rankings on the results page

TECHNICAL CHALLENGE

From back-end, I learned that backtest takes about 5 minutes to process. In this way, users may not stand the wait and leave the page, especially for web page.

VER. 3

Separated backtest creation flow from backtest result page

STAKEHOLDER FEEDBACK

From Financial Analyst, I learned that running backtests is often repetitive, as users may run multiple tests with only subtle changes in settings to refine their strategy. They need a clear way to distinguish each backtest job.

VER. 4

Add a step to give a name to differentiate from each backtest

Creating First MVP

  • Step 1 - Select Screener

    Users choose to backtest the performance of the sample screeners or the custom screeners they created on the Screener feature.

  • Step 2 - Settings

    Users set up rebalancing frequency, time range, and backtest name.

  • Step 3 - Backtest Processing

    Tell users that the backtest is processing and direct users back to the homepage or backtest other sample screeners.

  • Step 4 - Access Backtest Result

    Access backtest result from the Backtester homepage.

  • Step 5 - View Backtest Result

    View backtest result

  • Step 1 - Select Screener

    Users choose to backtest the performance of the sample screeners or the custom screeners they created on the Screener feature.

  • Step 2 - Settings

    Users set up rebalancing frequency, time range, and backtest name.

  • Step 3 - Backtest Processing

    Tell users that the backtest is processing and direct users back to the homepage or backtest other sample screeners.

  • Step 4 - Access Backtest Result

    Access backtest result from the Backtester homepage

  • Step 5 - View Backtest Result

    View backtest result

Iterations

Iterate with Internal Feedback & New Features

  • Step 1 - Select Screener

    Users choose to backtest the performance of the sample screeners or the custom screeners they created on the Screener feature.

  • Step 2 - Settings

    Users set up rebalancing frequency, time range, and backtest name.

Internal Feedback

"While deciding on backtest settings and backtest name, I need to go back to step 1 to review my screener choice."

"While deciding on backtest settings and backtest name, I need to go back to step 1 to review my screener choice."

from Internal Financial Analyst

BEFORE

Step 1 separated from Step 2

SOLUTION 1

Show selected screener info at Step 2

TECHNICAL CHALLENGE

From Back-end engineer, this solution requires loading screener info including filter data, with extra data loading efforts.

FINAL SOLUTION

Combine step 1 and step2

Expand the card to see

Use dash line style besides color difference to differentiate S&P 500 & sample strategies

Feature Expansion

"Provide sample strategies to help new users get started fast and feel confidence in ValueGlance's strategy."

"Provide sample strategies to help new users get started fast and feel confidence in ValueGlance's strategy."

01

How we showcase sample strategies?

How we showcase sample strategies?

  • Mobile web

  • Web

  • Mobile web

  • Web

Ver. 1 -> Ver. 2

Challenge

Reorganized benchmark controls for better scalability and mobile usability

More chart controls introduced

Solution

Redefined S&P 500 to be benchmark strategy

With more chart controls introduced, I moved the S&P 500 switch to the strategy section. This made the layout more organized, improved usability on mobile, and kept it scalable for adding future benchmarks.

Compare CAGR performance between sample strategies and market benchmark

Use dash line style besides color difference to differentiate S&P 500 and sample strategies

02

Add entry points to this page

Add entry points to this page

First Entry

Daily Rotated Strategy Display on Dashboard

Daily Rotated Strategy Display on Dashboard

Rotate a featured strategy daily to drive return visits

Use dash line style besides color difference to differentiate S&P 500 & sample strategies

CTA buttons to guide users toward 'Strategy Page' & Screener Feature to apply the screening strategy

Use dash line style besides color difference to differentiate S&P 500 & sample strategies

From Founder Feedback

Make the informative card more prominent

Should we create a brand new component for this feature?

To keep the brand consistent, I decided to reorganize the Backtester homepage and created a 'Explore our Strategies' section.

Show 2 sample strategies with CAGR to draw attention and encourage clicks.

Organize the previous ‘About Backtester’ section into FAQ to earn more space and improve section hierarchy.

  • Ver 1

    From Founder's Feedback

    Make the informative card more prominent

    Should we create a brand new component for this feature?

  • Ver 2

    To keep the brand consistent, I decided to reorganize the Backtester homepage and created a 'Explore our Strategies' section.

    Show 2 sample strategies with CAGR to draw attention and encourage clicks.

    Organize the previous ‘About Backtester’ section into FAQ to earn more space and improve section hierarchy.

Ver.1

Ver.2

Second Entry

Explore Strategy Section on Backtest Homepage

Explore more projects

Explore more projects

Let's connect and collaborate!

Let's connect and collaborate!