Vanguard: Fund page redesign and design system

Outcomes

Shipping design of new page in ~5 weeks .
Build was completed within ~6 months due to shifting priorities.
The old page didn't have analytics on it so the impact of design work was impossible to assess from the quantitative perspective.
As my contract ended before the new fund page was launched, the only qualitative evidence that I have is feedback from fintech influencers on YouTube.

Hayley Eich "Here's what Vanguard have changed"

Old fund page before redesign. One can see that on mobile the table component doesn't allow a user to scroll to the right to see more information.

Team

Senior Product Designer (myself)
Content Designer
Product Manager
Software Engineers (5)
Senior stakeholders: marketing, design, business

Deliverables

High fidelity mock ups and prototypes
Tickets for engineers

In this particular project user research was minimal due to various reasons (budget being one of them) so I started with conducting competitive analysis to see what other asset management companies have online (Hargreaves Lansdown, Nutmeg, Fidelity, Black Rock, Morningstar). I've also included some UK ecommerce companies into search as well.

Fund cards

After multiple brainstorming sessions with the content designer and product manager, having a peer review from another designer in the deparment, we've come up with multiple fund card types.

Design of the cards has been considered for multiple fund types and multiple breakpoints (desktop, tablet and mobile).

Icons below the fund name would indicate which asset classes fund holds (accumulating or distributing). Sometimes fund has both classes, and sometimes just one. Breakdown between shares and bonds would be indicated in doughnut chart on the right, and if the fund is new, closing or closed, the name will be followed by the tag.

Animation created by me in After Effects to communicate the concept of rebalancing applied to some funds.

Design system

Once I've finished work on the new fund page, B2B and B2C stakeholders asked me to standardise various card and other components from the design perspective with the idea that the engineering team will build React components and deliver a component library in Storybook. The time given to complete the design phase was just 1 month for 1 person (myself) which wasn't much time given that other work was still in flight.

Please see below the exploration of various components, and the guidance how to use them in Storybook. All these explorations have been agreed and reviewed with stakeholders at a time.