Redesigning Vanguard’s My Plan Manager:
Vanguard, a global investment firm managing $7.7T+ in assets, partnered with Infosys to modernize My Plan Manager (MPM), its enterprise platform for managing complex retirement plans.
This case study explores how a system-driven, responsive redesign improved clarity, scalability, and cross-device usability for Vanguard’s MPM
Overview
The MPM site started showing its age with inconsistent experiences, an outdated visual language, and unreliable behavior across devices.
Problem
(MPM) had become increasingly difficult to use and scale reliably across devices.
Inconsistent navigation patterns frequently led users to dead ends and misdirected clicks
An outdated visual language reduced clarity and scannability
Dense, desktop-first layouts failed on tablet and mobile
Initial Product State
Legacy UI optimized for large desktop screens
Complex tables
Fragmented patterns
Partial adoption of the Constellation design system
Initial Outcomes
Early signals showed slower task completion
Increased navigation errors
Reduced efficiency across devices.
Solution
We redesigned the platform using a system-aligned, responsive-first approach.
Modernized the UI while preserving enterprise-level complexity.
Established scalable responsive patterns across all breakpoints.
Applied and extended Vanguard’s Constellation design system
Introduced clearer hierarchy, navigation, and mobile-friendly data patterns
Project Outcome (Wave 3)
30%
Reduction in misdirected navigation
System-driven
Responsive patterns adopted for future platform growth
Improved
Usability, clarity, and cross-device efficiency for advisors
My role & team
I joined the cross-functional Agile team as a UI Designer on Wave 3, gradually taking ownership of responsive patterns, system alignment, and cross-screen consistency.
My Role: UI Designer
Owned responsive UI design, drove system alignment across breakpoints, and led detailed QA through development and release.
Responsibility:
Delivered 5000+ responsive screens
Defined desktop-to-mobile translation patterns at enterprise scale
Ensured consistent behavior, hierarchy, and usability across all breakpoints
Team
Agile, cross-functional team
Product Managers
Engineers
Content Writers
Design Managers
UI Designers
STAGE 1
Discovery
Usability Breakdown
Early weeks focused on auditing the legacy platform with senior designers.
Key findings:
Everything was technically functional but experientially exhausting. Discovery confirmed earlier usability issues and revealed that responsive behavior was reactive rather than system-driven.
User & business impact
These issues slowed task completion, increased navigation errors, and introduced significant risk when scaling features across thousands of screens.
This wasn’t just an audit. It established principles for how every redesign decision needed to scale naturally across devices, not be retrofitted later.
STAGE 2
Define
Framing the problem and success criteria
Based on discovery, we aligned on clear goals and constraints.
Core problem
“How might we modernize a legacy, data-heavy enterprise platform to remain usable, consistent, and scalable across devices without disrupting existing workflows?”
Design Goals
Modernize the UI, improve cross-breakpoint clarity, align with Constellation, and create repeatable responsive patterns at scale.
STAGE 3
Designing at Enterprise Scale
Responsive Strategy & Execution
Each sprint introduced new workflows, screens and interactions to rethink. My responsibility was not only to redesign them but to ensure the experience worked predictably across all breakpoints.
Analyzing Desktop Layouts
I began by breaking down the 1920px screens:
Tables were dense with rows and columns, often exceeding viewport width
Tab structures existed for filtering or switching between views, but weren’t consistent
Interactive elements lacked clear affordances on smaller screens
Mobile Conversion Strategy
The challenge was translating complex data into a scannable, interactive mobile layout. Working closely with senior designers and the client’s design system team, I developed patterns like expandable rows, card-based structures, and progressive disclosure.
Key strategies included:
Tab-based navigation: Consolidated related sections into mobile tabs for easy switching
Scroll optimization: Vertical scrolling replaced horizontal scrolling; tables were broken into expandable rows or card-based layouts
Interaction cues: Added clear indicators for expandable content, sorting, and filtering
Progressive disclosure: Showed high-priority data upfront and hid secondary details in collapsible sections
Design System Integration (Constellation)
Using Constellation as the foundation, I translated tokens and components to ensure a unified, scalable interface across the platform.
As the redesign progressed, it became clear the system required evolution to support responsive complexity.
My Contributions
Applied Constellation system tokens for typography, spacing, and component usage
Identified gaps in the system: mobile-specific table patterns, tab interactions, and card expansions
Collaborated to define new components
Contributed scalable responsive patterns back into Constellation.
Outcome
A more resilient design system capable of supporting enterprise-level responsiveness.
STAGE 4
Delivery
Collaboration & Delivery
Transformation required alignment across product, engineering, content, and design teams.
Partnered with content writers to reduce dense labels into mobile-friendly microcopy.
Worked daily with engineers to validate responsive feasibility and edge cases.
Iterative reviews with PMs and Design managers ensured priorities stayed true to user needs.
Guiding a 4-designer team meant ensuring our output looked like it came from one mind, not four.
QA & Implementation Support
My involvement extended beyond handoff.
01
Conducted detailed UI QA across breakpoints (spacing, alignment, component usage)
02
Validated real-data behavior during development
03
Reviewed Jira tickets and shared annotated prototypes
04
Resolved issues early, reducing rework and shortening delivery cycles
Project Outcomes
Responsive Web Designs for My Plan Manager (MPM)
Outcomes (Wave 3 roll-out):
Metrics focus on usability, navigation clarity, and system scalability, reflecting the enterprise modernization phase.
30% reduction in misdirected navigation
Driven by clearer hierarchy and restructured navigation patternsConsistent, accessible experience across desktop, tablet, and mobile
Scalable system-aligned patterns adopted in future waves
Improved organizational adoption of design-system-driven workflows
Metric
Baseline (Legacy Platform)
After Redesign (Wave 3)
Change
How we measured
Navigation Accuracy (Usability)
Frequent misdirected clicks and dead-end navigation paths
Clearer navigation flows with fewer incorrect paths
Misdirected navigation ↓30%
Usability testing, internal analytics, stakeholder feedback
Task Efficiency (Workflow Clarity)
Slower task completion due to dense layouts and poor hierarchy
Faster scanning and clearer task progression
Improved task efficiency
Task-based usability tests and SME reviews
Cross-Device Usability (Responsiveness)
Desktop-first experience; layouts broke on tablet and mobile
Consistent behavior from 1920px to 320px
Major usability gains across devices
Responsive QA audits and cross-device testing
Design Consistency (System Adoption)
Fragmented patterns and partial system usage
Unified, system-aligned components and patterns
High system compliance
Design reviews and design system audits
Scalability (Future Readiness)
Ad-hoc responsive fixes per screen
Reusable responsive patterns adopted platform-wide
Scalable foundation established
Pattern reuse tracking and design system contributions
Wrapping it Up
Recap
Responsive Redesign Work
Collaborated with PMs and stakeholders each sprint to prioritize user stories and deliver responsive layouts with consistent visual structure.
Team Leadership & Design Review
Led a 4-designer team, providing peer review and guidance to maintain visual and interaction consistency.
Collaboaration
Held daily syncs across product, engineering, content, and design teams to align design intent and resolve implementation queries.
QA & Handoff Support
Provided interactive prototypes and conducted post-development inspections to streamline handoff and reduce rework.
My Learnings
While I can’t share detailed visuals due to NDA restrictions, this project fundamentally reshaped how I approach enterprise-scale design.
It gave me hands-on experience working within a large-scale design system and taught me how to evolve the system while actively using it. I learned to balance structure and creativity while coordinating across multiple disciplines in a corporate environment.
Key takeaways from this work include:
Maintaining coherence across thousands of screens while ensuring high-quality output
Coordinating effectively with design, PMs, engineering, and multiple design teams
Balancing speed with rigor to refine both craft and process
Leading a small design team while scaling work across a complex enterprise application
Understanding the importance of design system discipline for consistency, efficiency, and scalable outcomes
This project demonstrated how structured processes, responsive design, and disciplined UI practices can elevate a legacy enterprise product.
Next Steps
Scale system-aligned responsive patterns across remaining product areas
Strengthen mobile and accessibility patterns within Constellation
Partner with product and engineering to measure long-term usability impact