Moneylingo

Mobile finance app that helps young adults manage financial goals, invest, and improve their financial literacy
Duration
3 months
Team
Doris Amouzou, Aayahna Herbert, Akash Talyan, Rishi Thulasiraman
Role
UX Designer, User Researcher
Skills
User Personas, Qualitative Coding, Paper Prototyping, Wireframes, Heuristic Evaluation, Task-Based Testing

Overview

Our team worked with a global fintech and payments company as an industry partner who presented us with the statement "Innovate the future of online banking," wanting us to explore what’s missing from current digital banking offerings and how people might expect to interact with traditional currency and the new wave of digital currency (cryptocurrency) within one digital banking experience.

To start the design process, we wanted to identify people’s standard financial practices, behaviors, and heuristics while interacting with online banking services, how well current systems and apps support them, and use these insights to understand our users’ preferences and pain points to then design an online banking system that addresses their current needs and is a remedy to their current pain points from their online banking interactions.

The Goal

Provide Fiserv with insights on what unmet needs exist in the financial landscape for 18-25 year olds.

01  |  Discover

user research

We started our user research process by designing two separate surveys: a screening survey to scope out our targets users and get access to users willing to be interviewed, and a survey in collaboration with our industry partner to get more data and insight mainly on users outside our target user group since our initial background research showed that a wide variety of people use online banking. The surveys helped us determine our target user group's spending habits and views on banking, budgeting, and investing.

After wrapping up our surveys, we conducted semi-structured interviews with participants in and outside our target user group to talk one-on-one about their experience with online banking, finance, and investing. We wanted to understand how significant online banking and investment are for people in various stages of life - students, spouses, full-time employees - and financial literacy.

user characteristics

We analyzed our research data using qualitative coding to view all our interview data quantitatively to perform deeper analysis and discover patterns and connections amongst our participants. From our study, we determined our users' needs, pain points, and goals concerning online banking:

user personas

Based on our user characteristics and research data, we created three user personas to illustrate the primary needs of our users. User personas helped us visualize and categorize the different priorities and challenges our users deal with during various stages of their lives.

design requirements

Having a complete understanding of our users' needs and characteristics by this point, we were able to establish the requirements and design implications our design solution needed to include. From these user needs and design implications, we divided them into three design requirement categories:

01

Budget & Expense Management

The solution should allow users to define, manage, and keep track of their budget to ensure users stay within their budget, avoid significant out-of-budget expenses, and pay their bills on time.

02

Custom Savings Accounts

The solution should allow users to save money for specific life goals and put money aside for "rainy days."

03

Investment Management

The solution should allow users to move their money freely and seamlessly between their different accounts, keep track of all their investments in one place, and will enable them to learn more about investing.

02  |  Ideate

sketched concepts

Our group then brainstormed possible design solutions that would successfully meet the design requirements but wouldn't overwhelm users. After revisiting the design requirements, we decided to create three design ideas focused on each theme and made paper prototypes for each concept.

concept 1: piggy
Piggy is a mobile application that allows its user to create multiple savings accounts in the form of a piggy bank - a nostalgic money-saving method that involves collecting and storing one’s loose change and money in a pig-shaped jar until it’s full and can then be opened to spend on a specific item.
concept 2: budgetbaby
BudgetBaby is a smart budgeting mobile application that allows users to view their monthly spending on average and create an overall and categorical budget to help them become more mindful of their spending habits.
concept 3: moneylingo
Moneylingo is a mobile application that allows users to learn about investments in a simple, straightforward manner while having the opportunity to trade in real time as they learn.

user feedback

After the paper prototypes were completed, we conducted three user feedback sessions with participants in our target user group to determine if our concepts met our users' needs and which was well-received the most.

Piggy and Moneylingo were equally well-received the most during all feedback sessions. Users liked how they could personalize their banking experience through customizable savings accounts connected to specific goals and learn more about investments creatively and interactively. Because we felt these two concepts had similar concepts while meeting unique user needs, we decided to move forward with a design concept that was a combination of these two sketched concepts as we moved onto the next phase of our design process.

03  |  Create

main features

Before diving right into our wireframes, we decided on our main features for this fused-concept design based on our users' needs and design requirements.

1. Create saving goals
Manage and add new customizable savings goals, add/withdraw money, and choose different methods to save (piggy bank, high-yield savings, or thematic investing)
2. View total savings
A visual breakdown of their total savings from all their savings goals based on the different saving methods
3. Investment Lessons
Gamified lessons to learn more about different topics related to finance and investing

wireframes

Then, we created wireframes to show the flow logic and content of each feature in the app.

flow logic 1  |  create & manage saving goals
After linking their preferred bank accounts, users create their saving goal. They can add a cover image, description, and target date and money goal to make the goal. Afterward, they can begin adding money to their goal by choosing the method they want to save money. They can check their status and manage their goals by tapping the goal card to see their total savings, growth, and money breakdown.
flow logic 2  |  view total savings
The donut chart is a visual breakdown of the user's total savings categorized by the saving method they set for each goal. The colors in the donut chart correspond with each “card” color, so users can quickly identify the connection between the two displays. For the prototype design, when users tap on one of the cards, they will be taken to a screen that gives them a more detailed breakdown of the selected saving method, showing the amount allocated to each goal.
flow logic 3  |  investment lessons
If they would like to educate themselves about finance and investments, the users can start lessons and see their current progress and any new lessons that are added or might interest them. Lessons are added to different modules where users can review all the material available. Each card shows the module's name, the number of lessons available inside each one, and if the user has completed that module. Users can also search for any specific lesson at the top of the screen if they don’t want to learn by going to each module individually.

04  |  Test

user feedback & prototype

Once the wireframes for the main features were complete, we conducted two user feedback sessions with participants in our target user group to determine if the flow logics were easy to follow and straightforward while still satisfying their needs and discover any accessibility and usability issues that may have been overlooked or gone unnoticed by our team and previous feedback sessions. After testing our wireframe with users, we made a few design changes based on their feedback and created a high-fidelity prototype.

Goals  → Home Page

The home page lists all the savings goals users have created. Each savings goal is presented as a card with the cover image, title, a brief description of the goal, and the target amount. The goals are ordered from least to most time left to meet their goal.

Pockets Page

The pockets page is an overview of all the money the user has saved in the app. The donut chart shows the total savings divided into the different saving methods. The colors in the chart are chosen to be perceptually distinct. The thematic investment funds are broken down into the individual funds the user invested in.

Lessons Page

The lessons page is organized into modules containing a set of lessons. The user can resume progress from their last completed lesson at the top of the page without having to scroll through all the lessons.

evaluations & iteration

Once completed, our prototype was ready for another round of evaluations to assess the overall usability of our design and interface and ensure our app is functional, easy to use, valuable to our users, and easy to be familiarized with. We conducted a heuristic evaluation for our expert participants and a moderated, in-person task-based testing for participants in our target user group. Based on the feedback from those sessions, we iterated our design to create a new and improved design.