Wealthfront 529 College Savings Plan

Designing a new college savings investment product that is automated, stress-free and delightful to help young parents save for their children's college expenses.

 
 


Background

With a mission of becoming the hub of people’s financial life, Wealthfront wanted to build a brand new product that helps parents saving for college - a 529 College Savings Plan, an education savings plan designed to help pay for qualified college and related expenses and allows your investments to grow tax-free. It was one of Wealthfront's major product launches in 2016, and it's the first college savings plan sold by an automated investment service company like us. The product development process took around 8 months.

My Role

The sole designer in a cross-functional team of 10+ 
The project team included product designer, product manager, front-end and back-end engineer, investment research, partnership, client service and compliance.

Closely collaborated with PMs and engineers in the design process
I partnered closely with two different product managers in different stages of the design process, translated research concepts into features that address customer behaviors and motivations; I also collaborated with frontend and backend engineers to turn design into high quality implementation given time constrains, and constantly improving the design-engineer collaboration workflow.

I led the end-to-end design of the product MVP, delivered multiple key features

  • Designed the college savings account signup flow based on existing flow structure;
  • Overhauled and redesign the withdrawal funds flow across all account types; 
  • Designed the interactive glide path - a key visualization for client to understand our investment method;
  • Redesign the monthly account statements and account rollover forms.
  • Help defined UI components for our new design system;

Working with shifting external (partnership with Nevada State) and internal timeline
During the process, I rapidly incorporate feedbacks from countless rounds of reviews and multiple stakeholders into my design iterations; I coordinated with designers and PMs from other project team to make sure my work fit into the bigger product roadmap; I also initiated cross-project meeting to clarify ambiguity, gain alignment and drive decision making. 


 
 
For most new parents, having a newborn child means a lot of conflicting emotions and new found responsibilities. Education is the best gift for a kid, but saving for college can be very overwhelming.

Design Challenge 1  - Withdraw Funds feature redesign

Redesigning thew Withdraw Funds feature was one of the most challenging work in this project.

Context

When users need to withdraw money from a college savings account to their bank account, they can access the withdrawal function via the client dashboard. 

Wealthfront has three account types, personal, retirement and college savings. They share similar withdrawal flows but have different requirements and complexity. Our old withdrawal flow only covered the first two account types, the newly added 529 account withdrawal is the most complex one among all.

Core user group and their needs

Our product is targeting the new parents in their 30's/40's who are thinking about sending their child to college. They are busy with parenthood and new to family financial planning in general.

Withdrawing funds for college could be an important and stressful task: it's a big amount of money, it might have tax consequences if it's not qualified, and it's for the child. Therefore, users really need reassurance to withdraw their money safely, make sure information is correct without any mistake (because it's difficult to correct). They care about how and when their funds will arrive and also need to be informed of any important tax related information.


Problems of the existing withdrawal feature

1. The IA was not compatible and scalable for the college savings withdrawal flow that contains complex long form and multiple conditional selections;

2. Cluttered information on a single dropdown panel, lack of clarity. Users are very likely to ignore the important information they need to pay attention to;

3. Lack of necessary friction to create reinsurance of the actions, which is likely to seem insecure for users;

4. Lack of consistent and scalable design pattern, couldn’t fit into the new design system that was being established.

 
 

Solutions

 The final solution was a withdrawal modal that could be access via either the client dashboard or a specific account page.

Keeping what the users wanted to achieve in mind, some principles I followed when designing the experience:

1. Clear: I broke down the complex flow into separate steps, guiding the user completing the flow with a focus of one task at a time; progressively provide relevant information when it's needed; adding a review step for reinsurance, clearly state the fund arrival date and tax information;

2. Friendly: Be conversational, use simple and straightforward language to explain concepts or information that they need to pay attention to, avoid jargons;

3. Delight: I brought in a celebratory moment in the end of the flow to let users feel a sense of accomplishment, which fulfill their emotional need;

4. Consistent and scalable: Using consistent design pattern across the flow; defined design patterns and components to be reusable and scalable for other products.
 

define ui components

When designing the withdrawal flow, some UI components like modal, accordion and the overall design pattern were not defined to be reusable and extendable. I helped document the definition of these new components and collaborated with front-end engineer to build them into our design system.

 
 

Result

The new withdrawal funds feature was successfully launched along with the new dashboard. It was well-received by the team and our clients with it structured IA, clear and transparent instruction. Client Service tickets were largely reduced because of the new design.
 

Design Challenge 2  - Making sense of the glide path graph

The investment glide path is a key graph for understanding how Wealthfront adjusts the user's portfolio allocation mix across a timeline from investment start until the child enrolling in college. Based on the user's risk tolerance, the investment is allocated in 9 different asset classes from high risk, high return (like stocks) to low risk, low return(like bonds and treasury bills). The closer to the college enrollment date, the lower risk the portfolio mix. It's all balanced automatically by Wealthfront so that to make sure the parents could hit their investment goal overtime.

 
 

A glidepath could be overwhelming and complex to understand at the beginning. To find out a comprehensive way to explain and represent the glide path, I started with understanding the underline method from the original research paper, and explored breaking down the glidepath by showing the investment mix change when toggling the "year" slider(graph 2, 3 below).

However, representing a holistic timeline was still considered important for encouraging the user to think about investment in the long term. Therefore the final decision went back to the glidepath. I added in engaging interactions, allowing users to hover on the graph and explore how the their allocation changed at the child's different ages.

Additionally, I also helped unify the color palette of representing different asset classes across all of our products.


Impact & Lessons Learned

The 529 College Savings Plan product reached 1000+ funded accounts in the first month of launch. It was a momentous success for the company and a great example of team collaboration. My quick iteration in delivering design accelerate the development process and helped the team win the crucial approval from internal and external stakeholders. I was also able to contribute streamlining the overall cross-functional, cross-project collaboration by facilitating meetings, constant communications and improving the design-implementation workflow with engineers I worked with.

From the process, I witnessed how a great team effort it took to build a successful product. I learned to play my role by being the voice of user experience, keeping quality work while trading off for priorities, and respectfully collaborating with everyone else. Most important learning was: being an industry innovator, other than innovating the automated technology, even having simplified UI and language, clear and comprehensive flow and documents could be the biggest innovations that Wealthfront could bring. Good design truely has its power to bring trust to our clients.