Wiser Budgeting App

A concept for Upstart

Wiser is an app that helps millennials get ready for the next big step. Whether their dream is to get married, purchase a new house, or plan a life-changing adventure, Wiser makes saving feel effortless. The app breaks down budgeting into one monthly allowance and lets users log their purchases to make smarter decisions. Fun daily financial tips and delightful visualization of their progress help them become wiser with money.

Persona

Joshua Williams is a 28 years old marketing manager in the East Bay area of San Francisco. He enjoys technology and uses mobile apps as part of his daily routine. He prefers products that are straightforward and complete tasks quickly at his fingertips. In his free time, he loves trying new restaurants with his girlfriend, Jenny. Last year, he decided she is the one he wants to spend his life with, and he started saving for an engagement ring. He also wants to set aside money for a home down payment. With all the life-changing goals, Joshua feels overwhelmed and a bit under pressure. He is looking for a budgeting tool that helps him track monthly spending and encourages him to keep saving.

Features

Wallet

Users can easily see their spending budget. The app tells them how much they spent and the days left until next month. Users can record their daily purchases by pressing the “+ Spending” button.

Spending

When users log their purchases, the app groups them into categories. A pie chart gives them an overview of their spending habits. At the bottom, each card expands to provide a more in-depth look at their purchases.

Goals

Users can see the progression of their saving goals visualized delightfully. They can customize the icons of each fund to make it more personal. The time metric to reach their goals was hidden by design to reduce impatience and stress. Users can update this option under preferences.

Budget

Overview of income, fund allocations, and budget estimation. Users can adjust the amount of savings for each fund, and the app will suggest an updated spending budget.

Landing Page


Main navigation

Keeping the main nav simple to keep users focused on the landing page. “Download app” CTA to encourage conversion.

The hero

The hero image of the app lets users know they are looking at the same product from the Facebook ad. The headline is bold and grabs attention. It’s short and gets to the point of what the app does. The supporting copy summarizes the service the app provides. The App Store badge is another CTA, and it demonstrates credibility by being approved by Apple.

Trustmarks

Trustmarks residing at the top of the page will help build credibility right from the beginning. Especially with financial technology, building trust with users will lead to higher conversion.

Selling points and showcasing

Highlighting the features of the app provides details of the product. With straightforward sub-headers and copy, the targeted audience (web-savvy busy millennials) can quickly glance and learn about the product. Simple icons direct attention and add visual delight to each group of content. Showcasing app screens of the app’s next features provides a preview for users. A CTA button at the bottom of the section for users who are ready to convert.

Empathy and future self

After focusing primarily on the technical aspects of the app, it’s time to connect with users through empathy. We present an image of a woman in their age group who feels successful in achieving her goal with the Wiser app. Her expression is a reflection of what we want the audience to feel, happiness.

Security reassurance

Addressing users’ security concerns will give them the confidence to further trust the product.

Footer

For consistency, the footer navigation is the same as the main navigation. The CTA “Download App” is styled as a text link instead of a button to be less pushy but still available.

Facebook ads


Ad Version 1

In this image, we have a young millennial who looks confident and ready for his future. Although we’re not showing the app, the mood and colors match the product and landing page.


Ad Version 2

In this playful version, I’m envisioning the scenario of a user deciding on paying for a second serving of taco, beer, coffee, etc. Because he is spending consciously (with the app’s help), he “deserves” to be rewarded. The gradient background of the image stands out from the Facebook feed. Showcasing the app gives the audience a preview of the product and correlates with the landing page. The overall ad image passes the FB image text checker requirements.

Wiser Identity

One is “wiser” when spending smarter. Logomark of paper plane symbolizes freedom, calm, aiming for a goal, and hitting the target.

Font family


Noto Sans feels strong, dependable, and modern.

Color palette


The primary colors are dark purple and teal. Purple creates the feeling of reliability, loyalty, and diversity. Teal represents trust and hope. It is also a sibling of Upstart’s brand color.