FinanceFit
Providing Financial evaluation to ensure users meet their future financial goals
Client
PhillipCapital
Project scope
2 months
Tools
Figma
Role
User Testing for Existing Site
Competitive Analysis
Design system
Design Mockup
Usability testing
Overview
Financial planning has become essential to many users as the future is always unpredictable. Providing a financial calculator on PhillipCapital website was to create awareness on the ease of calculating user's future financial goal(s). This also serves as one of our lead management tool to attract potential clients and convert them into clients.
The Problem
Despite providing a financial calculator for potential clients to use, the signup rates was low as we could not attract potential clients to try out our financial calculator. This affects our marketing/sales as we could not gather more leads to channel into our marketing funnel.
Our Solution
We redesigned the existing Financefit page by revamping the aesthetics and enhancing the user's experience of using our Financial calculator. We want to ensure that the user journey is an easy and hassle free process of having their financial goals evaluated.
Defining the Problem
Findings after Flow analysis
To determine the underlaying issue on the slow sign up rates, We carried out a user testing to examine the user flow and experience of Financefit before ideating for new designs.
Users do not know where to locate Financefit on the website
Financefit was under the career tab resulting in users not being able to locate Financefit in the navigation stage as this was placed under the wrong navigation category.
Even if users are aware of the existence of Financefit, they are unable to locate it in the website causing many to give up.
The aesthetics of Financefit is too outdated
The look and feel (aesthetics) of Financefit was too outdated compared to our competitors. This gives off a very unattractive feel for our users, giving them the impression that this feature is outdated.
Users are more attracted to our competitor's website as the look and feel design and the ease of use makes it a preferred choice of use.
Users are not able to access information effectively
The tooltip consists of more information including links to website sources. However, users are not able to access website links as the tooltip is a hover function. This defeats the purpose of providing information when users are not able to access the information.
Competitive Analysis
Next, I evaluated our competitor's Financial planning process and was able to collate the strengths and weakness of their entire process
After gathering feedback from our internal members from the user testing as well as the evaluation from our competitor's analysis, I started listing all opportunity areas and proposed the possible design changes after validating them with the developers.
Design Solution
Having a new category in the navigation bar to house Financefit
We placed Financefit under the new category of Financial Tools in the top navigation bar. This will allow users to easily find Financefit without any confusion
Having a landing Page for Financefit
I decided to have a landing page for Financefit. Firstly, this serves as an introduction of Financefit features and it's benefits to our users
Secondly, we wanted to use energy and vibrancy of the colors from the picture on the landing page to attract user's attention to try out our new feature.
Progress bar with steps labeled
During the whole Financefit process, we provided a progress bar to inform users at which step they are currently at. In addition, we also added titles to the steps so users will know exactly what steps they are at and what steps to expect.
Updated the visual design of Financefit
I have redesigned the look and feel of Financefit for the entire process. New illustrations and having clearer feedback with user interface to allow users to navigate through the whole financefit process efficiently and effectively.
Contact form is on the last page of the user flow
Users have pointed out that having to create an account, registering or filling in their contact details before being able to start the process will put them off. Users have commented that having a quick access to Financefit feature would be much desired.
We decided to have users fill in their contact details at the end of the entire process. This gives users the control to choose whether to register and allow our financial advisors to follow up with them on their financial goals. Or they are able to drop off after using our Financial calculator
Iterations
Over a period of 3 months after Financefit feature went LIVE, feedback was gathered and collated from our customer experience unit team. Our team then went through the list of feedback and listed out priorities that would enhance Financefit and the user experience together.
Allowing users to select Multiple Goals
Initially, users were only allowed to select one primary goal as their financial goal.
However, if users would like to select another goal, they would need to start the entire process again. To ensure that users do not experience the repetitive process again, I have redesigned for multiple select of goals on the goal selection page. To ensure users know that they are able to select multiple goals, a tick appears on the selected goal to represent a checkbox for multiple selection. In addition, the number of goals selected will be displayed next to the select button
Informing users of uncompleted goal(s)
When users are able to select multiple goals, they will miss out on certain goal(s) that they did not complete.
To ensure that users are able to get instant feedback when a certain goal is not completed, a popup stating the specific goal(s) will be notified to the user
Putting all the additional Information under "More Info"
Previously, users were unable to access website links as it was under the tooltip which is a hover feature. By having the information under a expandable "more info", users can access the website source links easily.