Vanguard-Cover-new-3

Vanguard

NEW FINTECH FEATURE

Client: Vanguard (Speculative)
Role: UX/UI Designer, Researcher
Time Frame: 40 Hrs
Tools: Figma, Zoom, Maze Adobe Photoshop

The Problem.

This project is not directly affiliated with Vanguard. No one from Vanguard was contacted for this concept or design.

Tough to Trade

When looking for fintech products to work on, my mentor shared with me her concerns with stock trading on Vanguard’s website. After performing my own usability tests, I decided to evaluate and redesign their process of purchasing a stock. 

The current investor portal looked outdated and inconsistent with its branding for non-members. I found this also a good opportunity to update the UI components to fit a modern design system.

Austin-Unsplash-Photo-Edited

Photo by Austin Distel on Unsplash, altered on Photoshop

How might we make it easier to stock trade on the Vanguard personal investor site?

The Solution.

New Quick Trade feature

From the homepage, users can quickly search and trade stock in a sidebar menu. Along with adding the Quick Trade feature, I updated the user interface of the home page and stock info page to improve the visibility of call-to-actions for trading.

Quick-Trade-Prototype

Desktop prototype of Quick Trade feature

Design Process.

USABILITY TESTING

Unsuccessful Search

To test Vanguard's stock trading flow, I used screenshots of an existing account going through the flow. I made a clickable prototype on Figma and tested it with 3 users that were experienced in stock trading products. Users really struggled to search for information on the cluttered pages and couldn't find key call-to-actions.

USABILITY TASKS
  1. Log in to Vanguard
  2. Evaluate balances on Home page.
  3. Find information on a stock.
  4. Buy shares of a stock.
USER TESTERS
  • All 3 participants use 2 or more stock trading services
  • 2 of the users are Vanguard holders and still had difficulty navigating the site
  • 1 Vanguard holder was unaware that Vanguard offered free commission trading
Vanguard-Usability-Test

Usability test of clickable prototype over Zoom

USABILITY FINDINGS

Three main problems

Usability issues included:

  1. Users wanted the home page to provide more information about their balance
  2. Users felt searching for a stock was too many steps and provided unrelated results
  3. Users found it difficult to locate the trade stock button
Problem-Annotated-1
Problem-Annotated-2
Problem-Annotated-3

COMPETITIVE ANALYSIS

Examining other Stock Options

During my usability testing, I asked users to walk me through their preferred stock trading product. I used the footage from testing, screenshots, and viewed competitor sites to evaluate design patterns. I found patterns for quick trade and for searching stocks that I wanted to recreate for my Vanguard design.

Ally-Quick-Trade
TD-American-Search-Bar

Competitor pattern research: Ally's Quick Trade feature and TD American's search bar results

RobinHood-Ad

MARKET RESEARCH

Robinhood, the millennial favorite

Among my user testers, Robinhood was the favorite finance tool for trading. Robinhood was the first brokerage with a mobile-first app that offered free trading. The app is considered quick and easy for stock-trading by young investors. The average age of a Robinhood user is 31 years old, relatively young compared to other investment sites. 

Robinhood-Market-Stats-1

USER PERSONA

Joseph, the young stock investor

Knowing there's a market of young investors I envisioned a persona that valued easy stock trading. Utilizing information from my conversations with my usability testers and gathering data from this article on Vanguard demographics, I formed a user persona.

KEY TAKEAWAYS
  • Currently invested in mutual funds with Vanguard
  • Uses other stock trading options on a daily-basis
  • Some users like Joseph are unaware that Vanguard offers stock trading
Vanguard-Persona

TASK FLOWS

Search, then Trade

I decided to focus on creating a new feature - a quick stock trade. Also, there were complaints about how searching for a stock would not directly take the user to a stock page, so I decided to improve on that flow. I realized that search needed to be integrated into the quick trade flow.

Task-Flows

VANGUARD UI DESIGN

Inspecting other Vanguard Products

The original screenshots I received of the Vanguard customer portal looked very outdated, so I wanted to modernize their UI design. Looking at some of their other sites, there were UI improvements but they were inconsistent. I decided to pull inspiration from their newer products. I inspected the site's code to identify key UI details like the color and fonts for my redesign.

Vanguard-Advisor-Screenshots

Screenshot preview of Vanguard's Digital Advisor tool

Screen-Shot-2021-01-11-at-2.39.19-PM

Screenshot of how I inspected the code from their Financial Advisor site.

PAGE REDESIGNS

Simplified Info Processing

In my user testing, I asked what info and charts they found most important on the home and stock info pages. My goal was to make the info easier to process and bring more attention to the call-to-action for stock trading. I sketched iterations then created the pages from scratch on Figma.

KEY REVISIONS
  • Moved holdings information to the home page
  • Rearranged stock page to organize the most important charts (according to user test)
  • Created a Quick Trade call-to-action accessible on home and stock page
  • Updated UI components based off design research
Lo-Fi-Sketches

HOME PAGE
Before & After

Home-Page
Home-Page-Redesign-1

STOCK INFO PAGE
Before & After

Google-Stock
Google-Stock-Redesign-1

FINAL PROTOTYPE

Easy Quick Trade Flow

Compared to the original trade screen, the quick trade feature is easier to access and has a more linear flow on the page. One of my key design decisions was to differentiate the review order screen and the final submission screen, so it was clear a transaction was being made. 

STOCK TRADE TRANSACTION
Before & After

Trade-Stock-5
Quick-Trade-Flow

REMOTE USABILITY TESTING

Testing Success on Maze

To save time and try out this testing methodology, I used remote testing on Maze. The test started with a screener question of "Have you used a stock trading product before?" With the users that completed the test, I had the following results:

Maze-Testing-Stats-3
Screenshot of Maze Test for Vanguard Feature

Screenshot of user testing report on Maze platform.
Link to Maze testing report.

User Quotes.

"I rated it high because it's very well designed and actions are easy to find. However, I don't see anything that makes it stand out from other similar trading platforms. Robinhood, for example, also has a simply designed action for trading. "

- Tester, December 22nd, 2020

"I currently use both Robinhood and Fidelity. With their interfaces and website designs in mind, the website you created feels like a good mix of the two. The website you created felt easier to navigate compared to Fidelity and required a little bit more exploration compared to Robinhood."

- Tester, December 21st, 2020

KEY TAKEAWAYS
  • Most users were able to complete the tasks and felt they were easy
  • There's room for improvement to make this simpler and more competitive with apps like Robinhood
  • Users felt they were provided with the information necessary for stock trading decisions

Learnings.

Working on a Fintech project was difficult because I had no real reference of company standards or a subject-matter expert to check with. I know mistakes were made, by omitting information on certain screens. I wanted to provide a version that was simpler, but still recognizable and functional in purpose. I made design decisions focused on my user research and delivered a product that could stand-up well against competitors. If I were to continue on this project, I would want to fact-check more of the content and UI component design details.

View More Projects

GaydarDATING - Mobile App

Stream RaidersGAMING - Responsive UX/UI Design

Project MannaBUSINESS - Responsive Website