top of page

Design Brief

Redesign the 'All Investments' page on Vanguard's Financial Advisors site, prioritizing the desktop view. (According to the client, this is where most FAS' are accessing the site.)

 

 

Process:

  • conducted interviews with Financial Advisors

  • did competitor research

  • researched a variety of UX models + e-commerce experiences

  • extended the UI for Vanguard's style guide 

  • proposed a number of design directions

Role: Designer (UX + Visual)

Original Webpage

The biggest challenge was showing the products and their attributes in a digestible, scannable way. The current state had a lot of floating UI which contributed to visual overwhelm of the page.

Screen Shot 2019-04-14 at 7.05.03 PM.png

Competitor Research

We focused our research on Blackrock, Pimco, and iShares as these were sites that Vanguard said they looked to as competitors.

Other research

I also looked at other e-commerce sites, as Financial Advisors essentially 'shop' for an investment on this page. In addition, Vanguard expressed interest in wanting to see a vertical nav as one design direction so this is something I focused my iterations on.

 

 

E-commerce references:

  • Urban Outfitters (side nav + visual 'cards' for investment products)

  • Behance (tagging + search)

  • Beauty-pedia (filter side nav)

01
Search- Forward + Tags

Behance inspired

The first iterations are Behance-inspired in that I looked at:

  • I added an in-context search with a high hierarchy (the logic behind this was that FAS advisors expressed they wanted to find products quickly; they didn't come to this page to browse)

  • I placed the secondary nav below 'search' so as to avoid the stripe-y effect of having two horizontal navs on top of one another

  • I added pills as to show which filters had been selected

REFERENCE:

Screen Shot 2019-04-14 at 7.14.12 PM.png

EXPLORATIONS:

02
Side filter nav + Grid of Products

Beauty-pedia inspired

The first iterations are Beauty-pedia inspired in that I looked at:

  • adding side filter nav

  • looked at list view vs grid view of products

REFERENCE:

Nav explorations

Screen Shot 2019-04-14 at 7.14.33 PM.png
Beauty-pedia 1.png

03
Accordion Nav
+ Products as Visual Cards

Urban Outfitters inspired

The first iterations are Urban Outfitters inspired in that I looked at:

  • card treatment for products

  • side nav accordian style

  • 'featured' dropdown

  • addition of number of funds, smaller hierarchy

End Conclusion

The client responded really well to the first two proposals and while they also liked the last one, they felt that the cards didn't provide a quick enough read for FAS advisors to compare products.

 

 

They ultimately went with Direction Number 1.

bottom of page