designer • leader • collaborator • innovator • problem solver
MetLife
Retirement Income Center
Project Overview
Timeline: 6 months | My Role: Senior Product Designer | Team: Product Manager, Client SME's,
3 Developers, | Platform: Web & Mobile
As the Product Design Lead on MetLife's digital transformation initiative, I spearheaded the complete redesign of the Retirement Income Center, creating a modern, self-service platform that reduced quote processing time from 3-5 business days to real-time results.
The Challenge
User Pain Points Identified
Through user interviews with 45 customers aged 50-70, we discovered critical friction points:
-
Outdated Interface: 73% of users described the existing platform as "confusing" and "unprofessional"
-
Phone Dependency: Users had to call during business hours for annuity quotes, creating a 3-5 day delay
-
Brand Inconsistency: The platform didn't reflect MetLife's updated brand identity, undermining trust
-
Complex Information: Financial jargon and dense layouts overwhelmed 68% of users during testing
Business Impact
-
40% quote abandonment rate due to friction in the phone-based process
-
High customer service costs from repetitive quote requests
-
Brand perception misalignment with MetLife's digital-first strategy
Research & Strategy
User Research Insights
-
Primary Users: Adults 50-70 planning retirement, varying financial literacy levels
-
Key Behavior: 82% prefer self-service tools but need educational support
-
Trust Factors: Clear explanations, professional design, and transparent pricing were top priorities
​​
Design Principles Established
-
Transparency First: No complex language
-
Progressive Disclosure: Show information when users need it
-
Accessibility: Designed to meet web accessibility standards
-
Mobile-Responsive: Designed for the growing trend of mobile usage in financial services
The Solution
Information Architecture Redesign
Restructured the entire site flow into three logical phases:
-
Learn → Educational content and planning tools
-
Explore → Interactive quote tool with real-time results
-
Connect → Direct access to financial advisors when ready
​​
Key Design Innovations
1. Self-Service Annuity Quoting Tool
The Game Changer: Replaced phone-based quotes with an intelligent online tool
Features Designed:
-
Smart Input Validation: Real-time feedback prevents user errors
-
Visual Quote Comparison: Side-by-side comparison of Fixed, Variable, and Indexed annuities
-
Explanation Tooltips: Complex terms explained in plain language
-
Save & Share Functionality: Users can save quotes and email them to spouses/advisors
Technical Innovation: Integrated with MetLife's actuarial systems for real-time pricing
2. Educational Content Strategy
Problem Solved: Users felt overwhelmed by retirement planning complexity
My Approach:
-
Interactive Retirement Calculator: Visual sliders showing how contributions affect future income
-
Decision Trees: "Which annuity is right for me?" guided experience
-
Video Library: 2-minute explainer videos for each annuity type
-
Downloadable Worksheets: Retirement planning checklists users could complete offline
3. Responsive Design System Implementation
Challenge: Ensure consistency across all touchpoints while maintaining usability
Solutions:
-
Component Library: Built 25+ reusable UI components aligned with MetLife's design system
-
Adaptive Layouts: Different information hierarchies for mobile vs. desktop
-
Touch-Friendly Interface: Increased button sizes and spacing for older users
-
High Contrast Mode: Enhanced accessibility for users with vision impairments
Design Process & Collaboration
Cross-Functional Partnership
-
Weekly stakeholder reviews with product manager and client to align on business goals
-
Daily standups with development team to ensure technical feasibility
-
Bi-weekly user testing sessions to validate design decisions
-
Monthly executive presentations showcasing progress and user feedback
​
Rapid Prototyping Approach
Used Figma for high-fidelity prototypes, allowing stakeholders to experience the full user journey before development. Created interactive prototypes for the quote tool that demonstrated real-time calculations.
MetLife Retirement Income Center
Educational Resources & Expert Access
Recognizing that retirement planning involves complex decisions, I designed Learn and Connect sections to complement the self-service quote tool. Learn provides educational resources and decision guides, while Connect offers seamless access to financial advisors when users need personalized support.
Responsive Design for All Devices
MetLife Retirement Online Quote Tool
From Phone Calls to Personalized Quotes in 7 Steps
I created an intelligent quote tool that replaces the manual phone process with a logical 7-step digital journey. Users progress from high-level decisions about income timing and product options to detailed inputs about amounts and personal information, ending with a filterable quote summary. This structured approach allows users to make informed choices at each stage while building toward a personalized result that matches their specific needs.
(Click on image to enlarge slideshow)
Get a Quote Slideshow
Universal Design: Desktop, Tablet, and Mobile
The Impact and Outcomes
The redesigned platform successfully addressed the identified shortcomings of the previous design. By delivering a clean, intuitive, and visually consistent experience, the new Retirement Income Center now provides users with the tools they need to take control of their financial planning. The online annuity quoting tool, in particular, was a critical step in empowering users and creating a more efficient, modern, and self-service-oriented platform. The project was well-received by stakeholders for its successful implementation of the new design system and its clear focus on improving the user journey.
​
This project exemplifies how thoughtful design can transform complex financial services into approachable, self-service experiences that benefit both users and business objectives.