Redesigning Vanguard's Plan manager site/ Working with VGs design system
Collaborated with a cross-functional team to redesign the Plan Manager site designing 1000+ responsive screens and ensuring an optimal user experience across 3 different breakpoints.
ABOUT THE PROJECT
Role: UI Designer
Duration: 1.5 Years
Domain: Investment Management
Tools: Sketch, Invision, Jira, Confluence, Microsoft tools
CONTEXT
As an investment advisor headquartered in Malvern, Pennsylvania, boasting a staggering $7.7 trillion in global assets under management, Vanguard has achieved remarkable financial success. However, its web presence, which is a crucial aspect of modern business, was outdated and in need of a significant overhaul.
In 2019, Vanguard underwent a partial site redesign and beta-tested a new mobile app.
ISSUES IDENTIFIED
THIS IS WHAT THE OLD VANGUARD SITE LOOKED LIKE
Issues identified:
Typography is small
Hierarchy is weak
Information is over-presented
User flow is not coherently planned
Components and link styles are confusing and nonstandard
SHIPPED DESIGN
Responsive Web Designs for My Plan Manager (MPM)
PROCESS
MY ROLES AND RESPONSIBILITIES
As a Junior designer, I collaborated with a cross-functional team in an Agile environment to redesign the MPM site. I played a key role in Wave 3 of the project in 2021, focusing on the design of responsive breakpoints to ensure optimal user experience across various devices.
DESIGNING FOR 1920px, 1080px, 320px BREAKPOINTS
01
Designed screens for user stories identified by the business team based on their importance and urgency that can be realistically completed within a sprint.
02
Peer review to maintain design consistency across breakpoints.
03
The process involved daily, iterative collaboration with onsite teams.
04
Assisted developers with queries while developing the breakpoints to ensure a seamless development process.
WORKING WITH CONSTELLATION (VG DESIGN SYSTEM)
01
As a visual designer, I took charge of resizing and designing the other breakpoints based on information & Visual hierarchy supported by the design system.
02
Standardized all the pages to consistent spacers, dividers, and font styles. Reduced the number of type styles from the previous design to font style identified in the design system.
03
The designs were upgraded from a library of necessary features and components.
Challenge
Redesigning large format tables with significant numerical values and data tables from 1920 to 360px breakpoints.
Result
Unusual challenges were tackled in a collaborative approach with senior Designers, which resulted in the iteration of multiple design variations and the addition of new components to the design system by collaborating with the client team.
QUALITY ASSURANCE
01
Shared Invision files with developers and business teams allowing them to comment on or make queries on handed-off designs.
02
Inspected the developed designs to ensure they were in line with the final designs and provided detailed feedback reports for redevelopment.
THANK YOU FOR STICKING TILL THE END
I'm bound by an NDA that prevents me from sharing any more details or designs at this time.