Designed a compact and intuitive portfolio visualizer on the web

Visual & Interaction Design




Currently, there is no free, intuitive, and well designed tool that allows amateur traders to visualize their portfolios’ growth charts, returns and key insights.

Seeing this as an opportunity space, I partnered up with a front-end developer to design a web app that can help young and new traders to quickly view how different portfolios performed in the past.




The rising of Robinhood and the likes makes investing easier and pushes the bar for user interface design in stock trading-related apps.

Apps like Acorn, Stash and Robinhood lower the learning curve for trading stocks, attracting millennials in the way that bigger players haven’t been able to. While less than 15% of Vanguard Personal Advisor customers are under the age of 50, a little over three-quarters of Robinhood users are under 36 (Barron’s).

This new wave of apps brought along a young generation of traders who demand tools that are compact and easy to use. Micro-interactions in a lot of these apps make the trading experience more engaging, keeping millennial, whose attention span are short, on the apps much longer. While there are a handful of trading platforms options, there aren’t any portfolio backtesting tools that meet their standards.

Notes: Backtesting a portfolio is going back in time with a current portfolio asset allocation and seeing how it performed recently and in the past. It is done by computer and graphs out its results over time. (Quora)

Screenshot of one of the most popular portfolio visualize tools that exist.



A few of the biggest problems we tried to solve are in regard to the information architecture.

Problem 1: Lack of information hierarchy

The current tools, i.e. Backtest, have a lot of information scattering in many different tabs. Although useful for professional portfolio analysis, average users might find it challenging to locate the key insights that they need due to the lack of information hierarchy.

Problem 2: Too much scrolling

The vertical structure requires a lot of scrolling and make it impossible to view most of the insights and the list of assets and graph simultaneously. This problem also contributes to the difficulty to locate any key insight or graph.

The design of two options for the info architecture. We asked our friends who are trading what type of information that would like to see first, before going with option number 2.

In order to solve these problems, I designed the website in a dashboard format that allows users to view the details of their portfolio (left column) and the rendered results (right column) simultaneously. As the users change the assets’ names and weights, the results will be rendered in real time. This minimizes the scrolling action and helps the users focus on the important results.



Ribbon is an intuitive web application that allows millennial traders to construct multiple portfolios and compare their growth charts, insights and annual returns.

Ribbon is designed to maximize the amount of key information on the screen and minimize scrolling and clicking actions. As a result, users can seamlessly switch from editing the portfolios to viewing different categories of insights and graphs.


1. Portfolio Editor

This is where users can customize their portfolios by adding assets and adjusting their weights for multiple portfolios. Each portfolio is assigned a color that corresponds to their respective graph in the Insights and Graph Sections. Capabilities include:

  • Hide or Show any portfolio in the Insights and Graph Sections (using the “eye” icon)

  • Minimize and Maximize portfolio (using the up and down arrows next to portfolio’s name)

  • Live render of portfolio in the Insights & Graph Section

  • Pie chart indicates the total weight of all assets in a portfolio

  • Change portfolio’s name

2. Insights Section

This section renders, in real time, the key insights of each portfolio added in the Portfolio Editor panel. These insights include, but are not limited to:

  • Standard Deviation: a measure of volatility

  • Max Drawdown: peak-to-trough decline of an investment during a specific period

3. Graph Section

The Graph Section renders the growth graphs of each portfolio added in the Portfolio Editor. Users can switch between the Growth Graph (line graph) view and Annual Return (bar graph) view.

This section comes with a customized Segment Editor that allows users to change the viewport of the rendered graph.

Interaction Design

Below are the design prototypes of the micro-interactions that will be built into the website:

Style Guide

Style Guide.png