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.

The Biggest Glaring Issue — The Dashboard

Problems

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

Third Step — Roughing It

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

  • 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

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

new dash
New dashboard!

Conclusion — Wrapping Things Up

  • 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

--

--

--

Multi-field designer with a focus on UX and interfaces. Jacobmichelini.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Conservatism And Progressivism In Design Today

Eatery 2.0 (Pt. 1) — Enabling Users to Discover Eateries

Steal Your Way to a High Performance Landing Page

Decorating Your Home in Style

Project Navigation Process

Behind Great Products: Pivoting Your Product Roadmap

Using Framer to Prototype Day One’s Journal Switching

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
Jacob Michelini

Jacob Michelini

Multi-field designer with a focus on UX and interfaces. Jacobmichelini.com

More from Medium

Moira: A New way to Travel & Connect — A UI/UX Case Study

Case Study: Tech-O Mobile App Design

APPsolute guide to app design

Alta Flora — Client Project — 3 weeks — Group Project (4 people)