Light Gray
#EBEFEF
Blue
#1B4965
Light Blue
#C6D8D9
Ebony
#00202E
A money-saving tool and financial tracking app
Mobile app
Mobile app
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
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.
01
The app is designed to address the following user stories, which were provided as part of the design brief:
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.
Based on the user flow diagram, I developed low fidelity wireframes digitally in Notability. Below are some examples of the initial wireframes.
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:
Through the usability testing, I was able to pinpoint the following issues with my design:
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
Revised dashboard
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 UI
Revised savings plan UI
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 savings plan UI
Revised savings plan UI
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
Revised savings goals 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
Revised goal category selection
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.
Dark 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.
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.
Based on the branding guidelines, I developed the style guide, which includes typography, color palette, and UI elements.
Dico Slab Extra Bold 36pt
Seravek Basic Medium 30pt
Seravek Basic Medium 24pt
Seravek Basic Regular 16pt
Seravek Basic Regular 16pt, #3596AF
Seravek Basic Regular 14pt
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.
#EBEFEF
#1B4965
#C6D8D9
#00202E
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.
#ECC21B
#3596AF
After the usability testing, I revised the designs accordingly, then applied the branding and style guides to create the high fidelity screens below.
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.
Welcome and sign up
Select bank & sign in
Select accounts to link
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.
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.
List of savings goals
Savings goal page
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.
Choose savings goal category
Provide details
Create a savings plan
Review and confirm
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.
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.