AngelOne

Web portfolio manager

OVERVIEW

AngelOne is going through a digital transformation, wherein they are completely redesigning their stock trading applications with a focused objective to appeal to Gen-Z and Millennial traders. I was responsible for working across the AngelOne’s stock trading products from designing and shipping the stock overview and fundamentals page to the portfolio manager.

In this case study I will showcase how we built the portfolio management experience on the web platform. This is an important module of the trading app with significant user interaction and focus. I worked closely with a business analyst, another designer and subject matter experts to understand trading behavior and data interactions.

ROLE

UX Designer

COLLABORATORS

Jai Prasanna, Business Analyst

Sam Joshua, Designer

TIMELINE

January 2021 (4 weeks)

PROBLEM

Easy trading - boon or bane?

A portfolio is the window into all the securities and assets owned by a user and single source of truth for users to track and manage asset classes. Key activities like risk assessments, asset allocation, diversification, and rebalancing happen primarily through a portfolio manager. Usually this was a task executed by professionally hired managers responsible for making decisions on a clients’ behalf. Democratizing this activity would now let all users have equal access to financial markets which is both a boon and a bane - because it becomes just as easy to make bad trading decisions.

Some users end up making bad decisions and execute impulsive trades with poor planning or rationale simply because they don’t find precise information at the right time to support their decisions. With the portfolio manager being an essential part in a trading workflow, it was important that our designs would abstract complexity and help them get through the funnel, well informed. Because the web platform caters to a unique user segment of both advanced traders and intermediate traders, the challenge was to be mindful to their different financial maturity levels.

IDEATION

Designing around mental models

To understand different types of trading behaviors we talked to users and gathered the following insights:

  1. Active traders who invest and analyze their portfolio performance and markets regularly and try to beat the market.

  2. Passive traders who invest by mimicking the trends of an index with the hope of growing wealth over the long run.

  3. Advanced traders are generally active traders who spend a lot of time building strategies on how to time the markets and select the right securities. This is why they work with a lot of advanced orders like cover orders, bracket orders, limit orders etc. to build a solid portfolio.

In a typical stock trading workflow, portfolio is defined into three broad sections; orders, positions and holdings. We built user stories as a way to explain how each portfolio section could function from the perspective of the end user. The users stories helped keep the focus on the user without getting lost in the technicality of things.

These user stories helped us understand the execution process and design a logical task flow to prioritize trading actions and build a progressive user flow resembling their thought process:

The three main sections we decided to show upfront is open orders, open positions and holdings. Both order history and closed positions were placed under tab headings ‘open orders’ and ‘positions’ respectively, because we learned this was not an essential part of a traders workflow to be shown upfront in separate tabs.

Details make the design

With the foundations of the user flow laid out, my next task was to design information in a way that encourages efficient and effective understanding of data insights. So I decided to take the following design directions:

Multi-tiered information

Designing for web did not mean that we could use the larger form factor to display all the information in one view. Through research ie. Context of Use, we learnt that there were specific data points users placed higher in the information hierarchy. So I set a standard in the design language which would define 2 tier hierarchy for each listed Security. Tier 1 would will help give 30,000 foot view, and if there is clear intent to learn more and take action, then a drop down with more data is presented.

Quick actions on hover

For advanced traders time is of the essence. Comparing trends of gains and losses with just tier 1 details and the watchlist present on the left, is enough for the user to make a decision on next best actions. To reduce the visual overload of having multiple CTAs shown upfront with tier 1 detail, I built a hover state that allows them to quickly take action.

Thoughtfully designed nudges

One of the problems I mentioned earlier was users making bad trading decisions because of inadequate or inaccurate data. Here are some measures I took across the Portfolio Manager to help users make more informed decisions.

  1. A banner shows up in Open Orders suggesting to price the order closer to Market Price for faster order execution.

  2. When an order gets canceled, a detailed explanation on the root cause of the cancellation is presented in a form that gets the users’ attention.

  3. Keeping track of past orders and their performance is important for users when they have to plan for future trades. So, I organized the order history page by clearly differentiating between ‘today’s orders’ and ‘past orders’. I also designed a search function and date filters to help users quickly find what they are looking for.

Summary cards

Summary cards in very important in a complex environment like a financial trading system. More often than not, it acts as a starting point for users attention. If they see something off base in the summary card they then know that that section needs attention. Keeping this in mind I designed bold and attractive contextual digests of information, across different sections of the portfolio management.

Outcomes I helped drive

  • 01

    Simplified interactions between key sections of the portfolio

  • 02

    User-centric information nuggets to draw deep insights

  • 03

    Efficient stock trading workflow with user specific nuances