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.
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.
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
- Log in to Vanguard
- Evaluate balances on Home page.
- Find information on a stock.
- 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
Usability test of clickable prototype over Zoom
USABILITY FINDINGS
Three main problems
Usability issues included:
- Users wanted the home page to provide more information about their balance
- Users felt searching for a stock was too many steps and provided unrelated results
- Users found it difficult to locate the trade stock button
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.
Competitor pattern research: Ally's Quick Trade feature and TD American's search bar results
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.
Sources:
Robinhood Statistics
PYMNTS Article
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
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.
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.
Screenshot preview of Vanguard's Digital Advisor tool
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
HOME PAGE
Before & After
STOCK INFO PAGE
Before & After
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
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:
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
Convenient CheckoutUX Design
GaydarDATING - Mobile App
Stream RaidersGAMING - Responsive UX/UI Design
Project MannaBUSINESS - Responsive Website