Dashboard Update/Design System: Vanguard

The Problems

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.

Work Process

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.
Here’s the basic version 1 layout I started work on
Early General Component Work
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.
Old existing page
New systematized page
new dash
New dashboard!

Conclusion — Wrapping Things Up



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