Zum Hauptinhalt springen

Vanguard designs 50% faster and sees compounding impact with Figma

Vanguard designs 50% faster and sees compounding impact with Figma

Vanguard, the well-known investment management company, was founded on a simple, yet revolutionary idea—that an investment company should manage the funds it offers in the best interest of its clients*. This bold vision underscores its radical commitment to over 50 million global clients, who range from individuals just getting started in their investment journey to those with deep experience. With a client base and product offerings as wide-ranging as theirs, Vanguard is able to promote greater financial wellness by providing a digital experience that is educational, seamless, and centered in design with Figma and FigJam.

Addressing a tech stack plagued by over-diversification

Through Vanguard’s robust digital offerings, which span online account management, mobile apps, digital advisory services, and personalized dashboards, they’re able to serve a diverse range of user preferences. Each app and product that Vanguard builds is designed with the intention of helping set up their clients for financial success.

Text with guidelines for line spacing and baselinesText with guidelines for line spacing and baselines
Example of Vanguard’s typography guidelines

Prior to using Figma, teams at Vanguard operated as their own lean, but siloed, startups—a mentality that fostered speed and innovation, but prevented them from establishing a cohesive product ecosystem and more often than not, created duplicative work. For Vanguard’s user experience (UX), product, and engineering teams, these silos were exacerbated by an overly complex tech stack, consisting of Sketch, Abstract, Invision, and Mural. The effects were hard to ignore—in their day-to-day, they faced challenges when it came to effective communication, sharing files across teams, and keeping track of the most up-to-date files. They knew they needed to streamline their tech stack, which they did by switching to Figma.

Will Walsh, Senior Manager, UX, Personal Investor Savings & Investing at Vanguard, shares, “Figma offered the ability for us to eliminate three other tools. That’s the efficiency of a tool able to design, prototype, share with developers, collaborate, and comment. It’s been a game-changer. We have so many more people across more disciplines using Figma, than they were with Sketch.”

icons and hover states on a light and dark backgroundicons and hover states on a light and dark background
Vanguard components shown on light and dark mode

Figma vaults Vanguard’s design system to new heights

With Figma as a browser-based design tool, Vanguard’s design team spends less time looking for the most recent file and more time collaborating cross-functionally. Rob Kubala, UX manager at Vanguard shares, “Before Figma, I think I would send at least ten links a day to product owners or developers to make sure everybody had the most up-to-date prototype. Our previous tools were creating inefficiencies in terms of the way we share and communicate. With Figma, we’re communicating more than ever in the last year.” In a world of “get rich quick” schemes, Vanguard stays the course by remaining committed to their clients’ financial wellness. The trust that they have earned from their clients begins with the internal collaboration made possible by a tool like Figma.

Vanguard uses Figma for every part of the design process, from building out their design system library to establishing user flows with FigJam to conducting user testing through prototyping. With Figma, their design system, Constellation, is more organized and accessible to all teams. For Vanguard’s experience team, tapping into Figma’s advanced features, like auto-layout, allows them to scale their building blocks more freely. For Kristi Cooke, Vanguard’s UX designer, the benefits are obvious—she can design faster and more accurately, no longer spending “hours upon hours” to ensure that designs are pixel perfect after a single change. She achieves time-savings of 50% or more when updating the master files to reflect new design or content changes. Kristi shares, “Our tickets are moving a lot faster because we're able to deliver a lot quicker.”

Updating text color through content components in Figma

Having their design system in Figma allows Vanguard to go broad and support the needs of 300+ employees, while also serving individual teams, like Brand, Retail Marketing, or International, which require their own pattern libraries. With branching, Figma’s advanced design system feature, teams at Vanguard can test out new ideas in exploratory spaces without jeopardizing the original design file—much to Kristi’s relief. Through Figma’s auto-layout feature, Vanguard’s designs are responsive to any changes, which enables the content and UX strategists to make edits without needing additional design support from Kristi.

Figma’s Enterprise plan gave us a lot more control, especially with user testing, allowing us to have a system that was cloud-based and secure. We wanted to make sure we had a scalable solution that not only promoted our communication and collaboration, but also was very secure when it came to single-sign-on.

— Rob Kubala, UX manager at Vanguard

Security features to safeguard client trust

For an established financial institution like Vanguard, there’s nothing more critical than the trust of their clients. This hinges on the security of their platform. Vanguard upgraded to Figma’s Enterprise plan to access the most comprehensive security features. Rob shares, “Figma’s Enterprise plan gave us a lot more control, especially with user testing, allowing us to have a system that was cloud-based and secure. We wanted to make sure we had a scalable solution that not only promoted our communication and collaboration, but also was very secure when it came to single-sign-on.” With the Enterprise plan, Vanguard isn’t getting faster innovation at the expense of security. Both are possible.

Figma pays dividends with speed and collaboration

By layering on FigJam, Figma’s online whiteboard solution, Vanguard has redefined what collaboration can feel like for their teams. Rob shares, “It changed my whole perspective on live collaboration. All of us were so much more engaged in that meeting with FigJam. I’ve never experienced anything like that virtually.”

From storyboarding to mapping user journeys, facilitating sessions with key stakeholders to wireframing and leading kickoff meetings—teams at Vanguard are leveraging FigJam in countless ways. FigJam has improved cross-collaboration by providing a space for the UX team, product team, and developer team to come together and ideate or provide feedback.

Will sums it up—“You go into FigJam, and it’s like having a party.”

Better collaboration allows Vanguard to serve its millions of clients

The tangible impact of this collaboration is obvious for Vanguard’s design and product team: smoother handoffs, faster prototyping, and better organization, just to name a few. For Vanguard, Figma is what they would call a worthwhile investment, which has enabled Vanguard to design and ship 50% faster, and ultimately build financial products for millions of clients.

Read more about Vanguard’s design thinking across strategy, culture, and leadership, and explore opportunities on their UX team.

* © The Vanguard Group, Inc., used with permission

1As of April 2024

Disclaimer: Vanguard is owned by its funds, which are owned by Vanguard's fund shareholder clients.

About Vanguard

Industry: Financial Services

Figma plan: Enterprise

Products: Figma, FigJam

Learn more about our design system features

See how Figma can help you scale design

Great design has the potential to differentiate your product and brand. But nothing great is made alone. Figma brings product teams together in a fast and more inclusive design workflow.

Get in touch to learn more about how Figma can help companies scale design.

We’ll cover how Figma can help:

  • Bring every step of the design process—from ideation, to creation, to building designs—into one place
  • Accelerate design workflows with shared company-wide design systems
  • Foster inclusivity in the product team process with products that are web-based, accessible, and easy to use

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.