Vanguard IIG Investment Tools

User Interface  /  Enterprise Technology

The Situation

I joined Vanguard to assist with modernizing investment tools living under the Institutional Investment Group (IIG). My job was not to modify the user experience but to work on the UI updates.

Team Structure

At Vanguard, within IIG, there seemed to be a pod structure where each pod consisted of a designer(s), a strategist, journey owner, product owner, and a researcher. Some products had grown to include all the specialist roles, but some were incomplete. GPS seemed a little more "off-grid" than others, as the leadership didn't seem to speak about it too much compared to MPM or VIE, for example. But it could be due to some shifting and reorganization within the line of business. By the time I decided to take on a new contract, the pod structure of the investment tools had started to grow with the addition of a dedicated researcher.

The relationship between the development and design teams within Investment Tools is healthy. The communication flow was excellent here. They would always be sure to call us during pop-up meetings. Generally, the design team attends most of the scrum ceremonies, but we would also use discretion and check with the dev team to see if the upcoming conversation would touch us. Scheduling-wise, we front-run our work ahead of the development teams within Investment Tools, so we do not step on each other's toes.

Before my arrival, my colleague delivered the Model Setup portion. The Glide-path Construction tab was the second portion to be worked on and wrapped up when I was onboarding. Part of my effort was helping my colleague with questions and suggesting ideas to preserve visual hierarchy and form design.

Sub-Asset Class Selection, Fund Selection, Cost Comparison, and Summary were my primary focus areas. This focus included updating the UI to reflect the new design system, staying true to user needs from the perspective of using the best components for a given scenario, and improving things from an overall design perspective like visual hierarchy, design system interpretation, and form design.

My Contributions

Purpose

Vanguard's elite Institutional financial advisors use these tools to create visual reports to sell VG products to institutional clients. It can take clients' portfolios and model them using VGs secret sauce to see past and forward-looking results, allowing VG to demonstrate its value proposition. Due to the domain's expert user base, the user population is small. We are talking no more than 200 users tops.

Glide Path Solutions (GPS)
  • Sub-Asset Class Selection, Fund Selection, Cost Comparison, and Summary tabs
  • Collaboration as a team member working cross-functionally with product owners who were transitioning
  • Future State vision work
  • A11Y / Section 508 Audits (wasn't on the first wave list)

GPS did have some research sessions completed and tracked via an Excel sheet stored on SharePoint. I was briefed on the findings by my colleague. We did not have a dedicated researcher in our pod in the beginning. When I began to switch contracts, a researcher came onboard and started newer sessions.

GPS in Figma
Portfolio Construction Solutions (PCS)
  • Data visualization UI
  • A11Y / Section 508
  • Interaction design
  • Layout exploration
  • Ideation for future state
PCS in Invision
My Plan Manager (MPM)

This pod was a larger established team. I worked with a Senior Strategist and a colleague who was a design specialist transitioning roles to become a Strategist. Similar to the other applications within IIG, we were working on modernizing screens leaving UX intact, but in this case, trying not to let the design system constrain us too much. We broke away from the existing patterns established to address business needs for this design.

  • Future State vision work
  • Ideation
Vanguard Institutional Experience  (VIE)

This pod was a larger established team similar to MPM, including three design specialists. Similar to the other applications within IIG, we were working on modernizing screens but doing migration in stages. Although, I don't think development can cherry-pick what gets updated in stages. The code base is an all-or-nothing pull.

As far as what we show, the redesign begins at the current state, to a smooth migration where we adopt the core portion of the design system, then all components move over to full adoption. The last stage is a fully rearchitected UI and experience.

But I believe that once you adopt a design system, your pulling over all of it. Development is essentially doing a code pull and loading in dependencies converting everything over, and not mixing the two systems.

Since the team was working in Sketch, we used a digital whiteboard to collaborate. Figma would have been way better, and they are adopting that now in-house. I worked on the following:

  • Mentor less senior designer(s)
  • Design screens moving from the current state to "soft migration", to "Fuller migration", to "optimized experience."
  • Ideate and apply Constellation, allowing more branding to show through from a visual standpoint for Login Screen, Overview, Balances & Holdings, Transactions, Account Maintenance, Documents, and Activity

See VIE Whiteboard

Results

While working on the project, the product ownership changed. There was a sense that the product team and stakeholders did not know what they envisioned or wanted to do with the tools.

We put things on hold at one point while they churned on their end. During this time, I began assisting with MPM. Within GPS, they later decided to focus on the first two tabs since they are the meat of setting up the reporting you see at the end of the process. It also could be to shorten the time frame for delivery.