top of page
Finect
End-to-End App Design| Branding| UX/UI Design| Testing
PROJECT OVERVIEW
Problem:
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
Empathize
RESEARCH
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:
Research Goals:
-
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.
Methodologies:
-
Customer Survey
-
Market Research
Conducting Survey
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.
Participants
-
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.
Key Insights from Survey
High
Medium
Low
Define
DEFINE
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.
Prioritization Map
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.
Persona
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.
Mind Map
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.
App Map
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.
User Flows
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.
Design
DESIGN
Wireframe Sketches
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.
Sketch # 1
Sketch # 3
Sketch # 4
Mid-Fi Wireframes
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.
Ideate # 1
In the idea below, I tried to combine the key components for the app into one main homepage.
Ideate # 1
The idea below is the first iteration of designing the page for a single account and showing the transactions.
Ideate # 2
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.
Ideate # 2
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.
BRAND
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.
Logo Sketches
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.
Style Tile
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.
Final UI Design
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:
Connect All Accounts
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:
-
View funds by different criteria's such as total available, credit limit, savings, etc.
-
Add or Edit another account
-
View individual account
-
Sort by different account types
Compare + Control Spending
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:
-
Changing the period
-
Compare spending over different periods
-
Add or edit spending categories
Set Goals
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:
-
Add a new goal
-
Edit an existing goal details
-
Connect account(s) to the goal to help earmark the money
-
Add goal dates
To add a fun aspect to this feature, the users can select different icons or upload new ones for their goals.
Keep Track of Dates
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:
-
Edit calendar view
-
Add new dates and date categories
-
Edit existing dates
Prototype
PROTOTYPE
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.
Objective:
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.
Tasks:
-
Follow onboarding steps and Create an Account with Finect
-
Add a Bank Account
-
Add a Spending Category for Subscriptions
-
Create a New Goal
-
Add a Payment Due Date
Usability Goals:
-
Onboard - create an account
-
Add a bank account
-
Create a new goal
-
Finalize goal
-
Check Monthly Calendar
Please click on any screen below to experience the full prototype.
Test
TEST
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.
Methodology:
Testing via Maze
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
Indirect Successes
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.
Direct Successes
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.
Conclusion
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.
Next Steps:
1. Make changes based on the usability testing results
2. Conduct another usability testing via Zoom to get more accurate results along with a more in depth user feedback
3. Revise again based on the second round of usability testing
4. Create a complete UI Kit to pass on to the developers
View Other Projects
bottom of page