Case · Interaction Design · Vanguard
Helping people invest better by helping Vanguard invest in mobile
As interaction designer supporting Vanguard's global brand and responsive product teams, I delivered UI specifications for responsive web and hybrid mobile experiences: clearer data visualizations, a one-click enrollment grounded in behavioral economics, and a pattern library shared across five business lines.
0%Increase in plan participants saving at or above 4%After the redesigned data visualizations & plain-language content
+0%Lift in plan enrollments from the redesigned flowIndustry award–winning enrollment design
0Business lines sharing one responsive pattern libraryReduced design & development costs
AUM ↑Auto-enrollment boosted assets under management at scaleDefaults doing the heavy lifting
02 The Work
The chart on a phone, the enrollment in one click, and the specs that made both buildable.
Vanguard's participants met their retirement savings on whatever screen was in reach: a performance chart under a thumb, an enrollment decision on a lunch break, a secure home that had to hold from a small phone to a widescreen desktop. Swipe through the finished experiences below — the adaptive charts and the one-click enrollment — then the full specification system in Process.
Swipe or use arrows
Fig. 1–7 The adaptive performance chart specified for touch, the plain-language fix for “Net Transactions,” the orientation study, and the one-click enrollment from decision to welcome screen. Tap any figure to view it full size.
Participants didn’t understand the Net Transactions term.
The 2012 usability finding, quoted on the spec plate, that reset the content strategy
03 Process
One secure experience, every screen size, two platforms, and jargon in the way.
The participant experience was consolidating onto responsive web and a hybrid native/WebView app on a product timeline that didn’t pause for device proliferation. The risk wasn’t any single screen. It was fragmentation: each business line and each breakpoint solving the same problems its own way, while industry language kept participants at arm’s length from their own money.
Friction A
Every screen size at once
One secure account experience had to hold from a small phone held in one hand to a widescreen desktop, in portrait and landscape, without forking the design.
Friction B
Two platforms, one experience
Responsive web and a hybrid native/WebView app each carried different rendering constraints — native menus controlling in-page web UI, canvas elements needing explicit redraws.
Friction C
Jargon between people and their money
Terms like “Net Transactions” tested poorly in usability evaluation, and industry-wide, most workers with access to plan advice never used it.
Redesign the data visualizations around touch, not the mouse
- Specified swipe-driven data selection. Data points on a ten-year chart are too small for precise taps, so month-to-month selection became a swipe gesture with a dynamic infobox that repositions around the interaction point.
- Replaced jargon with plain language. An opt-in Net Transactions layer with an info-icon definition answered the 2012 usability finding directly, and framed contributions as positive impact on balance and compounding.
- Grounded orientation in research. Published device-holding studies showed the content design wouldn’t drive rotation, so small screens lock to portrait instead of relying on a landscape chart.
Nudge the enrollment: one click, smart defaults
Applying behavioral economics research published in Nudge, the enrollment flow leads with a complete default election — a pre-selected contribution rate, automatic annual increases toward the recommended savings rate, and a target-date default investment — with positive reinforcement when the participant captures the full employer match. One click enrolls; changing the defaults stays one link away. The design earned industry recognition and drove a 9% lift in plan enrollments.
Specify the pattern library to the pixel
- Component redlines developers could build from. The side-tab expand/collapse pattern documented with exact padding, icon sizes, touch targets, colors, loading states, and transition easing.
- Breakpoint behavior, x-small through desktop. Each component specified across screen sizes, including touch affordance spacing so significant actions can’t be triggered by accident.
- Shared across five business lines. Delivered with global brand management and UI development teams so the same responsive patterns served the whole portfolio instead of one product.
The system underneath
Swipe or use arrows
Fig. 8–18 The side-tab redlines and behavior specs, then the responsive secure home they govern, from large desktop through tablet portrait. Tap any figure to view it full size.
Workshops that made the specs stick
Hosted working sessions with product management and engineering on responsive and cross-platform mobile UI — walking the hybrid cases where a native menu controls in-page WebView components, where interaction requires a canvas redraw, and where a loading state needs to appear the instant a touch lands. The specification plates doubled as the workshop material, so what teams discussed was exactly what they built.
04 Results
More people saving, more people enrolled, and five business lines building from one library.
Savings behavior
+81%
Increase in plan participants at or above a 4% savings rate after launching the redesigned data visualizations and content strategy with less industry jargon.
Enrollment
+9%
Lift in plan enrollments from the industry award–winning one-click flow, increasing assets under management.
Scale
AUM ↑
Auto-enrollment defaults boosted assets under management at scale — the default election working for every participant who never touches a setting.
Efficiency
5 lines
Responsive pattern libraries delivered with global brand management and UI development teams reduced design and development costs across five business lines.
Press
WSJ
The Wall Street Journal’s report on personalized 401(k) advice featured Vanguard’s participant tools, noting that savers who used the savings-rate dial raised contributions by an average of two percentage points over six months.
Why it mattered
A retirement plan doesn’t lose participants to any single bad screen. It loses them to friction: a chart they can’t read, a term they don’t know, an enrollment they mean to finish later. Removing the friction — touch-first charts, plain language, defaults that work in the participant’s favor — meant the system did the encouraging, at every screen size, on both platforms, across five business lines at once.
Press: The Wall Street Journal, “401(k) Plans Add More Personalized Advice,” Sept. 4, 2013