Vanguard

Website

Role

UX Researcher, UX Designer

Duration

3 months

Responsibilities

UX research, wireframing, prototyping, usability testing

Mockup of Inquery

1

Designer

1

Client

Project Details

The Vanguard Digital Advisor is a new robo-service that provides automated investment assistance. I was tasked to create an accessible experience for those just starting their financial journey, targeting specifically young adults in my process.

Challenge

Many young professionals are not investing because they lack the knowledge of knowing where to invest, how to invest, how to manage portfolios, etc. The challeneg of this project was to redesign the robo-advisor page to cater towards young professionals who are interested in investing but don't know where to start.

Proposed Solution

I suggested improving the beginner investing platform's website by adding comprehensive information about the Robo advisor, highlighting Vanguard's special features, and enhancing investment details based on user feedback for increased transparency and usability.

Phase 1

Understanding the User

Listening sessions, competitor analysis, pain points and personas


Listening Sessions

Takeaway: Users lack understanding of investing and financial terms.

The usability testing revealed positive feedback regarding the platform's visual representation of funding progress, prominent display of total assets, upfront fee presentation, intuitive dashboard hierarchy, engaging aesthetic, and seamless navigation. However, limitations included varied participant knowledge of investing, awareness of the UX test, and a small sample size. Minor issues included inconveniences unlikely to deter users.

Can you tell me about your overall experience with any financial services or investing?  
What do you feel might be a barrier to financial literacy/investing?
Is there any financial-related information you have found to be difficult to understand?

Pain Points

I identified a core pain point from each of the users, which were apprehension about using AI to manage portfolios and intimidation to investing due to a lack of investing knowledge.

Personas

Compiling my research into personas helped me simplify my goals into actionable insights. Taking into account the primary types of users, upcoming graduating students and young professionals, I was now ready to start the design.

wireframe
Phase 2

Starting the Design

Card sorts, user flows, wireframes, high-fidelity prototype V1.


Card Sorts

I used language learning models (LLMs) to generate a list of elements commonly featured on financial investment sites like Vanguard. I pared down the list by cross-referencing similar elements I saw from different LLMs and turned them into cards on kardSort.
I then asked 10 individuals to sort these cards into categories that they created themselves based on how they felt these cards should be organized. I graphed this data using Tableau and you can see my final graph here.
While some categorized elements by function, others used their familiarity with financial websites to categorize what they felt was "necessary" versus "unnecessary".

Card Sort from User Testing

wireframe

User Flows

Considering the flows for potential users helped us determine opportunities for improvements, such as including an educational page for users to learn more financial literacy and learn how to invest.

User Forum Flow

user forum flows

Setting a Financial Goal Flow

setting a goal flow

Benefits and Features Flow

benefits flow

Wireframes

I created a wireframe/low-fidelity prototype based on the user flow for setting a goal. I chose this user flow because I felt this would be one of the most frequently used features that users would use when interacting with Vanguard's Digital Advisor service.

View Wireframe Designs
wireframe

High-Fidelity Prototype

My high-fidelity prototype builds on the wireframes and implements additional features to improve user experience. The key feature here is the goals section, which allows users to personalize their expereince with the robo-advisor.

View Final Prototype
wireframe

Accessibility

I followed best practices to ensure that my redesign was accessible for all users, some of which were:

Contrast Ratios

The contrast ratios between the colors I used in the foreground and the background meet Web AIM standards.

Text Hierarchy

Copy that is meant to be a heading, subheading, or body is an appropriate size in descending order of importance.

Consistentcy

Back buttons, next buttons and search bars aree all located in expected locations so users aren't distracted by complicated functionalities.