Back to Portfolio
Overview
Background
Problem StatementDesign Process
User Research
User Story Market Analysis Info Architecture
Design Iteration
Usability Testing
Final SolutionLearnings
Nav.It:
Emergency Fund Autosave
Nav.It is a financial management product guiding young adults to build financial health and management confidence by integrating mindfulness.
I led Nav.It's and designs to help Nav.It users increase financial security by ensuring they have emergency funds and savings in preparation of unprecedented events and specific goals.
and increased # of Emergency Fund holders
I led Nav.It's and designs to help Nav.It users increase financial security by ensuring they have emergency funds and savings in preparation of unprecedented events and specific goals.
and increased # of Emergency Fund holders
Timeline
6 months
6 months
Tools
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa3534096cb138260205cd_62c6bc3deee9410fe137d920.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa34e8fb7bf4cdf7e94069_Adobe_Premiere_Pro_CC_icon.svg.png)
Skills
User research
User story
Usability testing
A/B testing
Competitive analysis
Prototyping
Design Spec
Ship/implementation
User research
User story
Usability testing
A/B testing
Competitive analysis
Prototyping
Design Spec
Ship/implementation
Team
Victoria Liang (UXD)
Hannah Mei (UXD)
Paul Campbell (PM)
Toby Miller (Dev)
Daniel Trotter (Dev)
Kaitlyn Ranze (UX Writer)
Kayden Maier (Customer Success)
Victoria Liang (UXD)
Hannah Mei (UXD)
Paul Campbell (PM)
Toby Miller (Dev)
Daniel Trotter (Dev)
Kaitlyn Ranze (UX Writer)
Kayden Maier (Customer Success)
Role
Lead product designer
Lead product designer
Timeline
6 months
6 months
Tools
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa3534096cb138260205cd_62c6bc3deee9410fe137d920.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/64aa34e8fb7bf4cdf7e94069_Adobe_Premiere_Pro_CC_icon.svg.png)
Skills
User research
User story
Usability testing
A/B testing
Competitive analysis
Prototyping
Design ec
Ship/implementation
User research
User story
Usability testing
A/B testing
Competitive analysis
Prototyping
Design ec
Ship/implementation
Team
Victoria Liang (UXD)
Hannah Mei (UXD)
Paul Campbell (PM)
Toby Miller (Dev)
Daniel Trotter (Dev)
Kaitlyn Ranze
(UX Writer)
Kayden Maier
(Customer Success)
Victoria Liang (UXD)
Hannah Mei (UXD)
Paul Campbell (PM)
Toby Miller (Dev)
Daniel Trotter (Dev)
Kaitlyn Ranze
(UX Writer)
Kayden Maier
(Customer Success)
Background
Company Context
Nav.It is a financial management product targeted towards 18-30 year olds who need guidance with building financial management health by integrating mindfulness.
Business Problem
Nav.It aims to increase user financial security after discovering many existing users live pay check to pay check, are not skilled at managing their finances and would not be able to sustain in emergency situations.
Problem Statement
How Might We
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6589e23be0c14e285bfd39f8_Nav.It%20EF%20Problem%20Statement.png)
User Research
"What are your areas of interest in money management"
◦
Although more people were interested in investment to increase their networth, we were curious as to why so many people were interested in saving for an Emergency Fund.
survey responses showed interest in Emergency Fund.Although more people were interested in investment to increase their networth, we were curious as to why so many people were interested in saving for an Emergency Fund.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6557d51fdfef6fc2503d2129_Nav.It%20EF%20Survey%20Result.png)
"If you lost your job today, how long could you survive financially? What are your experiences with Emergency Funds?"
We interviewed 10-12 participants:
◦ did not have an Emergency Fund!
◦ did not have an Emergency Fund!
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6444cf8b321aed7073310fee_EF%20User%20Research%20Feedback.png)
Company beliefs:
We truly believed that although a higher % of people were interested in "investments", people should not be worrying about that without an Emergency Fund!
According to Vanguard:
American registered investment advisor with about $7.7 trillion in global assets under management: "An emergency fund is a stash of money set aside to
Having a secure emergency fund is a fundamental step to attaining financial wellness and be at peace in the mind.
" which can be very and . Having a secure emergency fund is a fundamental step to attaining financial wellness and be at peace in the mind.
User Story
I analyzed user stories and addressed each persona's challenges and aspirations. This is how I envisioned Emergency Fund and Goals savings integrating into their routines to enhance their lives within and beyond Nav.It.
User Story 1
Kim
with Nav.It, mastering personal finance basics. She successfully set up an which proved crucial in ![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b2832c1742d6920dc5171_Nav.It%20Savings%20User%20Story%201.png)
User Story 2
Andrea, leveraging her first full-time income, utilized Nav.It to master personal finance basics. She aims to buy a new car, having already established an Emergency Fund and utilized Nav.It's Goals autosave to complete her down payment.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b31eff1b468de2a92f8f2_Nav.It%20Savings%20User%20Story%202.png)
Market Analysis
I was not familiar with how products introduced or reinforced Savings and Emergency Funds for users. Therefore, I wanted to distill the optimal method to encourage users to set up an Emergency Fund. I looked at 14 financial apps to see how they approach savings and discovered that there is
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658652d200518a27e2619140_Nav.It%20EF%20Financial%20App%20Analysis.png)
Information Architecture + Flows
For this project, I focused on the My Savings portion of the IA specifically.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/654d805d8c6fed0c8573fdc1_Nav.It%20EF%20Information%20Architecture.png)
User Flow
The following flows demonstrate:
1. End-to-end process of users setting up either Goals or Emergency Fund (EF).
1. End-to-end process of users setting up either Goals or Emergency Fund (EF).
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6589fc3ef3fc83590128021b_Nav.It%20EF%20End-to-End%20Flow.png)
2. How specific functions like the EF Calculator and Auto Save flows work.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6589fc912b7c0866c369eec3_Nav.It%20EF%20Key%20Flows.png)
Design Iteration
When implementing brand new features such as the Emergency Fund Calculator and Emergency Fund Autosave, I iterated and continuously tested it with our target users.
Initial Exploratory Sketches
I worked hand in hand with the senior designer to brainstorm essential functions in the Emergency Fund and Goals Autosave flow. This set of exploratory sketches focused on functionality and layout.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b8a87ecda37b4e00f163b_Nav.it%20EF%20Initial%20Sketches.png)
Emergency Fund Saved Elsewhere
I A/B tested with our users to see which method of documenting funds saved outside of Nav.It worked best.
Iteration 1
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b76e02688f23f728bc6fb_Nav.It%20EF%20Iteration%201.png)
Iteration 2
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e43fa1ee35e8b178cd092_Nav.It%20EF%20Iteration%202.png)
Emergency Fund Calculator Flow
A feature to help users automate and personalize how much Emergency Fund is appropriate based on their needs.
Iteration 1
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658b899586303d8f3a61d51d_Nav.It%20EF%20Calculator%20Iteration%201.png)
Iteration 2
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6590a401ba48a05dfdf5f134_Nav.It%20EF%20Calculator%20Iteration%202.png)
Iteration 3
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6590a40b09103cb044ea8e51_Nav.It%20EF%20Calculator%20Iteration%203.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/654d86547c1e9fca874e0008_Nav.It%20EF%20Design%20Iteration.png)
Usability Testing
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6594379b771ffaeaffb3fdaf_Nav.It%20EF%20Usability%20Testing.png)
User Feedback
Based on the testing process, I concluded the following to help further iterate the product. Ultimately, our users value:
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/659430e60f0e3e0dbf680836_Nav.It%20EF%20User%20Feedback%201.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/658e44b895b2afce328aaea4_Nav.It%20EF%20User%20Feedback%203.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/659430fbd0c5c83303c53f79_Nav.It%20EF%20User%20Feedback%202.png)
KPI Impact
Increased overall user financial wellness by increasing % users with Emergency Funds.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/6588b29c4c3ee93f91d1ab35_Nav.It%20EF%20KPI%20Impact%20Graph.png)
Autosave Onboarding
Granting access to savings on the homepage boosts user exposure, with the Emergency Fund prominently featured as the largest box at the top.
Emergency Fund (EF) Calculator
The calculator quickly helps users find out exactly how much they should save monthly based on their timeline goals and financial habits.
Usability Heuristics: Recognition rather than recall.
The calculator result carries over to EF autosave flow by autofilling the information. Users can change the number if they wish to.
Usability Heuristics: Recognition rather than recall.
The calculator result carries over to EF autosave flow by autofilling the information. Users can change the number if they wish to.
Existing Autosave Flow (EF/Goals)
By saving for Goals and Emergency Funds through the existing auto save flow, users have expressed their relief in not having to transfer money manually routinely in case they do fall off track.
EF Elsewhere
Users with external Emergency Funds can incorporate those amounts into their savings within the app, ensuring dependable and accurate calculations.
Link other Emergency Funds to Nav.It:
◦ Savings accounts
◦ Cash amounts
◦ Other (i.e. Crypto)
Link other Emergency Funds to Nav.It:
◦ Savings accounts
◦ Cash amounts
◦ Other (i.e. Crypto)
Goals Autosave
Users prefer setting up goals based on a timeline rather than typical categorizations, as it provides a greater sense of accomplishment and improves goal planning.
Total Autosave, EF and Goals Progress
Displaying savings progress for both Goals and Emergency Funds, both together and separately, allows viewers to track their financial progress, fostering increased confidence.
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/659430a98f80aa34ba9bf10c_Nav.It%20EF%20Learnings.png)
![](https://cdn.prod.website-files.com/617c81eb4a99e12869bf1299/63a500a104383d053da8490d_Screen%20Shot%202022-11-14%20at%204.14%201.png)