Design and Testing of FinTech App (B2C)

There are various financial apps in the market, majority of them being bank apps. However, there are very few successful apps that help users manage their finances within one space. Most people, of various age groups, still use excel sheets to manage their finances. Although the excel sheets provide the users to be able to customize and organize information however they prefer, it gets tedious especially as finances, responsibilities, and financial accounts grow.

Solution:

Design an app that consolidates all banks and other financial accounts in one place. Allows users to see all their balances, due dates, and statements in one place. A place where users can store, manage, and share their personal documents.

High-Level Design Goals and Objectives:

Quick how to use app steps - onboarding

Log in/ Create Account

A page with multiple different bank accounts and their balance, due date, and statements

Link other accounts

Calendar showing due dates and reminders

Specs: Project Scope End-to-End Mobile App Design, Branding Tools Figma, Adobe Illustrator, Whimsical, Miro, Maze, Google Survey Role UX + UI Designer (User and Market Research, Visual Design, Interaction Design, User Testing) Client DesignLab Case Study Team Solo with feedback from DesignLab's mentor and peers. Project Duration Spring 2021

I wrote a Research Plan to guide me as I focused on learning about the market, potential competitors, common fintech practices, and the potential target audience. My goals and the methodologies used for the research were:

Understand the target audience and its needs.

Understand customers' needs regarding budgeting.

Learn existing market for a self-finance app and its competitors.

Identify key patterns and features that are preferred by the target audience.

Identify customer pain points while managing their finances.

As the purpose of this case study was to design an end-to-end app, I conducted a survey - through google forms - to find out what type of product was needed by the users.

Users who are already managing their finances and have experience in using some app or another.

Users who are looking into new ways to manage their finances.

The results of the survey were very insightful and crucial to understand how and what the participants currently used, what were their pain points and what were they looking for as a solution to their frustrations. I organized the key insights by how common the answers were between the participants.

Since the survey results were very thorough, I created a map to visually highlight what features to focus on in order of priority. This helped me define the product requirements and goals. I was also able to define what were the 'must have' features versus the 'nice to have' features.

The three features that required focus as high priority were: Budget Plans, Integration of Multiple Accounts, and Monthly Comparisons. The rest of the stickies on the map below, although were not high priority, are potential functions within or between each of the main features. For example, all users want customization options. Thus, this is a feature that needs to exist within each function of the app. Another high priority function that users are looking for is the ability to see monthly comparisons. This comparison, however, can be separated out into three categories: Spending, Income, and Savings. This is how this prioritization map helped me start to define the new app.

I combined market requirements along with user needs to create a user persona. This was another way to filter through the survey results so that I always had my users in mind while designing the app.

As a brainstorming exercise, I created a mind map on whimsical to lay out potential features to be added in the app. The right side of this map mostly contains the features. Whereas, the left side contains more generic terms or user wishes that could occur within the features listed on the right.

With a clearer understanding of the product feature requirements, I created an app map to have a clear IA of the product. While researching, I had also explored existing self-financial management apps to observe common and easy to use navigational patterns. Keeping the organizational patterns in mind, I created the app map to achieve the laid out objectives of consolidating all finance related accounts of a user in one place.

In the app map above, I divided the app into 5 main pages: Goals, Home, Calendar, and Budget. Therefore, in the user flow below, I elaborated on how a user could accomplish tasks with each of these main pages. As I worked on defining a user's flow, I was able to envision the layout and hierarchy of the process. This helped me prioritize the list of screens to start designing.

Having defined key product and screen requirements, I started sketching some wireframe ideas. Especially when it comes to designing from scratch, it always helped me to do hand sketches to get the ideas flowing.

Once sketching got my creative juices flowing, I took my sketches into Figma and started creating mid-fi wireframes. I created several design options during sketching and mid-fidelity. I was combing different successful navigational patterns that I had seen during research. I showed my design options during group sessions to receive feedback on my work. The feedback helped me select the plus points of the different design options and create one main design mid-fi wireframes.

In the idea below, I tried to combine the key components for the app into one main homepage.

The idea below is the first iteration of designing the page for a single account and showing the transactions.

Upon group discussions, I realized that combining everything into one homepage is too much information. It would lead to confusion and a disorganized system. During the survey, some participants had stated avoiding apps with overwhelming features and information. Thus, in the next iteration, I focused on simplifying the information and split it into two pages: Spending and My Accounts.

The screens below show the evolution of ideate # 1, where the accounts are in a carousel view, allowing users to simply swipe to view another account individually. I also implemented two different ways of showing transactions based on the page and the information needed.

As Finect was a completely new product, it also needed branding from scratch. Before designing a logo, I needed to name the app. I focused on key words that defined this app's attributes. Two keywords that stuck out were Finance and Connect. I combined these two words together to come up with the name Finect.

I again started sketching by hand and explored many different design options for the logo. At first, I started by thinking about keywords of the product such as money, savings, professional, and finance. Therefore, I tried to design the logo using symbols such as the dollar sign, coin, mathematical symbols, and a money bag. However, upon discussion with other designers and exploring common practices for logo designs for finance management companies in the current market, I realized that a minimal abstract design is a better direction for a fintech app instead of a symbolism filled detailed design. Thus, as I switched from hand sketches to vector designing, I focused on creating simple yet abstract logo designs.

Wanting to explore a different color scheme, I used a monochromatic color pallete for Finect. I focused on the combination of blue and green to come up with the main color. I chose blue as it symbolizes the attributes professional and trustworthy. I also chose green because green symbolizes money.

Once the style tile was set, I implemented it to the rest of the wireframes. As I worked on creating the high-fi wireframes, they kept evolving to successfully incorporate the visual hierarchy and key product information. Here are some of the key screens that I designed for this app:

The main page of the app gives the user a quick snapshot of their available funds. On this page, the features available to the user are:

On the Spending page, a user can see a quick overview of their total spending during a set period of time. Other features available of this page:

The Goals page allows users to set any type of goals that they would like to save for. This feature's aim is to help motivate users to save more money but allow them to set their own incentives. On this page, the users can:

To add a fun aspect to this feature, the users can select different icons or upload new ones for their goals.

When it comes to money, dates are very important. Therefore, I added a Calendar page to the app to helps users track bills, goal dates, and set other categories as they wish. In this page, the users can:

Once I completed designing the hi-fi wireframes. I put together a usability test plan. I planned out my testing goals and tasks for the participants so that I could prepare a full responsive prototype accordingly.

Evaluate if the users are able to successfully navigate through the essential functions of the app and complete the stated tasks.

Subject of the test:

Testing high-level prototype for mobile app.

Follow onboarding steps and Create an Account with Finect

Add a Spending Category for Subscriptions

Create a New Goal

Add a Payment Due Date

For this case study, I decided to create the usability test on Maze as I wanted to get visual results to analyze the design's success and fail points.

Participants and Recruiting:

Users who already use or have some form of budgeting/organizing systems

Users who don't have any finance organizations but might be looking into budgeting apps

During the test, no user dropped out or gave up on any of the screens. Upon a thorough analysis, these heatmaps show how the users differ in their preferences and behaviors. While some users did have direct successes for this screen, others tried to find different ways to achieve the same result. Since the tasks for these screens both involved the "Add" CTA, it is clear from these results that the CTA needs to either be highlighted more or be relocated.

As seen in the heat maps on the left, users were successfully able to navigate through several screens to achieve the tasks laid out in the Maze test. This heat map shows that all users clicked on the same area in these screens to move to the next step.

Designing an End-to-End App from scratch was more challenging than I initially expected. Creating a new product requires each phase to be more thorough in order to understand the needs of the product itself. A challenge during this project was to address the many user demands for a product like this. As I defined the product and the scope for this case study, it felt like an open ended project. I learned how to set constraints so as not to tackle every single wish that the users stated in the survey or in the market. It is very easy to fall in the trap of wanting to do it all. However, as designers, we have to be conscious of our time limits and prioritize project goals with set objectives. I am excited that I learned how to brainstorm for and design a new app. Before this project, I never truly realized how different a website and an app are. Though both have their own complexities, there is a bigger pressure to close the loop of a user's path while designing an app.