Dashboard Update/Design System: Vanguard

The Problems

First of all, Vanguard itself agrees with my assessment. It ran a partial site redesign around 2019, and is actively beta-testing a new mobile app at the time I write this.

Inoffensive, has photos and rainbow colors
vanguard old site design
Completely different styling, cutely messy and ancient
Wow, that is a lot of type styles….what is going on here?
Here is a material design inspired tab selector used regularly. They are often used midpage or presented disconnected from the content, and the highlighting is low contrast.
This one looks almost identical to the tab selector above, but it isn’t a tab selector, it’s just a content index that automatically tracks position on a long page.
This is another tab selector, but for some reason styled differently than the previous one and even harder to identify.
Very low contrast and lack of signifiers makes it very hard to tell that this is a selector with he left item active.
Then we also have this much more standard looking sliding selector, used occasionally.
Again, it’s very difficult to tell that clicking the right terms will change the left number. There is nothing that indicates interactability.

The Biggest Glaring Issue — The Dashboard

A very important part of the site is the user account dashboard. While the largest part of the Vanguard website, such as an interior pages detailing how a Roth IRA works, are probably uncommonly visited, this dashboard is a regular part of the investor experience. It’s suffering from the same basic issues as the other older pages, but it’s probably the priority to renovate. I spent some time working on an example of what an updated Vanguard dash might look like.

Problems

Making UX recommendations externally and informally, I don’t have access to many tools I’d normally use to create a a great design system. I don’t have access to their business goals. I don’t know statistics on their userbase. I don’t know common user-flows. I don’t have access to great research capabilities. I don’t know what they’re working on behind the scenes. I don’t know their engineering situation or tech stack. I don’t have access to their finance expertise.

Work Process

First Step — What are the Competitors Doing?

Charles Schwab’s Dashboard Summary
Fidelity’s Dashboard Summary
Vanguard’s Dashboard Summary
The app is mostly just a nice clean version of the newer web styling with some graphical backgrounds and shadows. The largest difference is the removal of a large amount of less important information.

Second Step — Research + Requirement Synthesis

Since I’m not at Vanguard, I chatted with two vanguard investors online to get their requests and complaints, and their most used and ignored features. I also ran a small poll on Reddit concerning dashboard preferences, which received 21 responses.

Third Step — Roughing It

I like to do lo-fi digitally. I’ll make a bunch of labelled boxes and just move them around until things seem to fit. It’s just like paper drafting but I can resize the pieces of paper if I want.

Here’s the basic version 1 layout I started work on

Fourth Step — Building Components

Early General Component Work

Fifth Step — Detour, Systematizing the Old Site

Since this is my own project, I get to decide what I play around with. I decided to explore some of Figma’s more recent features by distilling the old site layout into a library.

  • Makes it easy to mock up new content which must be added before a full redesign.
  • Establishes a library of necessary features and components that must be upgraded for the redesign.
  • Consolidates messy or disorganized features of the current design (reduce the number of type styles to the minimum needed etc.)
  • Provides an easily swappable prototyping environment where new components can be quickly swapped in for progressive improvement.
  • Standardizes existing pages so inconsistencies such as spacing or font/ unusual components can be easily brought into compliance without designer consult.
  • Establish upgraded components which work throughout the site, which can then be used on the dashboard while maintaining consistency.
I swapped the old mix of Arial and Univers to Centrale Sans, which looks fairly in-between both the old and new site design typefaces in context.
I veritable rainbow is used around the site, but mostly only a few primary colors.

Sixth Step — Using the New System

Let’s take this library out for a spin and remake an existing page of the site with the new components. This should look pretty close to the old page, but is entirely made of new snap-together components.

Old existing page
New systematized page
  • Responsive full width top bars
  • Links standardized to blue, consistent with redesigned pages
  • Reduced number of type styles
  • Standardized button styling consistent with newer redesign

Seventh Step — Using the System to Make a New Dashboard

Cool. Now that our design language is codified, I can take these components and styles back and incorporate them into the new dashboard I was laying out before. Again, here’s the old dashboard for comparison:

new dash
New dashboard!

Conclusion — Wrapping Things Up

That’s as far as I’ll go for now, as any further revision without user testing and expert consult is likely to be pretty low value. To recap, I:

  • Got annoyed at Vanguard’s current dashboard
  • Researched dashboard user preferences
  • Started redesigning the dashboard
  • Decided I might as well establish a design system for the rest of the site too
  • Tried out some cool new features and advanced component design techniques in Figma
  • Standardized and restyled the older site pages using the new design system
  • Used the new design system to create a hi-fi new dashboard concept

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store