Vancity Wealth Planner

App UX Design

Brief

Vancity Wealth Planner is a future-proof prototype of a feature added to the existing Vancity Mobile Banking app, made by the Vancity Digital Innovation Team. It provides a step-by-step guide for users to add financial goals, determines their risk tolerance, and recommend investment products.

I joined this team for a one-month contract as a UX Consultant. I worked closely with the Project Manager Archana Ananthanarayan and financial experts at Vancity on improving the overall UX of this feature by updating the user flow and user interface redesign.

My Role

- Feature research
- User flow improvement
- Wireframes
- Hi-Fi mockup
- Figma prototype for basic testing

‍

‍

1. Project Research

- About Wealth Planning

I researched wealth planning to make sure I'm familiar with wealth planning before diving into the user research.

‍
‍

What is wealth planning?
Wealth planning evaluates an individual or family's current financial situation and sets up strategies to help them meet financial and life goals.
‍
Why do you need to do wealth planning?
Wealth planning increases your ability to manage your cash flow. So you can set aside money for emergency funds and charitable giving, etc.
‍
How to do wealth planning?
Starts with considering what goals you want to achieve in the future and then looking at how your income can support those goals.

- User Persona and User Story

User Persona
Name: Neo Li - Vancity customer
Age: 26
Gender: Male
Maritual Status: Single
Occupation: Technical Artist - worked in the game industry for 2 years
Location: Vancouver
Comfort with Technology: Very comfortable
Quote: I picked credit union over the bank because it has lower fees and higher interest rates. I live on a tight budget, so it fits me better. Even though I have one, I never wholly trust my financial advisor. I always wanted to try investing myself but never knew where to start.
‍
User Story
‍As Neo, I want to get personalized investment advice tailored to my financial goal to fully understand how to invest and start investing cleverly without paying a financial advisor.

- Competitor Analysis
‍
I downloaded 5 popular financial planning apps in the market and took screenshots of their goal setup or risk profile feature. The screenshot attached lists features that I think we can learn from as a reference.

Vancity wealth planner feature competitor analysis screenshot.

2. Challenges & Opportunities

Challenges:
- Some people are intimidated by the idea of wealth planning and even giving their money to a financial advisor to manage.
- Some people don't even have financial goals.
- Some people are not aware of the advantages of wealth planning.

Opportunities:
- It is a feature within the completed Vancity Banking app. There is no need to onboard or link to an external bank account for the bank balance.
- Visual updates of the old Vancity App gives the app a fresh look and increase its usability. It reinforces the Vancity branding using the existing brand style guide.
- Weekly/monthly goals feature brings customers back to the app weekly/monthly.
- Educates customers to monitor their financial health and raise awareness of wealth planning.

3. Solutions

- User Flow
‍
One conclusion from the user research and opportunities & challenge analysis was that the goal-setting part is essential for users to start their wealth planning process. To emphasize that part, I moved the goal-setting flow to the front and made it independent as a tab, with the other tab being the risk tolerance test. If users come back and revisit their goals and risk analysis, they can jump into either of them.

In addition, I removed the limitation of picking only 2 goals. Users can add as many goals as they want and edit the goal anytime. In the first-time user flow, they can only pick one goal to set up as a start.

Thirdly, I gamified the "Wealth Opportunity" screen. Users can input any amount of starting funds or monthly contribution and adjust the risk handle to see the differences. It's a good visualization tool if they want to change their preference or saving plans.

Vancity wealth planner feature user flow.

- Sketches
‍
I started with pencil paper sketches. Doing sketches is the most efficient way for me to turn my thoughts into reality. After seeing my ideas on paper, I can better understand the layouts and the connections between screens, which helps me do more advanced design updates in my next step.

- Wireframes
‍
I worked on mono-colour wireframes based on the latest iterations of my sketches of some of the main screens. During this process, I pay attention to details to cover all required tasks to be done on a screen. I'd also write down all required elements for each screen, so I don't miss anything. Iconography is also done in this step.

- Hi-Fi Mockups and Prototype
Lastly, I created Hi-Fi mockups for each screen, integrating the branding style guide of Vancity and tailoring the copywriting. I created an interactable prototype using Figma. When Figma wasn't out yet, I usually used TapCase or Invision to make testing prototypes.Check out the Figma prototype here.