To The Moon

DESIGN FOR MOBILE APP AND RESPONSIVE WEB

OVERVIEW

To The Moon is a budgeting app and website targeting young adults, created for social good. To the Moon aims to drive positive change and deliver resources to help with financial literacy.

MY ROLE

Responsible for research, conceptualization, design, and user testing.

TIMELINE

2 weeks

The Problem Space

Many young adults lack the tools and knowledge to learn how to effectively manage their money.

The Solution

Design an app and responsive website that allows young adults to learn and manage their finances on-the-go.

Understanding the User

USER RESEARCH

During the user research phase, I conducted in-depth interviews with five young adults, within the age range of 18-25 years old, from diverse backgrounds to gain a deeper understanding of their needs and motivations. Based on the research findings, I identified young adults with limited financial literacy as the primary user group for the app.

Furthermore, some users reported challenges with financial terminology and concepts that were often targeted towards adults with more financial experience. This presented a significant barrier for them to engage with and fully understand the app. Additionally, the interface design was often unappealing and not engaging, which further contributed to a lack of user interest and engagement.

KEY PAIN POINTS

Lack of Resources

Young adults lack resources not provided by their family and or academic institutions to help with their financial literacy.

Complex Language

Financial institutions and platforms often utilize complex language and technical terms that may prove difficult for young adults to understand.

Engagement

Keeping young people engaged and interested in using the app can be a challenge, so the app needs to have a user-friendly and appealing interface.

PERSONAS

Based on the data collected from the initial user interviews, I created two personas to help represent the needs and motivations of larger user groups.

COMPETITIVE AUDIT

An audit of a few competitor’s products provided direction on gaps and opportunities to address with the To The Moon app and website. The competitive audit revealed a deficiency of resources for users to acquire financial literacy, and lack of features including tools and analytics. For this competitive audit, I chose to assess Inuit Mint and Bankaroo for the following reasons:

Popularity

Inuit Mint and Bankaroo are significant competitors in the budgeting app market due to their large user bases. Mint has over 20 million registered users as a well-known finance app, while Bankaroo has over 1 million users as a popular budgeting app for children and families.

Features

Both apps offer relevant features for budgeting and personal finance. Mint enables users to track spending across different accounts, set budget goals, and receive alerts when they exceed budget. Bankaroo, on the other hand, provides features like allowance tracking and savings goals for kids and families.

Different Target Audiences

Inuit Mint targets adults, while Bankaroo targets kids and families, leading to differences in user interfaces, features, and target audience. This gave me better insights into unique user needs and preferences for a budgeting app design.

IDEATION

Using the Crazy 8’s ideation activity, I came up with a few ideas I had for key features and elements I wanted to include in the application. My focus was on being able to add transactions quickly, view monthly budgets and features for trends and analysis.

Crazy 8 activity that forms 8 different ideas or features to include in the mobile app.

SITEMAP

Starting the Design

DIGITAL WIREFRAMES

After ideating and drafting paper wireframes, I created the initial designs for the To The Moon app. These designs focused on delivering personalized budgeting tools and widgets for users to manage their money.

Low-fidelity prototype of To The Moon app, displaying the homepage.

LOW-FIDELITY PROTOTYPES

Users begin on the sign-in page leading to the homepage where users can have a quick overview of their monthly budget balance, monthly budgets and goals. Users can quick add transactions in the bottom right corner using the “add” icon.

Low-fidelity of To The Moon app demonstrating user flow

Redefining the Design

USABILITY STUDY

In the first lo-fi mobile app prototype, the home page featured the user’s savings, income and expenses for the month. Based on the insights from the usability studies, the monthly budget widget has been introduced so users are able to quickly retrieve key information they need. This was done in response to insights from my research, which revealed that users wanted an easy way to monitor their monthly budget at a quick glance.

BEFORE USABILITY STUDY

Low fidelity home screen of To The Moon App

AFTER USABILITY STUDY

High fidelity home screen of To The Moon App

Results from the usability study also indicated that users were interested in seeing their transactions divided into categories, to give them a better understanding of what they spend their money on, which can empower them to make informed financial decisions.

BEFORE USABILITY STUDY

Low fidelity Stats page of To The Moon App

AFTER USABILITY STUDY

High fidelity Stats page of To The Moon App

HIGH-FIDELITY PROTOTYPE

The final high-fidelity prototype offers improved user flows that better meet users' needs for tracking their finances on the homepage, particularly in the area of budgeting. The design features a cleaner, more intuitive interface that simplifies the process of managing finances and helps users stay on top of their budgets.

View Prototype

ACCESSIBILITY CONSIDERATIONS

Personalized Recommendations

Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.

Icons

Icons were included in several screens in the app to ease navigation for users.

Text Legibility

Ensure that the text on the app is easily readable, even for users with visual impairments.

Responsive Design

Mobile website

Tablet website

Desktop website

High fidelity prototype on mobile website

High fidelity prototype on tablet website

Going Forward

IMPACT
The app and responsive website users feel like the To The Moon app included features and resources to help meet their needs.
‍
One quote from a user:
“The app made it easy to view my monthly budgets and goals in a quick glance. This is the perfect tool to keep track of personal finances and learn all in one place!”

REFLECTION
As I was primarily experienced in designing for mobile, I faced some initial struggles when creating a cohesive design for the desktop website. One particular challenge was striking a balance between the placement and sizing of various elements on the page. However, by stepping back and focusing on the overall layout and user experience, I was able to create a more visually pleasing design that met the needs of desktop users.

NEXT STEPS

Additional Research

Conduct research on how successful the app is in providing the proper resources and tools for users to learn finances and budgeting

Educational Resources

Add additional educational resources for users to learn more about budgeting and investing. This could include discussion posts, quizzes and etc.