I was responsible for revamping the stock instrument page. The goal of this project was to align the new ETF page with the stock page while making sure the information was well presented.

ETFs (Exchange traded funds) are one of the most traded instruments on Nordnet right after stocks and mutual funds. The number of trades occurring on ETF are slowly passing the number of trade in mutual funds, especially in Finland and Denmark. Since ETFs are exchange traded, users can buy and sell them immediately rather than waiting for the mutual fund purchase for a few days. 

Insufficient data points

The current ETF page on the website is using the same template as the mutual fund instrument pages. A lot of data points needed for trading ETFs are missing.

Too much white space

Investors like to see all the information they want at a glance, they do not like to scroll. They want to be able to quickly make decisions on whether to buy an instrument at a specific price. However, in the current page layout, there is a lot of empty space at the top of the screen, which makes users need to scroll down the page to look for the information they need.

I ran a workshop with traders and customer service to fully understand the needs and requirements of our customers. The workshop was separated into 2 main sections. First, participants were asked to build their ideal ETF page and explain the thoughts behind their designs. Second, I printed out ETF pages from other websites to analyze and understand what our participants liked and disliked about them.

These were the main takeaways I took from the workshop:

• • • Missing spread in the header
    • The exposure is very important that’s one of the first thing they look for in an ETF
    • Doesn’t want the order book and the latest trade in the first page
    • Want a second tab to put less important information
    • The pie chart is meaningless in allocations

To make sure we considered all of the different states of the instrument page cover, I created a flowchart to understand the ways users could access the instrument page and what state they expected the instrument page to be in when they clicked on different elements on the site.

To keep the consistency between the stock instrument page and the ETF page, I am going to reuse most of the components between the two pages. I skipped creating wireframes by using UI components directly from the stock pages to quickly explore how the page would look like. I have created a couple drafts of the ETF page based on the data from analytics and the main takeaways from the workshop. I then synced with my product owners to choose the two of my drafts for user testing. Based on the results, we modified the design and repeated the user testing. In the end, I created over 10 iterations of the page to come up with the final solution that all stakeholders were happy with.