Overview
This project is a responsive web application that transforms traditional PDF financial proposals into interactive digital experiences. Built for Capintel, a financial technology platform, the tool enables advisors to create and present investment proposals through a modern, modular interface that supports dynamic content, branding customization, and real-time collaboration.
The goal was to replace a static document workflow with a guided, interactive experience that feels premium for clients while remaining practical for advisors to assemble and deliver.
The Problem
The challenge was moving from static PDFs to an interactive, web-based experience while navigating significant unknowns around product shape, advisor workflows, and presentation context — and doing so in a way that could support a company raising and deploying capital at scale, including a $14M funding story tied to the product trajectory.
Requirements and Constraints
Three constraints shaped the design: legal and compliance requirements for financial content, engineering capacity (including the need to leverage existing chart components where possible), and aggressive delivery timelines that required a modular, shippable system rather than a one-off page.
User Research
Navigation Bar Research Results
First, navigation is an important part of the proposal that we had to address. In the past, going through PDF proposals was not the best experience (especially if you have many pages to flip through). The upside to having the proposal digitally is the ease of creating an experience where navigating/jumping to different sections of the proposal can be made relatively intuitive and convenient for the user.
Below are some of the iterations that we came up with as a team that the user might find helpful using to help them navigate through the digital proposal — we ended up choosing iteration 2.
Analysis Items Research
Analysis items in the proposal
~30
Things to consider for each:
- Visual design — each analysis item is its own entity; which chart type or visualization best fits its data.
- Interactions — what the user can interact with inside each analysis item.
- Responsiveness — how each module adapts across desktop, tablet, and mobile.
These 2 examples show my design process ahead of the Hi-Fi mockup phase, guided by the 3 considerations above:
Risk reward analysis
Simple definition
Compares an investment’s potential losses against its potential profit.
Modeled on the scatterplot format used in current PDF proposals.
Key interactions:
- Hover tooltip — shows a data point’s details on hover.
- Time selector — filters the chart to a specific timeframe.
- Portfolio selector — switches which portfolio’s data is shown.
In terms of creating responsive designs/lo-fi wireframes, different behaviours are considered as they accommodate to different screen sizes.
1st Test: Hover Tooltip Interaction
One of the interactions (other than the time selector and portfolio selector) – the hover tooltip – allows the user to see more detailed info about the data point once hovered over.
Quotes and observations
“I prefer that the value is shown with a solid background, differentiating it from the data within the scatterplot more clearly.”
This iteration highlights the data point upon hover and the data info sits on the grid of the scatterplot without a background fill.
Quotes and observations
“I prefer this one as it has the big green dot which stands out and makes the image/chart more clear.”
Decision
Both Iteration 1 and Iteration 2 move forward to the next design phase.
Based on user preference
- Highlight the data point on hover
- Solid background on the hover tooltip, for legibility
Test 2: Different Behaviours of Smaller Screen Sizes (Tablets/Phones) – Responsive Design
In this iteration for smaller screen sizes, in order to accommodate more data points with a smaller screen, intervals are bumped up from 1 to 2 in order to show/fit all data in the scatterplot.
Quotes and observations
“I prefer this chart because I want all the info available by not having to do dig into the chart to do more work to see what I want to see.”
“I like the doubled intervals as it allows me to see the whole graph without having to move the screen.”
In this iteration, intervals remain the same, but the interaction of dragging across the screen to view more data points is created to fit more data.
Quotes and observations
“I think giving the user more control as in this chart just makes it more confusing because now there is a unique interface element that the user has to understand to consume the information rather than just making sense of a single presentation.”
Iteration 1 is brought into the next design phase – people prefer scaling the scatterplot by bumping up the intervals rather than dragging across the screen to view more values.
Fixed income credit quality
Simple definition
A measurement of an individual’s or company’s creditworthiness, indicating credit risk. One of the principal criteria for judging the investment quality of a bond or fixed income product.
Design considerations:
-
Credit rating tiers
— which chart type best displays these groupings.
- High quality — AAA, AA
- Medium quality — A, BBB
- Low quality (junk) — BB, B, CCC and below
- Portfolio composition — how to show each portfolio’s percentage breakdown across rating tiers in the chosen chart type.
2 Different Iterations of Showing Fixed Income Credit Quality
In this first iteration, each individual investment portfolio is displayed in a vertical stacked bar chart (with each block in the bar representing a percentage of the credit quality that is in that portfolio – e.g., there is 17% of AAA rated fixed income product(s) in Roy’s Off Book Portfolio). A legend is included to differentiate the colour-coded ratings in the bars.
Better at showing distribution
60%
Better at comparing portfolios
55%
Quotes and observations
“Its easier to see quickly the differences in percentages with this one.”
In the second iteration, each credit rating of a portfolio is represented by an individual colour-coded bar chart (instead of a single stacked bar chart as in the last example). Similar to the last iteration, a legend is included to differentiate the colour-coded bars.
Quotes and observations
“I prefer the 1st iteration because the percentages are explicitly written inside each bar which are quicker to read than matching values against the vertical axis.”
Main Research Findings
-
People who have seen this type of data before understand what it’s showing – they’re usually shown in this format on the platform they’re using as well
“Yes, I have seen these charts before in my online investments, though I have not taken much time to look at them. The 1st chart/iteration is similar to how I see bond ratings broken down; I think these charts are trying to show me credit quality broken down by portfolio type, and within each type, the risk profile of investments.”
-
Users may read the breakdown as amount allocation rather than credit ratings.
Action — add a description of what the credit ratings mean, and clarify that portfolios are not funds.
“I think that they are telling me the breakdown of the fixed income portion of my investments and telling me the amounts in each fund category. I think that this is a snapshot of all my wealth. Personal being saving accounts and then broken down by type of fund. Environmental, high returns, etc… tell me which types of investments I have.”
- Open question: how to explain what “fixed income” includes.
Research Across Analysis Items
Portfolio Holdings Summary
Test 1 — Fund flow
How easily users can locate a fund’s data within a portfolio.
3-screen flow: default portfolio view → hover a fund → click to see its weight and a trend line over time.
Found it easy to get to fund data by clicking the fund name
85%
17 of 20 users
Test 2 — Chart vs. table
Whether users prefer viewing fund distribution entirely in charts, or part table and part chart.
Iteration A Chosen iteration — donut chart for fund breakdown, line chart for weight over time.
Iteration B — table for weight over time, donut chart plus value summary.
Prefer all charts (Iteration A)
75%
15 of 20 users
“I think iteration A looks cleaner and easier to read. It also gives you a quick visual representation of performance compared to numbers on a table.”
Drawdown Details
Drawdown is an investment term that refers to the decline in value of a single investment or an investment portfolio from a relative peak value to a relative trough. The Drawdown Details table includes metrics like maximum decline, months of decline, peak date, valley date, and recovery time.
Test 1 — Chart vs. chart + table
Whether users prefer drawdown analysis as a chart alone, or as drawdown details that combine the analysis chart with a metrics table.
Iteration A — Drawdown Analysis chart only.
Iteration B Chosen iteration — Drawdown Details: analysis chart + metrics table.
Preferred table and chart together
80%
16 of 20 users
Users preferred interactivity within the table and favored the table being placed above the chart. Decisions included showing drawdown details by default, placing the table at the top, and adding info icons for terminology.
Test 2 — Table–chart interactivity
Whether users preferred interactivity that links the metrics table to the chart (selecting a value highlights the matching point), and what they said about it.
Majority of users prefer having the interactivity on the table as it helps them to:
- Focus on a single portfolio for analysis
- Know exactly what it hit on the chart and when
- See the exact period for the activity on the chart — when the decline starts and ends
- Also prefer seeing the table above the chart
Overview
Overview is a summary of the investor client’s entire investment portfolio – showing all the portfolios he/she has and their performance over time (based on increase/decrease on percentage) on a line chart.
Iteration 1 — Line chart
Performance over time shown as a multi-portfolio line chart.
Prefer line chart over bar chart
55%
11 of 20 users
- Colour coding the lines for their respective portfolios helps users interpret the info on the chart at a glance
- Depends on how many lines/portfolios we’re comparing before it gets cluttered
- Prefer to be able to hover over any point to show the info rather than just one of the points
- Some people don’t know what’s being shown — we can perhaps give them more context by including the x and y axis on the chart itself
Iteration 2 Chosen iteration — Bar chart: performance over time as a grouped bar chart, so positive and negative growth are easier to distinguish.
Prefer bar chart over line chart
45%
9 of 20 users
- Nice that the bar chart shows negative growth
- Some users appreciate seeing individual values upon hover; others prefer the 1st tooltip where multiple portfolios are shown for ease of comparison
- Looks cleaner and the values more distinguishable because the bars don’t overlap like the lines do for the line chart
- But bar charts are harder to compare multiple portfolios over time periods compared to the line chart
Risk Profile
For risk profile, think of it as an assessment of your risk appetite when it comes to investing. As the name states, it is a profile of how tolerant you are for risk and the type of investor you are. On risk profile, there is a target breakdown of how an investor wants to break down their investments and their actual breakdown (e.g., across different risk finance products).
Iteration 1 Chosen iteration — Show actual and target breakdown of investments visually (horizontal stacked bar chart) and in text underneath.
Iteration 2
Show actual and target breakdown of investments in horizontal stacked bar chart format only; only show values upon hover.
Based on the feedback, more users preferred to have all the values shown without hover and that’s the iteration we went with for the Hi-Fi phase.
Hypothetical Return Graph
Hypothetical Return Graph shows a projected return in growth for the clients’ different investment portfolios over time.
Iteration 1
In this 1st iteration, the current value of a portfolio is being shown in the pill next to the name of the portfolio on the top header section above the chart.
- Users prefer to see everything at a glance – both the portfolio and its current value side by side
- Users prefer seeing the y-axis showing the most recent value on the right side
Iteration 2
In this 2nd iteration, the current value of a portfolio is being shown on the side of the line chart under the header section.
- Used to seeing the value of investment on the graph itself rather than on the top of the graph – like that it can be toggled on/off
- Current value is more prominent/obvious – value highlighted in bold colours (also more visually appealing)
In consideration of having more portfolios (an analysis item can show up to 6 portfolios) be shown on the chart, we decided to have the portfolio value on the top (next to the portfolio name instead of having it on the chart) to save on real estate as the number of portfolios increases on the chart.
Drawdown Analysis
Drawdown is an investment term that refers to the decline in value of a single investment or an investment portfolio from a relative peak value to a relative trough. Drawdown Analysis is the counterpart module to Drawdown Details.
Iteration 1 Chosen iteration — Drawdown is shown in a line chart format (declines are shown as troughs) and indicates a dip (maximum decline). If there are multiple portfolios shown, one gets overlapped over the other – specific values are shown upon hover.
- Makes more sense for people because this design shows every data point so you can actually see the trend over time – the other one doesn’t show the daily volatility which is important for some users
- People like that the data is oriented downwards rather than upwards (which is more intuitive than the other one orienting the negative values upwards)
- Easy to compare overall trend seeing continuous data over time
Iteration 2
In this iteration, investment declines are shown in bar chart format – with each colour coded bar representing a portfolio.
- Bar charts – easier to read and data not muddled/overlapped together like the 1st design (easier to compare the data)
- Some users are not used to seeing the line chart – bar charts are simpler and more familiar for them
- Side by side nature allows for easy comparison
Went with iteration 1 (line chart) — it best visualizes the dip for drawdown analysis (maximum decline).
Strengths:
- Downward orientation makes more sense when the chart shows negative values
- Shows trend over time, which the bar chart lacks
- Shows daily volatility, versus monthly/weekly data on the bar chart
Limitation:
- 2 portfolios’ data overlap and look muddled together — harder to compare
Next — figure out how to clearly delineate between portfolios when more than 2 are shown on the chart.
Assets Allocation
Assets Allocation shows the investor where their investments are allocated across different products (e.g., Fixed Income, Canadian Equity, Cash, etc.) and the percentage allocated to each for each portfolio that the client/investor holds.
In the test for this analysis item, we wanted to figure out whether users understand how to get from the 1st screen (on the left – breakdown of financial product types and weight for each portfolio) to the 2nd screen (on the right – which shows a breakdown of the funds inside a financial product type (e.g., US equity)).
Major points and suggestions
Layout
Issue — the charts for the 2 portfolios sit too close together, making it hard to tell at a glance which chart belongs to which portfolio.
Suggestion — add more space between the charts so they read as distinct and less cluttered.
Portfolio names
Issue — portfolio names are causing confusion, especially when the module shows 2 portfolios’ data at once.
Suggestion — change the labeling and add extra labeling to indicate which portfolio corresponds to which data — the portfolio pill currently sits too far from the chart data for people to connect the two.
Colour use
Issue — the colours chosen are too similar, and only blue and purple are used — this causes confusion, as people expect those colours to be tied to a category when assets aren’t actually grouped by “blue” or “purple.” The colour in the 2nd screen’s table is also too closely related to the 260 portfolio colour, adding to the confusion.
Suggestion — use colours that are easier to tell apart for the distribution.
Cash asset clarification
Issue — confusion exists between an asset class (e.g. cash) and what people expect to see under it upon clicking in.
Suggestion — add a description at the top of the table explaining the relationship between cash and the funds/stocks within it, e.g. “Here are the funds/stocks you’ve invested under fixed income.”
Advisor Interviews
We conducted interviews with 12 financial advisors (showing them our MVP prototype – the 10 MVP analysis items and gathering their feedback on it). Based on interviewing and gathering their feedback, I’ve synthesized the research results and came up with different relevant action items tackling each problem/opportunity area.
The action items are then brought to the product and development team to prioritize based on its importance and effort to execute.
Below is a snapshot of the different action items that we’re going to carry out in our next design phase:
Each action item is supported by quotes from participants (the financial advisors); I would also include a percentage/ratio for number of users who said something similar to show if a point being brought up is singular or recurring from people being interviewed.
Future Vision
Final Thoughts
Challenges
Multiple user groups had to be considered: financial advisors and their clients.
- Clients can be further segmented by level of financial literacy
- The application risks feeling technical and jargon-heavy for people unfamiliar with finance
- Advisors want control over what they share with clients — balancing that against broad accessibility drives many design decisions
Status
Analysis items for MVP
10
Modules in Hi/Mid fidelity
20
Research is complete on nearly every analysis item, with findings applied to the Hi-Fi mockups. Action items are prioritized for the beta phase, going out to pro-active users.
Beta feedback informed how the remaining 20 modules proceed.