User Experience Designer/ Product Designer
CIBC Institutional Retirement date portfolio
Introducing
Duration: 5 months before going live
Role: Senior Visul Designer
Tools: Figma, AEM, HTML
Design Team: 1 UX lead, 1 copy writer, 1 VD, 1 UX
75%
reduced call lines
1.
How might we make it easy for institutional clients to learn more about the target retirement portfolios
The Institutional Target Retirement Date Portfolios require a dedicated digital presence to provide institutional audiences with clear, accessible information about the product and its key benefits. Currently, there is no dedicated landing page that presents the portfolios, their asset allocation approach, and glide path in a cohesive, user-friendly format.
The project also needs to support a more complex glide path than the existing Education Portfolios experience, which currently represents only equity and fixed income. The new experience must accommodate approximately six to eight asset classes while maintaining consistency with the existing site design and user experience.
Overview
Lead with the institutional investment story system
The hero should be relatively simple and benefit-oriented, with the more detailed investment information progressively disclosed on the page
Explain the value proposition first; introduce complexity second..
Design Strategy
Make the glide path the centerpiece of the experience
The experience should allow users to understand:
Time → Asset allocation → Portfolio evolution.
As the user moves along the timeline, the chart updates to show the corresponding allocation. This makes the complexity understandable without requiring users to interpret a dense chart immediately.
.png)
The asset-class Portfolio model shouldn't simply be expanded from two colors to eight colors. That would likely make the visualization difficult to read. Instead establish a
visual hierarchy with consistent, accessible colors across the entire experience and clear legends and labels
Design for 6–8 asset classes without creating visual noise
Competitor Analysis
Covered top 5 banks of the world, 5 fin techs, 5 non banking industries to get a holistic result. We focussed on key areas like glide path and assets portfolios
.png)
2.
Design Challenges
PROBLEM
1. Glide Path Accessibility
During the design phase, the team identified an accessibility challenge with the glide path chart legend. The chart represents multiple asset classes through different visual treatments, such as colors and lines, the initial legend design could be difficult for visually impaired users to interpret.
The existing glide path component had been designed for a simpler experience with fewer asset classes. Expanding the chart to approximately six to eight asset classes increased the amount of information presented and created additional accessibility considerations. Relying primarily on color or subtle visual differences could make it difficult for users with color vision deficiencies or other visual impairments to distinguish between asset classes.
Color blind users
Normal sighted users
.png)
2. Should the glide path be static or interactive
For the Institutional Target Retirement Date Portfolios the glide path would represent approximately six to eight asset This introduced additional design and usability considerations:
-
Would an interactive slider provide meaningful value when the page is intended primarily as an informational overview?
-
Would adding interaction make the chart more difficult to understand or navigate, particularly for users relying on assistive technology?
-
How should the final stage of the glide path be represented?
-
Should the final point be labelled “1 year”, “0 years”, or “1–0 years”?
-
Does the final point represent the year immediately before the target date, the target date itself, or a combined end-of-glide-path period?
.png)
40-0 years depicted on glide path
.png)
0-post retirement depicted on glide path
SOLUTION
1. Clear labelling and indicators to make it more accessible
o address this challenge, the design team explored multiple approaches for presenting the glide path legend. The goal was to determine how asset classes could be differentiated without relying solely on color while keeping the legend clear, concise, and consistent with the overall design system.
Options explored included different combinations of:
-
Color and line-style differentiation.
-
Increased contrast between asset classes.
-
Distinct visual markers and patterns.
-
Alternative legend layouts and positioning.
-
Text treatments and labeling strategies.
-
Clearer relationships between each legend item and its corresponding chart line.
2. Taking the static approach for the glide path
The increased number of asset classes also made the interaction more complex. With six to eight categories represented simultaneously, adding a slider would introduce another layer of interaction without necessarily providing additional value for users who primarily need to understand the overall progression of the asset allocation. The team therefore considered the trade-off between:
Interactive approach
-
More closely mirrors the existing Education Portfolios experience.
-
Allows users to explore specific points along the glide path.
-
Provides a more dynamic visualization.
-
Requires additional interaction, states and accessibility considerations.
Static approach
-
Communicates the complete glide path immediately.
-
Reduces interaction and cognitive load.
-
Simplifies accessibility and responsive behaviour.
-
Aligns with the informational nature of the page.
-
Avoids introducing unnecessary functionality when there is no requirement for dynamic data.
Deal breaker trade off:
Another important design consideration was how to define the final stage of the timeline.
The existing CIBC Education page resolves this by grouping the endpoint as “1–0 years”, rather than treating one year and zero years as two separate stages. CIBC This approach is also consistent with the underlying target-date investment concept: the portfolio progressively becomes more conservative as the target date approaches, rather than necessarily treating the target date as an isolated investment state. This is why we decide to move ahead with the static glide path with proper labels and accessibillity best practices.
3.
Here's a snippet of the live site
The institutional target retirement date portfolio allows users to see the entire asset-allocation progression at once, which is particularly useful for a product page intended to communicate the strategy at a high level. It also avoids adding an interaction to the glide path that would increase development and accessibility complexity without being essential to the page's purpose.
