In 2023, part of a 6-month project to improve two financial products to increase customers’ understanding of their full retirement picture and future
Role: UX Designer
Product Audits, Competitor Analysis, Research, Wireframes,
User Flows, High Fidelity Mockups, and Interactive Prototyping
Tools used:
Figma and Miro
The Background:
To help customers meet their retirement goals and realize their retirement outlook, a robo-advisor is one of many tools used to manage a user’s portfolio. These robo-advisor tools allow you to set your financial goals, risk tolerance, and investment time to get a personalized portfolio to fit your needs while investing for you. This automatic portfolio management product helps users meet their retirement goals and realize their retirement outlook.
The Problem:
Not all users trust a robo-advisor tool to manage their finances
Users are having difficulty understanding the robo-advisor's value
Users frequently contact customer support about robo-advisor's portfolio suggestion choices
The Solution:
While prototyping interactive components that follow the product’s new design system to fulfill the MVP, I suggested displaying specific pieces of data visualizations would create transparency into the Robo-Advisor’s usefulness over the periods of using this tool.
The Result:
The metrics for success are based on:
Meeting Sprint deadlines
Decrease in calls about robo-advisor tool
Data visualizations improving transparency with robo-advisor through user testing
Decrease in un-subscriptions
Though results haven’t been realized yet because solutions haven’t deployed, these metrics will show if solutions are successful.
Product Insights
As described above, the robo-advisor tool is a hands-off approach to retirement planning by setting your financial goals, risk tolerance, and investment time. This product runs the robo-advisor services through a third-party platform. Though not all people trust a robo-advisor alone to manage their portfolio, services such as an advisor-managed account in parallel with the robo-advisor increase trust in results.
Design Process
Worked in an Agile sprint framework, meeting with scrum leader, UX teams, product owners, and engineers daily.
Weekly sprints are typically broken into the steps below:
Research to determine user pain points, address business goals, competitor research, internal product review, user flow review
Ideation/Wireframing in Miro, outlining the minimum viable product component, proposing additional value to product components, and deciding component variants
High-Fidelity in Figma
Interactive Prototyping in Figma
Handoff with user stories to engineering
Reviewing final engineered product
Original UI and Components
The pages undergoing changes are Dashboard and Investment Strategy
Legacy User Flow
Updated UIs and components
Updated User Flow
Competitor Data Visualization Research
I compared how other financial institutions use data visualizations to ours and where they place data sets. This comparison helps to understand the narrative competitors are telling their users.
Using colored boxes I showed consistencies and differences between the UIs
My Target Managed Investment Mix - Wireframes
During the wireframing sprint, I conceived different ways to display data visualizations while trying to maintain the narrative of the previous page layout. This is where I sell Product Owners on the idea of product transparency to help gain user trust through data visualization.
Added value: Countdown timer to next quarterly rebalance
My Target Managed Investment Mix - High Fidelity Mock Up
Product Owner rejected:
Countdown timer for quarterly rebalance
Product Owner Approved:
Added tool tip ( i ) icon with description of all assets comprised of user’s My Target Managed Investment Mix
Reoriented table description
Learn more anchor link to FAQ section
Final Component
Legacy Component
Final Component
Investment Mix - Wireframes
Similar to My Target Managed Investment Mix, I wanted to focus on the transparency of product value through data visualizations to help gain user trust.
Added value: Displaying Risk Type Levels, Allocation Adjustments, A bar to compare Investment Mix Class Types, and Rate of Return for gains and losses
Target Allocations - High-Fidelity Mock Up
Product Owner rejected:
Comparison of Current Allocations and Target Allocations
Gains and losses for Rate of Return
Product Owner Approved:
Approved switch to donut chart
Approved showing class level assets Bonds, Stocks, Multi on donut chart
Always adding to 100% at bottom of asset class table
Switching Target Allocation table expansion to toggle
Switching Maintain company stock assets to toggle
v1 Component
Final Component
Legacy Component
Final Component
V1 Target Allocations - Interactive Prototypes
Donut Chart Fixed Scroll
The previous design kept a pie chart above the table of asset classes, and when scrolling down, you lose sight of the chart. The example allows you to scroll down while the chart is still fixed to the left side, keeping the donut chart in view.
1440 Interactive Prototype
960 Interactive Prototype
600 Interactive Prototype
Donut Chart Hover-state
Hovering over slices of the donut chart reveals percentages of each slice.
1440 Donut Chart Hover-state
Asset Class Table Drop Down
Clicking the drop-down reveals sub-asset types, while clicking on the toggle allows for a quick open function. Additionally, when first viewing Target Allocation, it starts off as partially open.
1440 Dropdown Tables
Mobile Asset Class Table Drop Down
Clicking the drop-down reveals sub-asset types, when pressing on the toggle allows for a quick open function.
V2 Target Allocations - Interactive Prototypes
The Project Owner wanted to revert to a component that represented what was there previously while maintaining the drop-down toggle and table features.
1440 v2 Target Allocation
960 v2 Target Allocation
600 v2 Target Allocation
Research Questions
Would it bother people if the donut chart didn’t scroll down with user?
Does showing part of the table open help to demonstrate functionality?
(Compared to table been fully open or closed)Is knowing when a quarterly rebalance occurs important to a user?
(Justifies countdown timer)