A money-saving tool and financial tracking app

Mobile app

Nest Egg project hero image

Nest Egg


Nest Egg is a financial app that helps users reliably and quickly save money for a specific goal, such as a car or a vacation. It also tracks the user's overall financial health and shows their spending habits in an easily understandable way.

View the Behance version of this case study here.


UX & UI Designer


May - June 2022


Adobe XD

Project Type

CareerFoundry student project


Saving money can be really hard, especially when you do not have a long time to do so or do not have the tools to follow your finances carefully and accurately. This can lead to savings goals not being met on time, or overlooked spending habits that leak money out of the user's pocket.


By providing personalized information on how a user can saved based on their actual finances, the tool itself can provide financial advice during these finite periods of saving. Nest Egg compiles the user's financial information to provide an overall view of the user's finances as well as personalized tips for how to save money.

The Process


User Flow

User stories

The app is designed to address the following user stories, which were provided as part of the design brief:

  • "As a user, I need to be able to tell the tool what my saving goal is, and how long I have to reach it, so that I can save accordingly."
  • "As a user, I want to see a dashboard of my finances clearly and visually, so that I can see how much I am spending on what at a glance."
  • "As a money-saver, I need to be able to input information on the money I am receiving and spending (and on what), so that I can see an overview of my finances."
User Flow Diagram

Based on the user stories, I focused on the following user flows: onboarding (to collect the user's financial information), the dashboard layout and the process of adding a savings goal. Then I compiled them to create the app's overall user flow diagram below.

Nest Egg user flow diagram


Low-Fidelity Wireframes

Based on the user flow diagram, I developed low fidelity wireframes digitally in Notability. Below are some examples of the initial wireframes.

low fidelity sign up screenlow fidelity onboarding screen - authenticate account
low fidelity onboarding screen - select banklow fidelity financial activity screen
low fidelity savings goals screenlow fidelity add goal screen - provide details of savings goal
low fidelity add goal screen - goal typelow fidelity add goal screen - develop savings plan
low fidelity home screen with dashboard
low fidelity goal details screen


Mid-Fidelity Wireframes

mid fidelity sign up screenmid fidelity onboarding screen - authenticate account
mid fidelity onboarding screen - select bankmid fidelity onboarding screen - select account
mid fidelity savings goals screenmid fidelity add goal screen - provide details of savings goal
mid fidelity add goal screen - goal typemid fidelity add goal screen - develop savings plan
low fidelity home screen with dashboard
mid fidelity goal details screen


Usability Testing


Using the mid-fidelity wireframes, I created a prototype in Adobe XD to test with potential users. I set up a script and asked the participants to accomplish the following three tasks:

  1. Log in
  2. View an existing savings goal
  3. Add a new savings goal

Through the usability testing, I was able to pinpoint the following issues with my design:

  1. Lack of visual hierarchy on the dashboard

Some users got confused by what the amounts on the home screen represented. Others understood the amounts, but only after carefully reading the text. The values were not easily understandable at a glance.


Put a higher visual emphasis (with color, size, and/or font) on the important numbers, especially the total savings amount and the remaining amount after planned deposits.

original dashboard

Original dashboard

revised dashboard

Revised dashboard

  1. Amount to be saved was unclear

One of the final steps of adding a savings goal is to set up a savings plan that automatically deposits money into the goal at set time increments. This part of the task seemed confusing, since the user was not required to input any information for this version of the prototype. Thus, some users did not understand that amount shown at the bottom of the screen represented the amount to be saved per the current savings plan. They also did not notice that the amount does not meet their final goal until a warning message appeared.


This issue required a few changes to the design that would clarify the savings plan process. First, I added wireframes to the prototype to show that the savings amount changes as the user inputs information. Then I used a combination of color and text to show whether the current savings plan meets the final goal amount and date. Finally, I added the savings plan to the final review screen.

original savings plan prototype

Original savings plan UI

revised savings plan prototype

Revised savings plan UI

  1. Trial and error process of choosing deposit amount when creating savings plan

Initially, when users create their savings plan, they were required to input the deposit amount manually. This meant that they had to calculate how much they want to deposit to meet their savings goal themselves, or go through trial and error to see if the amount they inputted matched their goal.


I added an option for the app to calculate a savings plan to help users meet their savings goal. Also, to make the deposit options more visible, they are displayed in a grid rather than hidden behind a dropdown menu.

original manually inputted savings plan

Original savings plan UI

revised calculated savings plan

Revised savings plan UI

  1. Savings goal card did not look clickable

Not everyone knew that they could click on the savings goal card to view the full detailed savings goal page.


Give the card depth (by a drop shadow) and add an arrow to the right to show the element is clickable.

original savings goals page

Original savings goals page

revised savings goals page

Revised savings goals page

  1. Users did not know to click on the "Next" button on the goal category page

It seems like some users expected to be automatically taken to the next step after clicking on the savings goal category of their choosing. They did not know to click on the "Next" button.


The visual difference between the disabled and active "Next" button was made much more apparent so that once the category is chosen, the user's eye will be guided to the button accordingly.

original goal category selection page

Original goal category selection

revised goal category selection page

Revised goal category selection


Branding Guidelines

Guiding Principles

People can trust Nest Egg with handling their money and for financial advice.


With Nest Egg, you don't need to read between the lines. We are clear about where your money goes and what you can do to save more.


Finance is a complicated subject, but Nest Egg helps break things down to give you manageable and concrete ways to make saving achievable.


The logo is a literal interpretation of the term "nest egg" and shows a simplified nest with money eggs. The logo design reflects the brand: straightforward and approachable.

primary logo - dark version

Dark version

primary logo - light version

Light version


Nest Egg aims to help break down the complicated ideas of finance into manageable chunks. This makes illustrations a great tool to help accomplish this goal.

Some rules
  • Use egg imagery whenever it makes sense to do so.
  • Use simple geometric shapes for clarity and friendliness.
  • Scenes can be out of proportion to represent abstract ideas in a playful yet straightforward manner.
  • Stick to branding colors. Slight variations on brightness and saturation is allowed when required to convey depth and contrast.
illustration - savings
illustration - home
illustration - rainy day
Writing Style

Nest Egg is for people who are less familiar with the world of finance, so no finance jargon, unless it is clearly explained and required in the context. Use plain language and short, concise sentences. The tone should be approachable but professional.


Style Guide

Based on the branding guidelines, I developed the style guide, which includes typography, color palette, and UI elements.


Logo & Heading 1

Dico Slab Extra Bold 36pt

Heading 2

Seravek Basic Medium 30pt

Heading 3

Seravek Basic Medium 24pt

This is Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Seravek Basic Regular 16pt

Seravek Basic  Regular 16pt, #3596AF

This is a label or caption.

Seravek Basic Regular 14pt

Color palette
Primary Palette

The primary palette consists of shades of a desaturated blue. It evokes a sense of calm and security that represents the reliability of Nest Egg.

Light Gray




Light Blue




Secondary Palette

The secondary palette consists of more saturated and bright colors. Their friendly hues represent the approachability of Nest Egg. These colors are to be used sparingly only for emphasis.





UI elements
Nest Egg UI Elements


The Final Design

After the usability testing, I revised the designs accordingly, then applied the branding and style guides to create the high fidelity screens below.

Sign up and Onboarding

Nest Egg requires users to provide their financial information to work properly, so the onboarding process involves linking any financial accounts to gain an overall view of their financial health and activity.

high fidelity sign up screen

Welcome and sign up

high fidelity bank selection and credentials

Select bank & sign in

high fidelity select accounts to link

Select accounts to link

Home and Dashboard

The home tab acts as the user's dashboard, showing the most relevant information and an overall view of the user's finances. This includes the user's a monthly financial overview, the user's savings goals and their recent transactions.

high fidelity log in screen
Savings Goals

The "Goals" tab shows the user's active savings goals, including the basic information. This includes the title, total amount to save, amount saved to date, and the due date. Tap a goal to view its details, including the savings plan (if any) and deposit history.

high fidelity savings goals list

List of savings goals

high fidelity existing savings goal page

Savings goal page

Add new savings goal

Adding a savings goal involves four easy steps. First select a goal category. This allows Nest Egg to provide recommendations and point you to the tools that will help you set a realistic goal. Next, provide the the basic information, including the goal name, total amount to be saved, and deadline, if applicable. 

Next, create a savings plan. This is the key to reaching your goal on time, and allows you to sit back and let your funds be added consistently and automatically. You can choose between having Nest Egg calculate an automated savings plan or created your own custom plan. You also have the option to skip this step if you don't want automated deposits. Finally, review and confirm the details, and then you will be taken to the new goal page.

high fidelity add goal - pick savings goal category

Choose savings goal category

high fidelity add goal - provide details

Provide details

high fidelity add goal - create savings plan

Create a savings plan

high fidelity add goal - review and confirm

Review and confirm


Responsive Design Mockups

Nest Egg digital mockups


What went well?

As always, feedback from the usability testing was incredibly informative and greatly influenced the final design. In a topic as complicated as finance, clarity in the visual hierarchy and user flow is a top priority to create a smooth user experience. The process gave me a much better understanding of how users view more data-driven information.

What could be better?

Because the app's primary purpose was about creating and monitoring a user's savings goals, I focused on that user flow for the entirety of the design process. However, in a true finance app, understanding one's current financial health would be the first step to knowing how to take the next steps into saving. I only delved into this aspect of the app later in the design process when I created the desktop and tablet versions of the dashboard, which had more room for showing the user's financial spending habits and activity. Ideally, I would have focused on both the user's financial activity and savings goals equally, for a more well rounded money-saving app.