Vanguard, a leading global investment management firm, recognised the need to revamp its existing design system to better align with the company's brand identity and to enhance the user experience across its digital platforms.
Previously, Vanguard's design system was inconsistent across different countries, lacking the comprehensive approach necessary for a cohesive brand experience. This inconsistency resulted in challenges for product, UX, and engineering teams, as they were working without a unified foundation in design language, guidelines, and UI pattern libraries.
Even the lack of motion guidelines would prove to cause potential wobbles in the brand identity, even if the user wouldn’t be able to say why.
The objective of the rebrand was to create a robust, cohesive design system that could serve as a single source of truth for design across all digital (and potentially non digital) products.
This new system would establish a shared foundation for the design, UX, and engineering teams, fostering collaboration and efficient product development.
- Documentation: Developing clear, comprehensive documentation to guide teams in implementing the new brand effectively.
- Accessibility: It’s a bank, used by people of all ages and speaking all languages. We needed to make sure RTL and LTR would work on all components, and make sure that we were hitting AA on all components. This included contrast, video, aria labels, and testing for screen readers, to name a few things.
The result of this redesign was a significantly improved product development process that allowed for scalability and ensured a better user experience across all platforms.
I wanted to make sure that the foundational elements included motion, as Vanguard create a lot of transitions when working with charting libraries and generally when users interact with the interface.
Motion Guidelines: To enhance user experience and maintain consistency, I created two types of motion guidelines: Attract, and React.
'Attract' animations are used when something happens on screen. This doesn’t need to grab the user’s attention.
It can either be:
- A big punchy animation that draws attention to itself (e.g: a popup that is contextually related to an action the user has performed) or...
- An animation that subtly engages to give the user more context to what is happening (e.g: a loader/a timer on a snackbar)These animations can generally take a bit longer to perform, depending on the size and context.
For a modal or any other screen takeover we would want to avoid quick animations as this can be jarring, and not good for epileptic and vision impaired users.
Reactive transitions are used when a user interacts with an object that they expect a response from.
Anything with an affordance, if we have designed it correctly .e.g:
- Pressing a button.
- Clicking a checkbox.
Generally these transitions need to be fast, juicy, and give immediate feedback to the user.
Blackout wanted to build a profile that would allow employers and educators to prohibit the use of mobile functionality, such as cameras, voice recording apps, and web browsers based on user GPS location, geofence, or proximity to beacons. This project included a wider brand application and the development of mobile apps and a desktop PWA.
