Vanguard • My Money Dashboard

The My Money dashboard is our user's launchpad to their retirement savings journey.

Scroll to explore


The first feature we tackled was arguably the most crucial - the My Money dashboard. As the guidepost for the Participant’s retirement savings progress, the Dashboard needed to anticipate the Participant's next best step, and supplement with relevant information to guide them to their retirement goals.

Information zoning

Before translating designs in to digital wireframes, I find it useful to document the page sections from a 500-foot view to get a holistic idea of what the experience will include. Zoning helps me weigh options of content subjects, informs how I set hierarchy, and guides what I include in the interaction design of the featue.

First iteration
Second iteration

I then translate the idea first into sketches, followed by high-fidelity wireframes to use in stakeholder and team reviews. They’re key in how I further iterate, refine, and pressure test across devices and scenarios.

Sketching & wireframing

This is where I spend time collaborating with developers to incorporate and understand any underlying APIs and technical challenges.
First iteration
Second iteration

UI Design

At this stage, I transform the wires in to the UI design. Since this was the first feature of the project and would be setting the stage for component design it was imperative we took a reusability and scalability lens in each new design element, graphic, animation, and labels we developed.

The dynamic nature of the dashboard and the wide range of user types required multiple permutations of each section.

Experience Artifacts

The dashboard could take several forms depending on the user and their retirement savings experience. To maintain design governance across the experience, I produced documentation of the permutations and links from the dashboard. This blueprint grew for each new feature and page design and helped as a reference point across the team to maintain consistency.