CASE STUDY
January 2024 – May 2024
As an undergraduate student at the University of North Carolina Chapel Hill, I actively participated in Professor Laura Ruel’s 2024 Spring semester course, MEJO581: User Experience Design and Usability. Throughout this course, I had the privilege of collaborating with industry professionals such as Steve Shang, senior lead UX designer at Vanguard.
Our goal is to reimagine Vanguard’s Digital Advisor platform, making it more accessible and user-friendly for young college students and newly graduated adults who are new to investing. We’ll focus on simplifying complex financial concepts, providing educational resources, and fostering confidence in investment decision-making.
GOALS
01
Empower Financial Literacy
My redesigned platform aims to educate users about investing basics, demystifying jargon and concepts. I want users to feel informed and confident as they navigate the investment landscape.
02
Streamlined Onboarding
Simplify the onboarding process by breaking it down into manageable steps. I will guide users through risk assessment, goal setting, and portfolio creation throughout their dashboard.
03
Engage and Retain Users
Create an engaging experience that encourages users to explore the platform regularly. I will incorporate interactive elements such as more data visualization and chat support.
Measure Success
User Engagement: Track the number of users completing the onboarding process and returning to the platform.
User Satisfaction: Conduct surveys or usability tests to gather feedback on the redesigned interface
Our Values
Our unique angle is to bridge the gap between financial complexity and user-friendly design. By catering specifically to new investors, we’ll create a platform that feels like a trusted advisor, guiding them toward sound investment decisions.
Usability Test
This section was done as a group project.
Our purpose was to test the user experience of the Vanguard Digital-Advisor webpage(s) and identify areas of confusion and difficulty. Based off our research, we hope to offer suggestions for future improvements to the website. During usability testing, participants (who were undergraduate college students with no prior knowledge of Vanguard) found the site to be visually appealing and straightforward. However, several issues were identified:
- Navigation Challenges: Users struggled to find the Digital Advisor page, indicating a need for clearer pathways.
- Terminology Confusion: Some investment-related terms were unclear, hindering users’ understanding.
- Layout Complexity: The overall layout and navigation were confusing for participants.
Our approach involved task-based evaluation, where users assumed the role of new investors.
METHODOLOGY
We conducted a study to collect information on the usability of Vanguard’s website, particularly the Robo Advisor page. The usability testing and research were conducted between February 6 and February 22. All testings were conducted in person and recorded on zoom. Each test lasted approximately 30-45 minutes. The usability test consisted of five parts: Introduction, Warm-Up, Robo-Advisor Page Evaluation, Follow-Up and a Wrap-Up. The consent form and testing instruments, including the list of assigned tasks, are attached to this report as Appendix at the end.
Assigned Tasks
- We devised a series of 3 tasks for our participant in each section of the script. Each task mimics actions that users would take when navigating on the Vanguard website and using their Robo Advisor.
- These tasks were designed to examine the website’s functionality, ease of use, and architecture of information. Each task was accompanied with questions that gauged the participant’s internal thoughts during the process of each task.
Participant Profiles
Above shows a summarized graph of the demography of the 6 participants interviewed.
When considering their experience in finance, the majority reported having little to no experience, with only one indicating barely any experience. None of the participants possess extensive knowledge or experience in the finance sector.
STUDY LIMITATIONS
01
Sample Bias
Participants were limited to 6 college students, mainly white 20-21 year old women. The sample may be too small and too niche for the usability of the website to be evaluated fairly.
02
Lack of Experience
Most of the participants lacked experience or knowledge in finance or investing, therefore making their understanding of the website more skewed than the average individual looking to invest.
03
Not Personalized
Since participants weren’t allowed to enter in their own information (i.e. create their own account) it was hard for them to visualize their money/assets on the website as if it was their own.
POSITIVE FINDINGS
Image of Vanguard’s dashboard.
Data Visualization
Many users noted that data visualizations throughout the digital advisor webpage and dashboard made data more understandable.
“I always like summary slides like even in the Activity Feed, especially even with the Risk Attitude, where you can visually see how you’re investing. I think that makes a lot more sense than just being given statistical data.”
Interactivity
Some users noted the interactivity of the webpage and how it positively impacted their experience when exploring the webpage.
Visual Appeal
Users expressed appreciation for the overall design and layout of the Digital Advisor webpages.
NEGATIVE FINDINGS
Unclear Terminology
Participants were unclear with the terminology used.
“There’s definitely some lingo that – like ETFs, they give the – exchange-traded-funds, but what does that mean?”
“I have no clue what TLH is… Yeah I just have no idea what that means.”
Repetitiveness
Some participants said that the information of the site was repetitive.
“It can be a little repetitive at times, like there’s three ‘Get started’ buttons.”
Finding the Digital Advisor page from the Vanguard homepage
67% of participants in this usability test had difficulty navigating to the Robo Advisor page from the Vanguard homepage.
“It’s not very easy to access the Robo Advisor.”
Personas
The following section was done as a group project.
Link to google document of audience analysis chart:
https://docs.google.com/document/d/1wO6t6t5JxKcgH-8BC7zsTIjjkEItXZuSz1DMKo1Sc8I/edit?usp=sharing
Conducting interviews with potential users was a valuable and insightful experience for me. I learned much about their financial goals, challenges, preferences, and behaviors. I also learned to listen empathetically, ask open-ended questions, and probe deeper into their stories. Collaborating with our team was also an excellent opportunity to share our findings, feedback, and ideas.
Here are some sample personas my group and I came up with.
- Finance Bro-Wannabe Ben – Is a major in business and believes he should be managing his money smartly. Doesn’t really know about big money investing, though he does own a couple of stocks and has sold sneakers in high school before. Has dabbled in his dad’s business but mostly through nepotism, and has no experience with investing with a digital advisor.
- Lost Lily – Has no experience with investing, is scared by it. Her parents taught her to save her money and not put trust in investments due to the risk that is always possible with investing. She is a young adult, about to graduate college, and has been hearing that investing is important but is scared and not sure where to begin.
- Ambivalent Annie – Is neutral and open towards the idea of investing. Doesn’t have preconceived notions regarding danger or trustworthiness of AI or investment strategies in general. Is in her late 20’s and has had a stable job for a few years. She is open to starting an investing account because she has the money and is living comfortably, but doesn’t know much about it.
- Hesitant Hank – experience in own finance, limited experience in tech. Interested in starting an investment account with Vanguard, but wants to learn more about how the Digital Advisor works before he trusts it with his money.
- Business Bro Brad: thinks he knows more about investing than everyone else, and probably feels too smart to use a financial advisor. He is probably in his late 20s, he would be interested in opening a business account if he knew that it would be easier for him, but would probably be hesitant while he feels educated to do it himself.
User Persona
Here are some of the tasks and interview questions I had the participant do/answer.
- What are your current financial goals and challenges?
- How do you approach investing and managing your money?
- What sources or tools do you use to learn about or make financial decisions?
- How familiar or comfortable are you with using technology or AI to assist you with your finances?
- What are some of the features or functions you would like to see in a digital advisor?
Empathy Map
We used the empathy maps and the persona templates to synthesize and visualize our data. We featured our personas’ most relevant and distinctive elements, such as their personality traits, quotes, goals, frustrations, and likelihood of using a digital advisor. We eliminated some less essential or common elements, such as their hobbies, education, or family background. We also tried to make our personas realistic, diverse, and representative of our target audience. We hope our personas will help us design a more user-friendly product for Vanguard’s finance digital advisor.
Structures and Flows
The initial asset list was generated by AI using Microsoft Edge’s Bingchat.
Afterwards, I conducted user card sorts to narrow down and organize them into the following categories:
01
Informational Content
- Portfolio Performance
- User feedback and ratings
- Analyst recommendations
- User account data
- Market data feeds
- Investment glossary
02
Interactive Elements
- FAQ
- Retirement planning calculator
- Asset comparison tools
- Investment coaching services
- Chat windows
04
Visuals
- Portfolio analysis reports
- Data visualization
- Diversification score
05
Accessibility
- Accessibility options
- User onboarding tutorials
- Language and regional settings
Link to google drive of full user card sort:
https://drive.google.com/file/d/19JA8EXimIIC72jGIFH5StGiyMC7vahlH/view?usp=sharing
CONTENT HEIRARCHY
Above shows the content hierarchy I did for the list of assets. From doing this, I learned that Vanguard’s Digital Advisor webpages can be divided into two main categories: informational and interactive. From there, it branches into many subparts. For example, reports and data (market data feeds, user account data, etc) is under informational content, while financial planning tools (retirement planning calculator, goal setting, etc.) is under user interaction.
USER FLOW CHARTS
Above shows the user flow chart of setting a goal on Vanguard’s Digital Advisor dashboard once the user has signed in.
Above shows the user flow chart of allocating funds on Vanguard’s Digital Advisor dashboard.
Vanguard Digital Advisor Re-Design
After extensive user research and preparation, I translated my findings into a reimagined design for Vanguard’s Digital Advisor webpages. Leveraging Figma, I crafted wireframes and an interactive prototype, which underwent user testing through usertesting.com.
Wireframes
Here’s a link to a summary of the three user testings.
Data Visualization
Overall, the users complimented and appreciated the use of more data visualizations to see their assets and financial management.
Overall layout of homepage
Overall users found the layout of the homepage to be simple, intuitive and not overwhelming to use despite the additional features.
Very easy to find Digital Advisor
All users rated it very easy to navigate to the Vanguard Digital Advisor homepage.
My wireframes only covered the general dashboard and the goal setting feature.
Overall, the user testing on my wireframe prototype was a success. The users found it intuitive, clean and easy to use. However, they wished there was more information contained on the webpage to help them further understand the process, which is understandable since the wireframes only label the important headings. One user noted that since he was approaching it as a young adult, that the website may be overwhelming since it will require a lot of financial literary to navigate the digital advisor.
Vanguard UI Kit
The UI kit’s top section features Vanguard’s original colors and fonts. To maintain clarity, I’ve limited the color palette, avoiding visual clutter on the re-designed homepage. At the bottom, newly crafted elements draw inspiration from the original design, incorporating both color and font choices, along with subtle shadow effects.
High Fidelity Mockup
In my mockup, I’ve created three new features, as well as a few re-designs to help create a seamless user experience. These features were added after careful analysis of results from user testings.
More Data Visualization
I added more data visualization on the dashboard, as it helps users quickly visualize their assets and their performance when they are quickly assessing their Digital Advisor.
Which specific data visualizations may differ in the real product, but this is an example of useful data that could be complemented into a new dashboard.
“Tool Tip” Toggle
I added a tool tip feature users can toggle on their navigation bar. This allows users who have little understanding of financial terms to be able to hover over underlined words and read their the definitions. To ensure this feature is not bothersome for experienced users, I ensured the feature was easily disabled.
Glossary Tab
I created a glossary page that shows up on the navigation bar next to the FAQ. Users can use the glossary as an on-hand dictionary to help them strengthen their financial literacy.
There is a filter feature and a search feature that allows user to quickly find the
Additional Features:
