Portfolio transtrack
A story about how we made an equity Portfolio Tracker for Tickertape, with actionable insights for users. Which went on to become one of the pivotal revenue driver features for the organisation.
MY ROLE
For owning the whole project from scratch on design front, DQA, feature enhancement & collaborating with multiple teams
TEAM
Tech Team
Neil・Product Designer
Harsh Paul・Product Manger
Ujjwal・CEO
Sunal・Me
TIMELINE
6 Months
( Including Design, DQA & Growth Campaign )
BACKSTORY
How it all started ?
Tickertape is an all-in-one screening, trading and investment platform. It prides itself in laying out complex data beautifully and making it simple to consume. At the time of this project, we had started to move past our usual seasoned investors and wanted to help bring new investors into the market by creating a learn and a social product, and then making the analysis part of our platform a jumping-on point for these novice users who are new to the market.
INTRODUCTION
What is it all about ?
At the genesis of this project, Portfolio was was nothing but a glorified spreadsheet view. Portfolio v2 was a major update that added up a new tab that analysed all the usual investment data from your portfolio and provided you with insights. And also revamping of holdings tab which meant moving away from normal spreadsheet to cleaner user interface.
Investing can be overwhelming for beginners. Even if you've started by buying a few stocks, assessing whether you're making the right choices can be challenging.
PROBLEM SPACE & RESEARCH
Why is it required & why now ?
Our users required a clearer understanding of their equity portfolios. The previous "Holdings" section was disorganized, resembling a basic spreadsheet without proper breakdowns. Our existing portfolio's rentention and engagement of users was really less. This was when we realised we had to revamp our portfolio feature. At the same time we wanted to do market expansion to generate more revenue which led to aquiring more users. Thus, the "Insights" tab was born—a beacon of clarity and actionable advice amidst the chaos of financial data.
🧩 Fragmented View
Stocks appeared duplicated, confusing users who invested through both smallcase and individually. There was no segregation as to which part of market cap has user invested in.
🔎 Lack of Clarity
Despite analysis data for individual stocks, there was no clear overview of the overall portfolio.
✨ Untapped Space
Tickertape had valuable data but lacked actionable insights. So, we introduced the "Insights" tab to provide clarity and guidance
This project was not only crucial for enhancing user experience but also pivotal in driving Tickertape towards achieving its goal of generating new revenue streams. Moreover, it aimed to offer our users additional features on our platform, further enriching their financial journey.
Research & surveys we conducted
Very briefly, we were trying to understand the wins and pitfalls of our current Portfolio page. This includes (but isn’t limited to) the feature set, design, metrics shown and overall ease of understanding.
For more detailed breakdown of research & understanding the problem statement you can go through the pitch deck I created for better clarity. Here is the research plan and some details from one of the user interviews that I conducted.
GOALS
Expected goals & getting to solution
INFORMATION ARCHITECTURE
Quick broad level layout breakdown
PORTFOLIO BREAKDOWN
Overview Banner
I was tasked with designing the Overview section for the stock portfolio, which needed to be visually appealing and easily scannable to the users. As I researched, I realised that users generally prefer to scan information rather than reading it in detail, so we decided to incorporate a visual representation that would make it easier for users to identify overall breakdown of their portfolio.
Iterations
Final
Mobile View
For the mobile version, we faced the challenge of displaying all the necessary information on a single screen while maintaining the same logic as the web version.
As we continued to iterate on the design, we decided to push the treemap visualization to the next fold, as it required more attention and had several interactions involved. As for any user be it basic or advanced they'll want to see broad level how their portfolio is performing and if needed to deep dive they can on just single tap of screen.
Iterations
Final
HOLDINGS TAB
Holdings breakdown
Transitioning from a standard tabular spreadsheet structure to a more detailed and user-friendly UI was tricky, but we achieved it.while maintaining all the metrics while enhancing the intuitive flow, enabling users to easily visualize their holdings.
Now as user can have equity stocks which can be made into certain groupings like
MarketCap, Sectoral, Smallcase,
Segregation & Grouping
Holdings breakup
Most of the other mweb or apps in the industry choose to scale down the row and column tables of dweb to table structure we didn’t want to go the same route. As using tables on mobile isn’t user friendly & intutive interaction, so after iterating alot we reached decision to go ahead with card structure.
Under which important task was to retain so many metrics. So after doing my bit of exploration we came down to this conclusion.
And now the task was how would it look like for segregation under sectoral and marketcap bit
But we eventually did explorations for that as well and agreed on one solution which looks like this
INSIGHTS BREAKDOWN
Insights what is it made of ?
Investing is like designing a balanced masterpiece. In general you don't want to put your all eggs in one basket, similarly, diversifying your portfolio means spreading your investments across different sectors and market caps, creating a harmonious mix.
Now for better understanding of user we did some retrospection from user interviews and talked to few folks who did investing & on a broad level we realised how an individual wants to analyse there portfolio or matter of fact any trajectory is by checking what they have done in Past, then analyse what they are doing Presently and eventually projecting what their Future might look for them if they keep following their set path.
Hence moving forward we broke down the whole insights section with the same philosophy.
So what is it ?
So first user get to see the what their portfolio have looked like uptill now and how is it been scattered.
Sankey Breakdown
To visualise this, we used a sankey diagram. It's like sketch that illustrates how your investments are allocated. Think of it as the blueprint for your financial artwork.
We did try to come up with alot of different visualisations but we realised pie chart or donut chart is still little complex and user need to pay alot of attention just to understand how its been scattered, so that’s when we thought of going with sankey as it looks huge but when user sees it its pretty simple and light on the eyes and easy to understand.
Iterations
Final
This is what interaction of sankey looked like on mobile view, we did alot of R & D as to how we could design it more intiutively on mobile rather than just having whole layout structure on mobile.
Diversification
Now, let's talk about diversity. We assess how varied your portfolio is compared to others. It's not about reaching a perfect 100 or making it too diversified. Rather it's about aligning with your personal investment goals.
We show your diversity score alongside our community average, offering a benchmark for your unique composition. We also wanted to breakdown what your diversifications holdings are made off. So we wanted to also have a clean and simple visualisation representing out of 100% what composition of their top holdings looked like.
Present Track
Choosing your investment style & mix is like finding the right balance between risk and reward. Assessing the current market and its benchmarks helps determine your strategy. Knowing your portfolio's current value is crucial.
An undervalued portfolio suggests growth potential, while an overvalued one may have peaked, signaling a potential sell-off. Easiest way for any investor is too compare their portfolio returns to market benchmarks as to how market has performed.
Metrics
Under metrics we gave two options to measure how their portfolio is perfroming. One being PE Ration and other being how volatile is their portfolio in comparision to how market is perfoming. These visual cues provide a snapshot of your portfolio's status with respect to current market benchmarks.
Also we kept a note of this if the user want’s to deep dive and understand how their sectoral breakdown of portfolio is performing with respect to their respective benchmarks.
🤔 Not to forget the existing users
A large chunk of our existing users are intermediate to advanced investors, and we had to design for them too. These are the people that want to drill deeper into our insights and want all the details and raw data. Most of the visualisations expand into a more detailed view of the same data, but grouped in a way that give actionable insights. These tend to be more jargon-y and a little more advanced.
Redflags
The last visualisation identifies potential red flags in assets, a helpful concept in personal finance. It sorts stocks with common red flags, offering a quick sell option with actionable insight for investors.
It's like having a guide to spot potential issues, ensuring a smoother financial journey. Investors might not even know what these red flags look like, so this feature picks stocks out of your portfolio and groups them by the popular red flags, with the sell button only a hover away.
Future Projection
This one is simple & straight forward - it shows you the cumulative forecast for your portfolio, which lets you know if your investments are going to get you closer to your investment goals.
With an understanding of your entire portfolio, you will be the best judge of whether the expected returns percentage is satisfactory or not. If you want a higher number, then it's time to rethink your past decisions and risk appetite.
EXTRA MILE
Creating Simpler Visualisations
We wanted all our portfolio visualisations to have a little to no learning curve, which is quite an ask in the world of data viz. And people who have taken the time to understand data plotted against an x/y-axis or represented across quadrants (many seasoned investors) are fairly comfortable doing so. But since that was one part of the primary target group of this revamp, we chose to go back to the basics and make it more simpler to understand.
Crafting for transparency for basic user and
pro-conversion
Another angle of transparency we realised was to show our user how a pro feature that we have on our platform what that could look like if they were to purchase it, rather than just simply blocking it with paywall, or abstracting the data.
We ensured what could be the best way hide the data but at the same time make our user well aware what our pro features would look like.
It also did a job of promoting features and converting users.
Designing for education and transparent logic communication
While being a fintech platform we do have all the numbers and pre requisite data of user & which also gets used to show the calculations and all the analysis we do.
But having said that it becomes very essential for us to be transparent with our user and so if user wants to deep dive and understand how these calculation happen in backend we do these through different touch-points.Seamless feature announcement & Intuitive onboarding flow
We were building multiple features and launching them at high speed so we wanted to keep our users updated as to what all we had added to our platform.
Also at the same time we wanted to keep our onboarding lean meanwhile shedding light on all the features that were launched. Hence we agreed with major stakeholders that best way out was a lean bottomsheet with onboarding banner with CTA so user can start exploring the feature.
Crafting for transparency for basic user and
pro-conversion
Another angle of transparency we realised was to show our user how a pro feature that we have on our platform what that could look like if they were to purchase it, rather than just simply blocking it with paywall, or abstracting the data.
We ensured what could be the best way hide the data but at the same time make our user well aware what our pro features would look like.
It also did a job of promoting features and converting users.
Designing for education and transparent logic communication
While being a fintech platform we do have all the numbers and pre requisite data of user & which also gets used to show the calculations and all the analysis we do.
But having said that it becomes very essential for us to be transparent with our user and so if user wants to deep dive and understand how these calculation happen in backend we do these through different touch-points.Seamless feature announcement & Intuitive onboarding flow
We were building multiple features and launching them at high speed so we wanted to keep our users updated as to what all we had added to our platform.
Also at the same time we wanted to keep our onboarding lean meanwhile shedding light on all the features that were launched. Hence we agreed with major stakeholders that best way out was a lean bottomsheet with onboarding banner with CTA so user can start exploring the feature.
Crafting for transparency for basic user and
pro-conversion
Another angle of transparency we realised was to show our user how a pro feature that we have on our platform what that could look like if they were to purchase it, rather than just simply blocking it with paywall, or abstracting the data.
We ensured what could be the best way hide the data but at the same time make our user well aware what our pro features would look like.
It also did a job of promoting features and converting users.
Designing for education and transparent logic communication
While being a fintech platform we do have all the numbers and pre requisite data of user & which also gets used to show the calculations and all the analysis we do.
But having said that it becomes very essential for us to be transparent with our user and so if user wants to deep dive and understand how these calculation happen in backend we do these through different touch-points.Seamless feature announcement & Intuitive onboarding flow
We were building multiple features and launching them at high speed so we wanted to keep our users updated as to what all we had added to our platform.
Also at the same time we wanted to keep our onboarding lean meanwhile shedding light on all the features that were launched. Hence we agreed with major stakeholders that best way out was a lean bottomsheet with onboarding banner with CTA so user can start exploring the feature.
Crafting for transparency for basic user and
pro-conversion
Another angle of transparency we realised was to show our user how a pro feature that we have on our platform what that could look like if they were to purchase it, rather than just simply blocking it with paywall, or abstracting the data.
We ensured what could be the best way hide the data but at the same time make our user well aware what our pro features would look like.
It also did a job of promoting features and converting users.
Designing for education and transparent logic communication
While being a fintech platform we do have all the numbers and pre requisite data of user & which also gets used to show the calculations and all the analysis we do.
But having said that it becomes very essential for us to be transparent with our user and so if user wants to deep dive and understand how these calculation happen in backend we do these through different touch-points.Seamless feature announcement & Intuitive onboarding flow
We were building multiple features and launching them at high speed so we wanted to keep our users updated as to what all we had added to our platform.
Also at the same time we wanted to keep our onboarding lean meanwhile shedding light on all the features that were launched. Hence we agreed with major stakeholders that best way out was a lean bottomsheet with onboarding banner with CTA so user can start exploring the feature.
IMPACT & LEARNINGS
Let's talk impact
We launched this feature in parts, first week we rolled out Holdings tab and Overview banner. And after 2 weeks we rolled out Insights Tab. We tracked alot of events and also eventually made some enhancements according to reviews we received but these were some impacts post 3 Months (one quarter) of feature launch.
42%
Uptick in daily active
users (DAU)
24%
Surge in Basic to Pro conversions from this feature
One of the top 3 pro converting features on platform, also as we tracked every event for pro touchpoint in portfolio, percentage of pro conversion kept on increasing from this feature on monthly basis.
60%
Uptick in M3 Rentention
One of the best retention feature on platform
Uday Singh
Sahi hai very detailed, best for analysis and actionable
Annunay Kumar
New tickertape portfolio is really clean and easy to use.
Piyush Goyal
Just wanted to appericiate the enhancements tickertape folks have made to portfolio section.
Ridhima Sharma
All of these are decently, actionable
Pranav Mishra
Solid new insights tab, shipped kudos to the tickertape team
Learnings & takeaways
Initally this project started out as a team effort with Neil, but eventually I took whole ownership of the project & led it till it's completion and later future enhancements.
It's been crazy ride working on this project and collaborating with amount of people who were involved. With scale and impact of this project I learnt alot during the process but have pointed out few major learnings.
Created by @sunalsood
Portfolio transtrack
A story about how we made an equity Portfolio Tracker for Tickertape, with actionable insights for users. Which went on to become one of the pivotal revenue driver features for the organisation.
Back
As of now you can read whole case-study only on desktop or laptop view!