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.

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:

Older users with experience in investing are less likely to use cryptocurrency in comparison to younger users
A lack of financial knowledge is a significant demotivating factor for users wanting to invest, even if they have the resources to start investing
Users have a hard time managing all of their investments split between different financial tools
Users want to budget and track their expenses but find it cumbersome and time-consuming
Users want to put their money into different "money jars" for various purposes

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.

Moneylingo