top of page
Header.png

Nest

A personalized financial management app designed for Gen Z, while enhancing their financial literacy. Motivated by personal interest in finance, I strong believe it is important to increase knowledge of young individuals, including myself, on money management as early as possible.

Duration

6 months

Team

Individual

Skills

UI Design, User Research, Prototyping

Struggling with money management

Many young people do not know money management.

As quoted by a Bank of America staff I spoke to, knowledge of finances among Gen Z is unfortunately low, which would lead to future issues. The consequences has been proven by a survey they recently conducted.

Donut Graph.png

2445

respondents

41% spend more than they earn.

56% do not have enough savings.

72% feel financially unprepared in the future.

*A survey conducted by Bank of America.

Thankfully, many are keen to learn finance!

Having witnessed the state of disastrous state of economy during COVID-19, many Gen Z have expressed interest in learning more about finance.

*A survey taken from the Global Financial Literacy Excellence center.

However...learning financial literacy is tough.

According to my user research study among those who have tried learning before, here’s how they felt:

Gray speech bubble.jpg

Overwhelming to learn

Blue speech bubble.jpg

Felt it was a chore to learn

Gray speech bubble (short).jpg

Large learning curve

The solution

A personal financial management app that will teach financial literacy

To make understanding finance easier and stress-free.

Nest home page.jpg

The initial idea was totally different

Flashcards were the popular option.

I first looked at existing solutions to get a glimpse of how the problem was tackled, and Zogo was the most popular, with a 55,000 ratings on the iOS app store. It explained financial concepts in a succinct manner with flashcards, and offered gift cards for learning.

Mint icon 6.png
Frame 13.png
1200x630wa 1.png

Flashcards were the best option.

They were perfect to breakdown complex topics into a simplified manner. I then needed to brainstorm ways to ensure learning was engaging and easy.

Sticky notes.jpg

However, figuring out the WHY would users want to use my app was tough.

Flashcards were incredibly common. I’ve brainstormed ideas, but nothing stood out as a major differentiation. However, with guidance and support from my colleagues and my instructor, they suggested a personal finance tool, for its visualization capabilities.

The teaching component

Teaching and explaining concepts in an interactive manner

zogo better 1.jpg

Building off from flashcards.

Nest can explain concepts visually and interactively beyond reading. Users will get a sense of how it works.

*Screenshot from Zogo

Guiding finances along the way

Gradient color.jpg

Providing advice on managing your finances.

Going further beyond just looking at your finances.

Nest not only displays your finances, but it can also provide a range of tips to effectively manage them.

Mint iOS 66.jpg

*Screenshot from Mint

Gradient screen spending tips.jpg
tips.png

Solidifying the UI design

UI progression card.jpg

Starting off with the graphs, how it would look like.

Lo-fi wireframes were developed further to bring more clarity to how the final design might look like.

It looked great, until I added colors.

I initially went with electric purple for a modern and vibrant style. However, it looked like a meditative app as a result.

2nd prototype.jpg

Back to the drawing board.

The data visualization needed an overhaul as they lacked variation, in addition to some composition changes in the UI.

last prototype.jpg

The final design

Final Design template.jpg

Blue was chosen for its perception of professionalism and reliability as the primary color.

Color codes.jpg

GT Maru selected for the main typeface.

This typeface’s decorative style with its rounded edges gives a casual feeling, to promote learning finance is stress-free.

iPhone 13 Mockup-2.jpg
iPhone 13 Mockup-1.jpg
iPhone 13 Mockup.jpg

Active engagement through achievements.

As another differentiator, I wanted to include a personalization feature for my users, which they can earn by completing achievements.

Achievement screen.png
Theme Store mockup.jpg
Component 5.png
Component 5-1.png
Component 5-2.png

Next steps

Improving understanding of investing.

I aim to refine the feature for understanding investment further, beyond the pointers I have already included when researching a company.

Next steps.jpg
Blue gradient.jpg

I would like to include features for understanding taxes and credit as well. I also hope to bring this app to life.

Reflection

I made this concept app after having learned the concepts of visual design for the first time, and I was very pleased with the result. I intend to bring it to life one day. A number of things I learned after working on this project:

1. Gained a sense of what makes a good and engaging visual design by understanding noise, crowding, and spaces in composition.

2. Comprehending how to identify typeface choices, and rationalize my decision behind my choice.

3. Understanding and being aware of the impact of color on the user’s perception of the UI.

bottom of page