Rich Cossentino
UX designer

Advice Portal

Design process from sketches to UI

Image alt tag

A portal for Vanguard participants to learn about and begin the process in signing up for Vanguard’s Personalized Advice Services. While simple on the surface, this interface is powered by a very complex system of requirements from the user, serving up exactly what the user needs to proceed with enrolling in the best Advice offering to fit their financial situation.

Sketches to UI

Sketches

The quickest way to gather my thoughts is always to sketch out some ideas, possibly solving some challenges for the user up front.

The top issue to be solved in this project was "How will the user know what Advice offer is right for them?". With so many details across three offers, we wanted to make sure getting started in enrollment wasn't overwhelming.

Sketching at an early stage allowed me to visualize a couple viable solutions efficiently, making the jump to low-fidelity wireframing a simple task.

Sketches to UI

Wireframes

Working closely with my copywriters, I mocked up some lo-fi wireframes using my early sketches as a foundation. This gave our Product Owners something tangible to work around. At this stage, we discovered that a format where users could compare offers side-by-side, rather than top-to-bottom (the PO team's original ask), would be most accessible from a cognitive load standpoint. This gave our users the ability to quickly scan and compare features across each offer.

Sketches to UI

UI Design

After getting sign-off on wires from our Product team, it was time to bring our wireframes into UI. Working with our DSM, I brought the designs into their final state for hand-off to the dev team. I also designed a series of icons to help differentiate each offer while keeping them visually under one "Advice" umbrella.