Vanguard
| 2022
Prevented an enterprise platform from collapsing under scale by redesigning responsiveness as a system, reducing misdirected navigation by 30%
Outcomes
Reduced misdirected navigation by 30%
Advisors landed in the right workflows instead of backtracking across screens.
Made responsive behavior predictable from desktop → mobile
The same interaction logic held across breakpoints.
Established system-aligned responsive patterns for future waves
Each new feature reduced UX debt instead of compounding it.
Before:
Advisors clicked into the wrong flows, scanned dense tables, and lost context, especially on tablet and mobile.
The platform technically worked, but each new screen made it harder to use and riskier to maintain.
After:
Misdirected navigation dropped 30%, responsive behavior became predictable from desktop to mobile, and new features stopped compounding UX debt.
This wasn’t a visual refresh. It was about stopping small usability issues from turning into platform-level risk.
TL;DR
Vanguard, a global investment firm managing $7.7T+ in assets, partnered with Infosys to modernize My Plan Manager (MPM), an enterprise platform used by advisors to manage complex retirement plans.
MPM supported critical, high-stakes workflows. While the platform was functionally sound, its legacy, desktop-first design made everyday tasks harder to complete and increasingly risky to scale across devices.
Over time:
usability slowed down,
responsive behavior became inconsistent,
and every release increased QA risk.
I worked on Waves 3 & 4 of the redesign within a senior-led design organization, helping shift MPM from reactive, screen-by-screen responsiveness to a system-driven responsive foundation aligned with Vanguard’s Constellation design system.
Role
Experience Designer (Junior–Mid Level)
Client
Vanguard
Partner
Wongdoody + Infosys
Domain
Enterprise B2B SaaS · Investment & Retirement Management
Team
Product Managers · Engineers · Content Writers · Legal teams · Design Managers · UI Designers
Timeline
1.5 years · Wave 3 & 4 of a multi-year platform modernization
The Problem
At first, this looked like a usability problem.
It wasn’t.
For Users
1
Dense tables slowed scanning and task completion
2
Inconsistent navigation led to dead ends and misdirected clicks
3
Tablet and mobile experiences were unreliable
For the Organization
1
Responsiveness was handled reactively, screen by screen
2
Each new feature increased inconsistency and QA risk
3
Scaling across thousands of screens amplified UX debt
The real issue: Responsiveness had never been designed as a system. Every “fix” solved today’s screen and made tomorrow’s release riskier.
What I inherited
I didn’t walk into a clean slate.
I walked into a moving train, multiple teams shipping in parallel, with legacy patterns already baked into production.
Responsiveness was being addressed, but mostly through localized, screen-level decisions. That approach worked in the moment, but it allowed inconsistencies and edge cases to accumulate as the platform scaled.
The Guiding Decision
Treat responsiveness as a system-level design constraint, not a per-screen adaptation.
At Vanguard’s scale, fixing individual screens wasn’t progress, it was postponing the real problem.
In Waves 3 & 4, my role was to help translate a system-driven approach into repeatable UI decisions, so screens behaved predictably across breakpoints and stayed aligned with Constellation.
Designing the System
Step 1: Deconstructing desktop complexity
I started by breaking down large-screen layouts (1920px+) to see where they collapsed on smaller devices.
What kept breaking:
1
Wide tables with horizontal scrolling
2
Inconsistent tab and filter behavior
3
Interactions that only made sense on desktop
This made one thing clear:
We couldn’t “shrink” desktop screens.
We had to rethink structure.
Several early layouts looked fine on desktop and failed completely on tablet. Finding patterns that worked across devices took multiple passes.
This analysis helped establish how layouts needed to adapt systematically, not case by case.
Key Design Decisions Under Enterprise Constraints
Preserve data integrity instead of simplifying it away
Rather than removing dense data advisors relied on, we redesigned how it was revealed using:
Expandable rows
Card layouts
Progressive disclosure
→ Improved scannability without breaking trust or workflows.
Prioritize vertical flow over horizontal flexibility
Wide tables and horizontal scrolling failed on smaller screens. We replaced it with:
Vertically stacked layouts
Sticky columns
→ Clearer hierarchy and more confident interaction across devices.
Before: Horizontal scrolling failed on smaller screens.
After: Vertically stacked expandable/collapsible patterns
After: Sticky columns
3. Constrain responsive behavior to protect system consistency
This was uncomfortable.
We limited responsive behavior to a small set of approved, system-aligned patterns, even when it reduced per-screen flexibility.
At this scale, consistency wasn’t a preference.
It was the difference between a reliable platform and a fragile one.
→ Reduced QA risk, prevented pattern fragmentation, and allowed the platform to scale.
Design system integration
Constellation, Vanguard’s design system, gave us a foundation, but responsive work exposed real gaps.
I contributed by:
1
Applying system tokens consistently across breakpoints
2
Identifying missing responsive patterns (mobile tables, tab behavior, expandable cards)
3
Collaborating with system owners to define and document new components
4
Feeding validated patterns back into Constellation
Outcome: A more resilient design system that future teams could actually build on.
Executing at Enterprise Scale
As Wave 3 expanded, consistency mattered as much as visual polish.
I partnered closely with:
1
PMs to align responsive behavior with workflow priorities
2
Content writers to simplify dense labels into mobile-friendly microcopy
3
Engineers to validate feasibility and edge cases across breakpoints
QA & Implementation Support
My involvement extended beyond handoff.
1
Conducted detailed UI QA across desktop, tablet, and mobile
2
Validated real-data behavior during development
3
Reviewed Jira tickets and shared annotated prototypes
4
Flagged issues early to reduce rework
At this scale, QA wasn’t polish, it was risk mitigation.
Impact at Scale
Usability
30% fewer misdirected navigation paths
Responsiveness
Predictable responsive behavior across devices
Scalability
Reusable responsive patterns adopted platform-wide
See impact breakdown here
What I learned
As a junior–mid level designer, this project shaped how I think about enterprise UX and design systems that hold up under scale, constraint, and real-world risk.
1
Usability fixes fail at scale when the rules stay broken
At Vanguard’s scale, one-off fixes increased QA risk. Progress came from changing and enforcing layout and interaction rules that prevented issues from repeating.
2
Data density, not visual complexity is what breaks responsive design
Shrinking desktop layouts failed quickly. Responsive design only held up once information was restructured using vertical flow and progressive disclosure.
3
Cross-functional alignment is what turns design decisions into shipped systems
Responsive patterns scaled only when design, product, engineering, content, and QA aligned early and pressure-tested decisions together.
Note: Due to NDA restrictions, detailed visuals can’t be shared.
Mobile? Cute.
My portfolio needs more room.
Try desktop ☺
While that’s happening,
you can find me on