Back to home

Trading212 - Invest platform

Introduction

The assignment was about building a new platform interface solely targeted at users wanting to invest long term. From manual investing to creating long term auto-investment plans, e.g. Retirement, Large purchases, Home improvements etc. Therefore the interface vastly differs/should branch out from the current CFD(Contract for difference)-focused platform UI. The task is very complex and pivotal for the company’s future business targets/needs.

The best thing about working on this project was the scale, variety of challenges and problems to solve: from UI iterations to crafting a long term, sustainable product. Also our team decided to start from scratch, so there is little to none legacy limitations be it design/code base wise.

In this case study I will only be focusing on the 6 main tabs/pages, as I think that they show enough of the complexity and scale of the project, without being overbearing to the reader. 🙌

1. Home

My main idea was keeping the UI as similar as possible to the old one since I didn’t want to introduce new complex mental models to the users. With that in mind, the platform needed a long-overdue visual update, so many of the components in our design system underwent a style refresh in line with our new brand guidelines, and respectively their new purpose.

After discussing it with our head of design we concluded, that in our case a tabular like navigation is the most suitable.

I opted to keep the position of the instrument list, with the now always-visible curated watchlists. On the right of it I positioned the details of the selected field. For me, the 3 column composition brings an understandable logical structure with rather easy navigation through the parent-child elements. The user will be able to scroll each column separately. We noticed a small downside to the structure, in which the user can lose context of the instrument they’re currently using. The solution was the introduction of a scrolled state of the Instrument details.

Responsive design

A whole lot of whitespace

A whole NOT of whitespace

2. Portfolio

Maybe the most crucial part of the whole project. Here the users have a clear overview of their whole portfolio. A historical performance graph, manual/recurring investments, funds allocation and so on. I neatly stacked these components on the left, and when selected their detailed views appear on the right. In the process of creating the new investment UI we created a Trading 212 Community forum and luckily several of the most wanted features were overlapping with what we had in mind. With more than 10k daily active users, the project put a lot of weight on my shoulders, and threads like that are very reassuring!

3. Search

Maybe the hardest part of the project was the Search tab, I underestimated the task and that was rather silly from my side. I thought the whole thing is pretty straight forward, as the Search was a stand-alone component, which we could have reused from the CFD project. Well not quite… The placement of the search bar on the top navigation bar was strange, out of context and with the different main tab structure - rather illogical.

• The search bar looked like a global search, not an instrument exploration tool.
• How the user will know where/what he is searching?
• What is going to be the desired behavior and state of the current page the users are at, when clicking on the search field?
• Should we save the current state of the page they are at, when the users have navigated to a specific search result?

That made me redo the whole idealization of the search and scrap the initial idea I had. Back to square one… While designing the UI, the financial instruments our company offers have grown to more than 3000, that lead to some changes and improvements on the search, so that users can find and navigate easily around it.

You can see in the screenshot above the initial direction I went with, but the interaction with the components would have led to double or even triple scrollable areas, which as you can guess an awful thing. The solution is shown in the following screens. The new version is better in several key areas:

• Larger items for finer filtration
• Future proof of the country selection
• At the time of writing there are six possible countries, with the possibility of expanding to 30+ in the near future
• Same applies with the addition of new stock exchanges
• The dark overlay is without blur to further visually enhance the experience and keep context for the users. The items in the background will automatically adjust with the different filter selections.

I reused a familiar component for the instrument details encasing it in a frame with a CTA at the top, which gives the users the possibility to add the instrument to a specific watchlist, create a new watchlist with the current selection.

4. Notifications

The offbeat

A short example will be:

5. Videos

Untapped potential

N.B

There is lots of room for improvement, but for non-crucial features, we had to make some compromises. 

6. Economic calendar

The economics calendar is another feature we made to help out our users. Without forgetting the fact that the main purpose of the platform is to offer the ability to trade stocks, we wanted to make a convenient feature for our customers to see the latest economics news and react appropriately to major economic events. For the first iteration I kept things simple and straightforward. Only basic filters would be done - By currency & by impact. The whole feature revolved around the idea of visualizing an external feed from a reputable news provider, so that our customers have a stellar experience with detailed and authentic information.

You’ve made it through! Thank you for the time spent reading this case study! 🍻

Other projects