First National Bank App – Mortgagor Flow
Please be aware that the preceding portfolio piece was a fictitious project as part of Kent State’s UXD Program – Interaction in Practice (Spring 2023).
Company Overview
First National Bank (FNB) offers various financial services to help individuals and businesses achieve their financial objectives. Among the many services FNB offers, they provide mortgage lending services. Users can access their loan balances through our online platform or mobile app.
My Role
-
Research & Strategy
-
Flows & Wireframing
-
Design & Prototyping
Peers and stakeholders
-
Feedback
-
Quality assurance
Target Audience/User Persona
This app is designed for homeowners who have already obtained 15 or 30-year fixed mortgages through First National Bank (mortgagors.) These users have set up accounts with an FBN relationship manager and are currently making monthly transfer payments through the mail, in-person, or online methods to their statements.
As a user, making monthly payments on time, reducing the lending period, preventing liens on your property, maintaining a good credit score, and ultimately paying off your loans is essential.
The Problem
The mobile app offered by First National Bank has limited features and an outdated interface that can confuse users. There are issues with color contrast and accessibility as well. Its current functionality is restricted to viewing one’s mortgage balance, monthly payment amount, and accessing (PDF) statements. Unfortunately, the app does not allow users to make payments now.
In addition to the current capabilities, borrowers need to be able to:
- Be aware of payment increases or decreases in monthly payments.
- Have the ability to set up or reconfigure recurring payments.
- Make individual and extra payments (to help pay off loans quicker.)
- Connect to outside banking institutions from which to make payments.
Plan of Action
Research & Project Brief
Based on research and current app analysis, a project brief (PDF) was compiled to explain the needs and ideas of the app. 
Timeline
A project timeline that spanned seven weeks included a project brief, competitive analysis and strategy/feature planning, screen flows, wireframes, a high-fidelity prototype, and time for feedback and stakeholder adjustments.
Competitive Analysis
Huntington Bank
One personal banking application that has a clean and straightforward interface is Huntington Bank. Huntington’s app is modern and sleek but also easy to use. With Huntington, users can see accounts and statements and set up and send payments to and from external banking institutions.
Aside from a few limited functionalities, Huntington’s mobile banking app allows users to do most of the actions available on their personal banking website (on desktop.) An additional feature that is more clear with the Huntington app (that First National Bank offers) is the ability to sign in via face or fingerprint id.
Chase
Another application that allows users to make payments quickly and connect to external banks is Chase.
Additionally, Chase’s mobile banking and credit card app enables users to check their credit scores and utilize a mortgage payment calculator to see how much they can afford to pay.
Screen Flow, Wireframing & Prototyping
The project involved designing and refining nearly 100 screens, from screen flows (pdf) to mid-fidelity wireframes (pdf) to more detailed, high-fidelity designs and a prototype (Adobe XD).
Stakeholder/Peer Reviews and Testing
Four rounds of feedback and testing were conducted, providing valuable insights and aiding in improving work. Peers & stakeholders provided input throughout the wireframing, design, and planning phases and also partook in prototype testing to ensure realistic results and optimal functionality.
The Result
Although more robust, the prototype testing yielded results that indicate the application’s new design was easy to navigate and understand. Most test subjects easily understood the functionality and features and quickly pointed out flawed or buggy functionality that needed fixing or adjustment.
Completed prototype for viewing: https://xd.adobe.com/view/5d7e26f6-9db2-468b-b30b-0996058c37aa-082d/
