Vanguard is the second largest Asset Management firm in the world. The European part of the organisation wanted to update their Professional Investors (B2B) websites across 14 countries.
We joined efforts through a collaboration framework (with teams from Germany and Australia) to create a European Design System (EDS) that would:
↓ Read the full sroty below.
Vanguard maintains 17 websites across Europe. Some of these sites are transactional (investors can buy assets) while others were purely informative (needed to meet regulatory standards).
It seemed the moment to adopt a forward-thinking approach (moving to a React js library), and make things more efficient on the design and content fronts, easing the workload on the Content Team and ensuring any future changes would scale seamlessly.
A renewed component & pattern library would be a source of truth for all teams and would require minimal toing & froing.
This is when Vanguard reached out to Somo (now CI&T) and I was sent in as a Consultant.
Vanguard Australia had spearheaded a design library of components shortly before I was allocated to work on this project. Initially, the idea was to extend this to work for us in Europe, but on a closer look we found that:
Germany had been working in a separate direction for the B2C market and they were just about to launch their mobile app. The US part of the business had its own library, Constellation, but it was very specific and, again, different.
After much delliberation, it was resolved that:
The solution seemed to be: Let's build from the ground up to minimise techincal & Design debt, but le'ts also adapt exisisting components that would be helpful and aligned.
...The question then was: how should we bring it all together?
We needed a framework to give things some structure and to make sure we knew where all the moving pieces should be.
I worked with Vanguard's Designers in Europe (Armando Affonso Michael Russ, Angelo Schiavone) and assembled a collaboration framework to organise how things should be. We then came up with the idea of a "Design Council": a small group that wold work closely to align it all and make decisions quickly and sensibly.
We wanted to organise things around People + Tools + Processes. The main points were:
How did we organise this in Figma?
Team types:
Separate team for our design system.
Teams for different countries/markets and business units, and sub-teams for big initiatives within the market (Apps, etc).
Teams for other business departments like Marketing.
Project types:
Projects with multiple files within the same structure.
Product areas or initiatives.
Local Design Libraries.
Design System Council:
Meets at least every two weeks.
Anyone can be a member; at least one member per market (Eur, Aus, US).
Aligned on Time , tools and workflow (dedicated Jira board, etc.).
The Mission of the Council was to:
The next step in setting things up was to:
Once this was done, things started to fall into place and we took steps towards setting up the basics.
One of the changes was choosing a flexi grid as opposed to the fixed grid other teams were using, as well as departing from the Linotype Univers or Mark OT typefaces used in previous interfaces and by other teams respectively.
We developed a process (a workflow) and the Council was a great forum to dicuss these matters, keeping them focused and productive.
For any components we'd build, the process involved checking requirements against what was available first, then other considerations such as:
We made seeking feedback a part of this process, and help understanding by documenting not only the component itself but also how it interacts in context, using rapid prototyping.
Open an example of how we documented a mobile menu, or click on the image below.
This way, we made sure that:
In the case of some other (existing) assets, the work was mostly about simplifying and making things easier for both us and the users.
A good example was the icon set. The old one was far too large and therefore had two main problems: it was hard to navigate (not easy to learn or remember all of them), and it didn't help consistency (as many concepts could be represented by more than one icon).
Working with Alex has been a blast! Even with the challenge of building a complex design system, his knack for creative strategies and careful planning shines through. As a team player, he effortlessly blends his vision with the group's. Plus, he's just a genuinely awesome person, making him an invaluable asset to any creative team.
Lead Product Designer at Vanguard UK
Vanguard Europe, in sync with other overseas teams, has a solid set of design foundations: the brand book is very specific on what not to do and how to use all assets, and the EDS (European Design System) is now a shared source of truth for all teams.
A design system is never finished, but after the first phase, the benefits for the organisation are multiple:
My role
- Creation of EDS, component design and documentation, testing.
- Liaison across overseas teams.
The team
Armando Affonso and Michael Russ (Vanguard Germany), Angelo Schiavone (Vanguard UK), Hamid Islam (Product Manager), Charlie Francis (Frontend Engineer), Sean Glen and Margaret Fulton (Vanguard Australia)