Planning & Advice: Simplifying Senior Financial Decisions with UX-Focused design

TL;DR – Quick Summary

Project Overview

I played a key role in designing Planning & Advice from the ground up as a centralized hub for seniors seeking financial guidance on insurance, Medicare, and retirement planning. Using secondary research, UX best practices, and industry analysis, I structured content and optimized information architecture to improve accessibility and engagement. Through collaboration with research, business, and development teams, I iterated on design solutions, ensuring seamless developer handoff and alignment with business goals.

My Contributions

Timeline: August 2019 – February 2020
‍My Role: UX Visual Designer (Wireframing, User Flows, Navigation)
Key Impact: Created a new centralized hub for financial resources, improving discoverability and navigation for seniors
Process: Designed wireframes, iterated on navigation, collaborated with research & business teams
Results: A scalable, accessible resource empowering users to make informed financial decisions

The final Planning & Advice mega menu, which I designed through wireframes for UX information architecture and navigation, offers a guided entry with 15 curated links to key topics like Medicare and Life Insurance, while a 'View All Resources' option provides users the flexibility to explore further with advanced filtering.

Problem & Goals

Before the redesign, seniors struggled with:

Disconnected financial resources spread across different areas of the website
Overwhelming financial terminology leading to decision fatigue
Difficulty finding relevant resources due to poor navigation

Project Goal:

To create a structured, user-friendly centralized hub that simplifies the discovery of insurance, Medicare, and retirement resources.

My Approach

1. Wireframing & Iteration Process

I designed and iterated multiple wireframes, refining:

Mega Menu Navigation: Guided entry points & categorized filtering
Page Structure: Improved content hierarchy for scannability
User Flows: Ensured seamless movement across resources

Exploring iterations: These three low-fidelity wireframe versions of the Planning & Advice mega menu showcase the iterative design process, refining UX information architecture and navigation to enhance clarity, accessibility, and user flow.

2. Enhancing Secondary Navigation

The final secondary navigation was placed directly below the main navigation, just under the page title, acting as a visual breadcrumb. This placement ensured users could immediately understand their location within the Planning & Advice section without needing to return to the mega menu.

To enhance clarity, I incorporated:

Active state indicators using font color changes and a bottom border highlight.
Proximity to page titles, reinforcing the user’s current location.
A structured layout that allowed seamless navigation between the landing page, resource page, and subcategories.

Final Secondary Navigation – Positioned below the main navigation and page title, this design acts as a visual breadcrumb, using active states, font color changes, and a bottom border highlight to improve user orientation and navigation clarity.

Exploring multiple secondary navigation structures in Figma, testing variations in visual indicators, hierarchy, and placement to enhance usability.

Designing the Resource Repository

Since Planning & Advice was built as a new centralized hub, I designed the resource repository to give users more control over what they wanted to see by implementing seamless content filtering and intuitive organization:

Refined filtering UI for clarity & usability
Implemented keyword search & category selection to allow users to customize their browsing experience
Enabled dynamic content sorting so users could prioritize the most relevant articles, videos, and tools based on their needs

Final Resource Repository – Featuring a keyword search bar and category-based filtering, empowering users to tailor their content discovery experience.

Repository Filtering Iterations – Early wireframes showcasing different approaches to search and filter functionality, refining user control and discoverability.

UX Process & Tools

Design & Prototyping Workflow

Wireframing: Low-to-high fidelity designs in Figma
Prototyping: Iterative testing to refine usability
Collaboration: Worked closely with research, business, and development teams for seamless implementation

I blend hand-drawn wireframes with tools like Figma to create user-centered design solutions that support iterative development.

Impact & Key Takeaways

How the Redesign Improved User Experience

Created a New UX Hub: Designed a centralized space for financial resources
Improved Navigation: Simplified discovery of critical resources
Reduced Decision Fatigue: Clearer content hierarchy and filtering
Scalable UX Framework: Designed with future content expansion in mind

Final Thoughts

Lessons Learned & Reflections

This project reinforced how thoughtful wireframing and UX structure, informed by research collaboration, can dramatically improve a complex financial experience.