Responsive Web | 2020 - 2021

This "nudge" appears on Vanguard Participant's My Money dashboard and is displayed when a they aren't contributing enough to their 401k to meet their employer's 401k match. Effectively they are leaving "free" money on the table.

This case study breaks down my process designing this feature to engage Participant's to meet their employer's 401k match and educating them on what that means.

My role

Senior Product Designer

As one of the most senior product designers, I was tasked with the more complex user flows and interactions. I was responsible for the design ideation, wireframes and dev-ready UI design.

Product team: Domestic & international product designers | copywriters | developers | creative director | product management | client stakeholders

User research

This project was kicked off with 6-months of in-depth research of the retirement savings journey across users. These insights informed our product strategy and the direction of artifacts like our user stories.

There was a multitude of insights, but key ones that we carried through each feature of the experience was grounded in the understanding that Participants need:

Small, achievable targets

Reassurance along the way

Contextual, relevant advice

Critiquing the original

Before tackling the new design, we critiqued the original experience to see where we can improve and innovate.

We noticed there was:

• A lack of visual hierarchy to orient and direct the user

• Little to-no interactive elements 

• Multi-step process, with dense explanations

Setting a strategy

With that knowledge and our insights from user research we strategize with the goals to:

→ Simplify the interaction

→ Provide contextual clarity

→ Establish a clear hierarchy

Wireframe iteration & refinement

As I was thinking about this nudge and its use case, to encourage a user to increase their contribution, I was inspired by the idea of a thermometer and its clarity of a current status of temperature going up or down.

I translated my ideas in to wireframes and iterated and refined the interaction design, across devices.

First iteration - Full bleed approach
Second iteration - Textured shortfall
Mobile interaction test

Product design walkthrough

A breakdown of the final design and why we made these decisions.