Design App for financial management

UX Research, User testing, UI Design

UX Techniques Used

Research, user interviews, user flow, wireframing, prototyping, UI design.

Tools I Used

XD

My Role

.Product Design

Problem Statement

We make use of money in our day to day activities. We spend money on what we want and what we need. Subscriptions and recurring expenses are ever increasing due to our wants and needs. They begin to accumulate and get difficult to manage.
Be plus was designed to solve the problems around tracking of finances, access to financial records, spending analysis, budgeting and financial education.

To understand the users, I created a survey and distributed it to potential users.

From the survey I was able to identify a list of problems faced by users while managing their finances. After identifying these problems, I sorted them out based on how much value they offer to the users and business when solved as well as the possible cost of finding a solution to them. Here is a list of the problems after prioritization:

  • Inability to keep track of spending.
  • Lack of access to previous financial records.
  • Excessive spending on a particular expense.
  • Lack of proper financial knowledge.
  • Overly manual or stressful means of budgeting.

 

User Persona

Based on the user research. I referred to them throughout the entire product development process.

User Flow

Competitor Analysis

To further understand the user, I had to look at a few competitors in the space of finance management to understand their approach to solving this problem, how effective these solutions were as well as to understand the possible users of the app.

In the existing applications in the market – there is tracking of expenses and income, but there are no ways to streamline expenses, No savings tips, no budget setting.
Everything that helps to become more efficient and stay a plus.
In B Plus we not only monitor but make real changes in economic conduct.
You are your financial coach!

Wireframe

The process of creating the UI assets was followed by sketches of the app interface.

Design

App interface

After defining the app structure, I began to create the screens for each of the user actions.

Welcome and onboarding screens

These screens were created to introduce the user to the app and its purpose. I ensured that they had less screens and few intro animations in other for the user to get started on the app quickly. The onboarding screens also have a skip button to achieve the same purpose.

App home

The app home give you a quick view of your total assets and liabilities as well as your total expenses and income for the month and top expenses for a particular period(the time duration can be selected from a dropdown). The app home shows a status of your spending. It also makes provision for suggestions on how users can better manage their finances.

The home also has an hamburger icon for a sidebar that contains secondary menus like the account & cards and app settings.

Reports

The reports screen give detailed analysis of cash inflow and outflow as well as the spending pattern. It makes use of easily digestible charts (bar and pie charts only). In addition to this, it allows users to have access to their total spending over a period of time as well as amount spent on a particular expense over time.

Education

The education feature provides users with quick finance management knowledge to help improve their finances.

Other screens

Other screens include the accounts and cards, sign-in screen and transaction filter screen.

Style Guide

Design