The thank-you screen at the end of my redesigned walkthrough

Research, as a team

Five of us worked as a team to redesign Vanguard’s Year in Review for people at or near retirement age.

We started with discovery. We read through Vanguard’s website and reports, then researched how people spend money from their fifties onward. Each of us ran one usability test of the existing experience, five tests in total, with participants over 50 from a range of backgrounds. We also did our own affinity mapping, shared our findings, and peer-reviewed each other’s work.

After that, each of us worked on our own redesign. This one is mine.

Persona poster for Paper Trail Pat, 72, a contractor in Kansas City who is not yet retired and is unsure whether he has enough saved
Paper Trail Pat, the persona I made from our team’s research.

Design approach

Vanguard didn’t give us a formal style guide, so I made my own for my redesign. I based it on their existing look, their reds and pinks and most of the other elements they already used, so the walkthrough still looks like Vanguard. Then I set the walkthrough apart from the rest of the site so people know they’ve started a guided experience that’s worth finishing.

My style guide: Vanguard red and pale pink as primary colors, teal and blue secondary colors, Maven Pro type sizes, and the walkthrough header, lightbulb guidance box, and buttons
The style guide I made for my redesign. I pulled Vanguard’s colors and fonts from their site with browser extensions (a color picker and WhatFont).
Vanguard’s original rebalancing screen: the text on the left, and a large cartoon of a seesaw filling the right half
Original (Vanguard): the cartoon takes up half the screen.
Screen titled “You finished last year with a well-funded goal,” with a lightbulb box of guidance, a gauge showing 85% likelihood of success, a link to learn how it’s measured, and progress dots in the header
My version: a chart of the customer’s real progress toward their goal in place of the cartoon, a lightbulb box with guidance, and a link for anyone who wants to learn more.
Welcome screen with a red bar at top and bottom, the title “Let’s walk through your investments in 2024!” in the center, and Back and Continue buttons
The welcome screen: dark bars, the title front and center, and an exit.

What I changed, and why

The heuristics column uses Nielsen’s 10 usability heuristics. I haven’t tested the redesign, so it shows which heuristic each change follows, not proof that it works.

What I didWhyHeuristic
Replaced the cartoons with information and more educational linksThe cartoons took up half the screen, and our usability tests found them uninformative and distractingAesthetic and minimalist design
Kept the original’s graphs and pie chart as the only visualsIn our usability tests, most participants liked seeing how their money was invested and the progress they’d made that year
Made the text largerAccessibility
Added more lightbulb boxes with guidance and encouragement (the original had a few), plus optional links for anyone who wants more informationParticipants in our research liked both: the boxes for guidance, and the links for learning more without crowding the screenHelp and documentation
Put dark bars across the top and bottom of the screen, with the title front and centerMarks this as a separate, guided experience, like the start of a movie
Kept the original’s progress dotsPeople like to know how long the experience is and where they are in itVisibility of system status
Kept the exit in the top right corner of every screenPeople should always have a way out, so nobody feels stuckUser control and freedom
Built my style guide from Vanguard’s existing look, and kept their split-screen layoutStill looks and feels like VanguardConsistency and standards
Added a thank-you pageThe original never thanked customers after showing how their money was invested
Renamed it a “walkthrough”People kept stumbling over “Year in Review” when they talked about it

The pitch

I pitched my redesign to Vanguard’s team, leading with the rename, and they responded well to it.

The other screens in the prototype are Vanguard’s existing pages, included so you can click through to mine.

View the Figma prototype

What I’d do next

  • Test the redesign with the same kind of participants. I didn’t test it with users.
  • Design a mobile version. I designed this for desktop only.
  • Rebuild it with Figma components and auto layout, which I’ve learned since. I wouldn’t design anything without them now.
  • Refine the visual details. This was one of my first complete designs made on my own.