Summer 2021
Redesigning the 401(k) investment interface to increase user engagement and empower better financial decisions.
Team and Process
Team
Product Designer & Researcher
Jules Bennett
Led the design process, conducted user research, and collaborated with the development team to ensure seamless handoff.
Project Manager
Raj Pandya
Managed timelines and resources, keeping the project on track and aligned with goals.
Product Owner
Ron Thompson
Defined the product vision and ensured it met both user needs and business objectives.
Process
1
Current State Audit
We began by auditing the existing 401(k) experience, identifying user pain points and opportunities for improvement.
2
Prototyping & Testing
We created low- and mid-fidelity prototypes, tested them with users, and iterated based on feedback.
3
Hi-Fi Prototyping
We refined the design into high-fidelity prototypes, ensuring visual and functional quality.
4
Development Handoff
Delivered design specifications and collaborated with developers to ensure the design was faithfully implemented.
The Problem
ePlan Services, a 401(k) provider, sought to enhance their investment application to create a clearer, more user-friendly experience. The goal was to improve investment management tools, make data visualizations intuitive, and provide targeted support for diverse user needs.
“I want to be able to dig into my investments more.”
401k Investor
Current State Audit Themes
Our audit revealed key areas for improvement:
Information Overload
Chunk information into simpler, easier-to-understand components.
Financial Education
Prompt users to enhance financial literacy with integrated educational tools.
Data Visualization
Use clearer, more interactive data visualizations to simplify complex data.
Design Consistency
Implement a component library to maintain consistency across the interface.
Current Investment Landing Page
Key Issues
Repetitive information
Primary CTA misaligned with typical user actions
Information could benefit from chart representation
Key details below the fold; could be consolidated
Fund details page access is unclear
Current Set Investments Page
Key Issues
“Total Allocated” fixed at top; requires scrolling for reference
Lacks sorting/filtering options for long lists
No indication of current fund ownership
Fund details only accessible via PDF
The Solution
Financial Efficacy
We believe that if investors are presented with more robust financial literacy tools, their financial acumen and retirement outcomes will improve.
Error Reduction
We believe that if investors have simpler, more seamless investment management tools, they'll make fewer errors when managing their investments.
Informed Decisions
We believe that if investors see more robust data visualization tools, they'll be able to make more informed decisions.
Personas
We tailored our solution to meet the needs of various personas
Jack
A small business owner earning over $250K per year. Jack relies on a trusted advisor for his 401(k) and rarely checks its performance himself.
Paula
An assistant making $40K per year, married with two children. Budgeting is challenging due to debt, and she contributes minimally to her 401(k) with little knowledge around investing.
Derek
An accountant making $100K per year, constantly checking his 401(k) to optimize his portfolio, which often leads to over-adjustment.
Note: These personas are based on a more detailed set articulated in another project.
Revised Information Architecture
Focusing on the investment experience, we reorganized content to streamline common user tasks.
Scenarios and User Flows
Scenario 1
Jack’s Scenario
Jack’s advisor recommends rebalancing his portfolio due to recent market shifts. Jack logs in to complete this task.
"The stock market has been performing really well this year. I think I need to rebalance my portfolio"
Jack
Tasks
Rebalance his portfolio
Enable auto-rebalance
User flow
Logs in
Checks investments
Begins rebalance
Confirms submission
Reviews details
Submits request
Scenario 2
Paula's Scenario
Paula, motivated by recent research, adjusts her portfolio to 80% US stocks and 20% US bonds.
"After doing some research, I'm ready to adjust my 401(k) so that it helps my family reach retirement"
Paula
Task
Update her investments to match her desired portfolio.
User flow
Logs in
Checks investments
Adjusts allocation
Reviews and confirms
Buys funds
Sells funds
Scenario 3
Derek's Scenario
During his monthly financial audit, Derek downloads fund details for his personal records.
"I'm working on my financial spreadsheet and need to update it using my current 401k details."
Derek
Task
Access and download detailed fund information.
User flow
Logs in
Checks investments
Reviews fund list
Downloads fact sheet
Accesses fund details
Formative Usability Tests
Usability Testing
We tested with 6 users of varying investment experience to gauge learnability and ease of use in our redesigned app.
A screenshot of our low-fidelity prototype that we used to test with research participants
Metrics by Tasks
Our redesign was successful, with participants describing it as “cleaner, more concise, and comprehensive.”
Find list of current investments
Success rate: 100%
Error rate: 0
Ease of use: 5/5
Find all funds available to you
Success rate: 100%
Error rate: 0.5
Ease of use: 5/5
Find fund details
Success rate: 100%
Error rate: 0
Ease of use: 5/5
Change investments
Success rate: 100%
Error rate: 0.5
Ease of use: 4/5
Exchange investments
Success rate: 85%
Error rate: 1
Ease of use: 4/5
Rebalance investments
Success rate: 100%
Error rate: 0.5
Ease of use: 4/5
Turn auto-rebalance on
Success rate: 100%
Error rate: 1
Ease of use: 4.5/5
Turn target allocation balance warning on
Success rate: 100%
Error rate: 0
Ease of use: 5/5
Findings
While our redesign improved key UX metrics, some additional needs emerged:
1
Account Type Display
Users wanted to see Roth and Regular balances separately.
2
Set Investments Flow
Clarify steps for setting target allocation.
3
Expert Tools
Add CSV/XLS download options for funds.
"The new designs are clear, concise, and comprehensive."
401(k) participant
Hi-fidelity designs
Informed by our test results, we built a hi-fi prototype with visual design enhancements.
Before and After
A reorganized investment landing page reduces cognitive load and focuses the user experience.
Landing Page
Key Features
Total balances are minimized, prioritizing portfolio management
Toggle view for current vs. available funds
Data visualizations of current vs. target allocations
Quick links to common tools
Dynamic prompts for better habits and literacy tools
Financial education tools at ones finger tips
Fund Details
Key Features
Toggle between funds
View balances across account types
Simplified fund data visualizations
Fund performance over multiple timeframes
Investment Settings
Key Features
Auto-rebalance setup
Allocation balance warnings
Set Target Allocation
Key Features
Target allocation vs. current comparison
Sticky footer for easy navigation
Rebalance Portfolio
Key Features
Target vs. current allocation view
Sticky footer for key info access
Exchange Funds
Key Features
View balance of sold funds
Resource access for informed decision-making
Onboarding
A tailored onboarding experience guides users through the app.
"This is really an improvement from the previous design. You were able to really incorporate a human centered approach."
Client
Responsive Design
All screens are fully responsive to ensure accessibility across devices.
Impact and Handoff
The design demonstrated measurable improvements in user engagement and satisfaction
Post-launch metrics highlight meaningful gains
↑ 21%
Increased use of financial literacy tools, suggesting users are more engaged in enhancing their financial knowledge.
↓ 60%
Significant reduction in error rate, indicating that the new, streamlined design minimizes mistakes during investment management tasks.
↑ 25%
Enhanced user satisfaction, reflected by improved quantitative feedback in in-product surveys.
↓ 29%
Decrease in support requests, demonstrating a more intuitive user experience and reduced need for customer assistance.
Note: Metrics were compiled by comparing a pre-launch benchmark from three months of aggregated data with a post-launch analysis based on one month of aggregated data.
"Overall I really like the new design enhancements. I think it helps give our customers the tools they need to make better investment decisions."
Client
Key reflections on the design process
Diverse research participants
Recruiting a variety of research participants allowed us to uncover unique needs and areas for improvement that benefit both novice and expert investors. This approach informed a design that feels accessible to a wide range of users.
Data visualization as a powerful tool
Introducing data visualizations to communicate complex investment information proved invaluable. Simplified visuals helped reduce cognitive load and enabled users to make more informed, confident decisions.
Clear system status indicators
Displaying real-time system statuses during complex workflows, such as rebalancing or fund exchanges, improved users’ perceived ease of use. By making the app’s processes visible, users experienced greater task success and confidence in their actions.