⚠︎ Please consider viewing on desktop for the best experience

Seeing Money Possibilities to Invest & Plan

Predictive Investing Tools

Client Confidence & Satisfaction

Data Management

The Client: Big 4 Canadian Bank [kept anonymous by client request]

My Role: Lead UX Designer | Agency | Team of 2 designers, dev lead, data lead, QA, product owners

The Problem:

Investors had no way to visualize their potential future earnings within the platform. Without a forward-looking income tool, users were making buy/sell decisions without understanding how their holdings could perform over the next year, leaving the bank unable to compete with third-party tools that already offered this capability.

The Solution:

Designed an income projection tool that gives investors a breakdown of their potential monthly earnings for the next 365 days, surfacing both actual and directional future income across all breakpoints.

  • Structured the project across 3 phases: MVP to final ideal state

  • Built responsive from the start, with mobile breakpoints incorporated into every phase

  • Initiated project with collaborative Lean UX process to establish shared OKR’s across teams

Top-Down Holdings Speculations

Despite how data-dense and complex this tool is, novice investors were still incredibly important to the adoption of the tool beyond the power users. The content layout of this tool is intentionally designed to be as friendly as possible for a novice to land on. Interactive charts and summarized data were a key element for high adoption rates across all user types; this type of treatment benefits all users.

  • Summarized texts(the text with the light bulb icon) are proprietary to the S&P Global. Injecting company-owned software is beneficial for users, the client, and the internal company. The summary texts will support the user in reducing cognitive load when trying to understand the data, while also making the client’s platform more usable and further solidifying relationships between the client & internal S&P team.

(click on images to expand)

Keeping Investors Engaged & Active

Another layer to guarantee adoption success, the team had to consider all potential edge cases that might unintentionally cause drop-off rates for the tool. Users of all investing knowledge should feel supported by the platform, and providing key information exactly when investors need it is paramount to this goal.

  • Interesting stocks to consider: information is presented to investors that might have empty holdings or securities that aren’t paying dividends. This intentionally designed decision provides a call-to-action and promotes further research on high trading stocks and securities. Giving investors a way to engage further with the platform allows the investor to have a healthy and diverse portfolio while also solidifying trust between the platform and the investor.

The client’s north star is to transform their platform into a one-stop shop for all research & trade executions– decreasing the jump-off rate of users going elsewhere for their research needs.

◄ The income projection tool was a completely new tool that allows sandbox speculations. It was designed as a supplemental bridge to other areas of our client’s platform to increase user value. Entry & exit points were in collaboration with investors through user testing.

(click on image to expand view)

Process Snapshot

A user-initiated design project that went from concept to approved design and active development, structured in three phases with dev actively building Phase 2 at hand-off.

(click on image to expand view)

  • The idea originated from a real user signal, a user had requested this tool on Reddit. Combined with consistent client feedback requesting more educational tools to learn from their trading activity, indicating a missed opportunity for the client’s platform. Competitors were already offering this capability, making it a retention and acquisition gap.

    Key Principles

    • Structure a three-phase delivery to ship value incrementally rather than waiting for a perfect full-feature launch

    • Compatibility with existing platform tools (DQ data, screeners) to create a system of complimentary tools

    • Consider mobile-responsive from the beginning

    • Balanced forward-looking data (directional income) with actual holdings data to serve both confident and cautious investors

  • Investors knew what they owned but couldn't easily answer: what will this pay me? Without projected income data surfaced in context, users were either leaving the platform to calculate this elsewhere or making decisions without it entirely. The bank risked becoming an execution-only engine rather than a full research and planning destination.

  • Roles & Responsibilities:

    • Concept development & Lean UX documentation: Created the project brief, defined the three-phase delivery structure, aligned business outcomes, and presented the roadmap to stakeholders

    • Phase 1 design: MVP experience showing basic income projection with a security row, bar chart visualization, and summary metrics across desktop and mobile

    • Phase 2 design: Expanded security rows with contextual financial data pulled from the Detailed Quote page, giving users richer per-holding insight without leaving the tool

    • Phase 3 design: Screener integration to surface new securities aligned to the investor's income goals, adding a discovery layer to what started as a monitoring tool

    • Prototype creation: Built desktop and mobile prototypes showcasing Phase 3 implementations for stakeholder presentations, including interactive bar charts on desktop

    • Cross-functional coordination: Worked directly with dev and data teams through design and data sign-off; dev was actively building Phase 2 at the time of hand-off

  • Design and data sign-off were completed across all three phases. Development was actively building Phase 2 at hand-off, with Phase 3 paused pending user feedback from the Phase 2 launch. The tool addressed a documented competitor gap and a real user need identified through organic client feedback. The new tool strengthens the platform’s offerings, provide insightful tools with actionable items, and increased customer satisfaction.

Influencing Strategy

A total of 6 user flows were created to consider all potential user mental models when accessing, using and taking actions from the tool.

(Click on images to expand view)

Income Projection came at a time of high growth for both the internal and client teams. This project alone saw a ~50% team change, a scale that relied heavily on my ability to manage and communicate designs and dependencies.

◄ As part of the collaboration process, I assisted in strategizing the user test with the new UX researcher. The user test considered different goals for each phase of the project; this initial test focused on immediate priorities: feasibility, desirability, and integration points. Entry & exit points were in collaboration with investors through user testing.

(click on image to expand view)

► As part of responsive efforts across the entire client platform, there were 7 established breakpoints to consider.

Moving the income projection experience to mobile meant that each drill down had to be considerate of how investors wanted to engage with the data. I needed to be deliberate with how data was organized– was the data able to be standalone, or did the data need to be supported with other datasets for investors to get the full picture?

(click on images to expand view)

Keeping it Organized for Hand-off

A view of the number of breakpoints to consider when migrating from desktop to all other 6 breakpoints.

This project had to consider all phased integrations, what the breakpoints would look like across each update & the states for each interaction point, like adding in fixed income, mutual funds, & the future sandbox state.

(click on images to expand view)

The Figma file had to be incredibly organized with as much supplemental information as possible. There were 2 new PO’s for this project, as well as a new dev team that needs to manage new design system assets across all 7 breakpoints.

This was one of the ways to maintain transparency across all teams; the large Figma file had a separate page to help collect links, track sign-off decisions, and timelines.