Portfolio website

Vanguard

| 2022

Redesigning responsiveness as a system for one of the world's largest retirement plan platforms

TL;DR

The platform and what was at stake MPM is Vanguard's enterprise 401(k) management platform, used by HR teams and plan administrators to handle payroll, compliance, and participant data. Errors here are not UX friction. They are regulatory failures affecting real employees' retirement outcomes.

The platform had been built desktop-first for years with no responsive foundation. By the time I joined, inconsistent breakpoint behavior was a platform-level risk across 5,000+ screens and 4 product teams.

Role

Experience Designer (early career)

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

Outcomes

Reduced misdirected navigation

by 30%

Advisors landed in the right workflows instead of backtracking across screens.

Predictable responsive behavior desktop → mobile

The same interaction logic held across breakpoints.

Reusable patterns adopted platform-wide

Each new feature reduced UX debt instead of compounding it.

What I owned

I was responsible for designing the responsive components that closed the gap, translating the team's system-level strategy into repeatable, buildable UI patterns that 4 product teams adopted across the platform.

I joined a moving train. Multiple teams were already shipping. Legacy patterns were baked into production. There was no shared language for how components should behave across breakpoints, no documented patterns for future teams to build from, and no consistent rules for how data-dense tables, tabs, filters, and navigation should adapt from 1920px down to tablet and mobile. My mandate was to design the components that would make the responsive strategy buildable and repeatable, starting with what was breaking most visibly and most often.

The Problem

Three failures showed up consistently: data-dense tables that became unusable on smaller screens, tab and filter behavior that broke on tablet without warning, and desktop interactions that assumed screen widths mobile could not deliver. The cause was always the same. Responsiveness had been treated as a per-screen fix rather than a system-level constraint.

Every screen-level patch that shipped before this work added to the QA surface without reducing the underlying risk. Each fix solved today's problem and made tomorrow's release slightly harder to predict. The system had never been given the rules it needed to behave consistently at scale.

The Guiding Decision

Treat responsiveness as a system-level constraint, not a per-screen adaptation.

At Vanguard's scale, fixing individual screens wasn't progress — it was postponing the real problem. Consistency wasn't a preference. It was the difference between a reliable platform and a fragile one.

Design Decisions

Three structural shifts, each chosen to hold up under enterprise scale.

What kept breaking:

Wide tables with horizontal scrolling,

Inconsistent tab and filter behavior

Interactions that only made sense on desktop

Decision 1

Preserve data integrity instead of simplifying it away

The instinct:

Remove dense data to reduce complexity on smaller screens.

What we did instead:

Redesigned how data was revealed: expandable rows, card layouts, progressive disclosure rather than what data was shown. Advisors relied on that density. Removing it would have broken their workflows.

Why it mattered:

Scannability improved without eroding trust or changing how advisors actually worked.

Decision 2

Prioritize vertical flow over horizontal flexibility

What kept breaking:

Wide tables with horizontal scrolling, inconsistent tab and filter behavior, interactions that only made sense on desktop. Layouts that looked fine at 1920px failed completely on tablet.

What changed:

Replaced horizontal scrolling with vertically stacked layouts and sticky columns. This restructured information hierarchy rather than just resizing it.

Why it mattered:

Responsive design only held once information was restructured — not shrunk.

Before: Horizontal scrolling failed on smaller screens.

After: Vertically stacked expandable/collapsible patterns

After: Sticky columns

Decision 3

Constrain responsive behavior to protect system consistency

The uncomfortable call:

We limited responsive behavior to a small set of approved, system-aligned patterns; even when it reduced flexibility on individual screens.

Why it mattered:

At this scale, one-off solutions increased QA risk. Enforcing constraints reduced pattern fragmentation, protected Constellation alignment, and allowed the platform to scale without compounding debt.

Design System Work

Responsive gaps in Constellation - found, documented, fed back.

The design system gave us a foundation, but responsive work exposed real gaps. I contributed by applying system tokens consistently across breakpoints, identifying missing responsive patterns (mobile tables, tab behavior, expandable cards), and collaborating with system owners to define and document new components. Validated patterns were fed back into Constellation for future teams to build on.

Executing at Enterprise Scale

Beyond handoff, I stayed in the build.

Partnered with PMs to align responsive behavior with workflow priorities · Worked with content writers to simplify dense labels into mobile-friendly microcopy · Validated feasibility and edge cases with engineers · Conducted UI QA across desktop, tablet, and mobile · Reviewed Jira tickets and shared annotated prototypes · Flagged issues early to reduce rework.

At this scale, QA wasn't polish — it was risk mitigation.

Trade-offs Made

Chose system reliability over per-screen flexibility, every time.

Traded away

Per-screen flexibility

Visual simplification

Speed of individual fixes

In favor of

System-wide consistency

Data integrity

Scalable, reusable patterns

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

Key Takeaways

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.

Usability fixes fail at scale when the rules stay broken

Progress came from enforcing layout and interaction rules that prevented issues from repeating, not patching individual screens

Data density, not visual complexity is what breaks responsive design

Restructuring information hierarchy was the only thing that held up across breakpoints

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: Detailed visuals are under NDA.

Explore next project

Open to product designer roles at companies building AI products, complex B2B systems, or anything where earning user trust is part of the design problem - not an afterthought.

If the problem is complex

and the users are skeptical,

I've been waiting for your email.