Back to Portfolio

MOBILE APP DESIGN

FinTech Mobile Banking App

Client: SecureBank Financial

Duration: 2 months

Role: Lead UX/UI Designer

Team: UX Designer, Product Manager, Frontend Engineer, Financial Advisor

Tools: Lovable, Figma Suite, Maze, Optimal Workshop

Mockup 1

Project Overview

SecureBank needed to modernize their mobile banking experience to compete with digital-first banks.

The goal was to create an intuitive, secure, and feature-rich mobile app that would increase user engagement and reduce customer service calls.

Free iPhone Hand Mockup Mockuuups Studio
Free Rock iPhone 15 Pro Mockup Mockuuups Studio scaled

🎯 Problem Statement

SecureBank’s users experienced difficulty navigating the app, completing common banking tasks, and understanding their financial information.

As a result, engagement was low and customer support calls were high.

Design Process

Discover

Define

Ideate

Design

Test

Phase One(1): Discover

Empathy Maps

To build a truly “intuitive and secure” app, we have to look past the screen and into the user’s headspace.

These empathy maps break down the internal and external drivers for Margaret, David, and Chloe, helping us understand why the 2.3-star version failed them and how the redesign wins them back.

SecureBank Empathy Map - Margaret_ The Skeptical Traditionalis
SecureBank Empathy Map - David_ The High-Velocity Professional
Chloe The Digital Native

User Personas

To help SecureBank turn that 2.3-star rating around, I needed to address the three biggest pain points identified in the challenge: navigation complexity, onboarding friction, and feature gaps.

 

Below are three distinct user personas designed to represent the diverse needs of our customer base.

The Skeptical Traditionalist Reliability Seeker
The High Velocity Professional Efficiency Seeker
Gig Worker Growth Seeker
How these personas solve the Challenge

Competitor Research

To understand industry expectations and identify opportunities, I analyzed leading digital-first banking apps.

 

These platforms were chosen because they represent modern mobile-first banking experiences with strong usability and engagement.

Revolut (UK/Global)

Nubank (Brazil/LatAm)

Monzo (UK)

Chime (USA)

SecureBank Global Fintech Competitor Analysis (2026)
Feature Comparison

Phase Two(2): Define

Information Architecture (IA)

This IA prioritizes the most common tasks—checking balances, moving money, and security—to ensure users like Margaret and David can find what they need in under two taps.

SecureBank_ Information Architecture

Phase Three(3): Ideate

How Might We Questions

Simplifying Core Banking Tasks

Improving Navigation & Discoverability

Enhancing Security Without Sacrificing Usability

Wireframes

Developed low-fidelity wireframes focusing on simplified navigation and task flows.

SecureBank Biometric Authentication Screen
SecureBank Biometric PIN code entry system
SecureBank Biometric Home Screen
SecureBank Biometric Analytics Screen
SecureBank Biometric Send Money Screen
SecureBank Biometric Enter Amount Screen
SecureBank Biometric Confirm Transfer
SecureBank Transfer Successful Screen
SecureBank Upcoming Bills Screen
SecureBank Recurring Bills Screen
SecureBank Paid Bills Screen
SecureBank Add New Bill Screen
SecureBank Profile Screen

User Flow

The redesign focused on optimizing the most common banking journeys.

Each flow was redesigned to reduce steps and improve clarity

 

Core User Flows Includes:

  • Login with biometric authentication
  • Transfer money
  • Pay bills
  • View account activity
  • Manage cards and security settings
SecureBank_ UserFlow

Phase Four(4): Design

High Fidelity Design

These are the foundational wireframes that demonstrate the product structure.

  • Screen 1 & 2 Login Screen
  • Screen 3 Dashboard and Transaction Details
  • Screen 4 Accounts Overview
  • Screen 5 – 8 Transfer Money Flow
  • Screen 9 – 12 Bill Payment
  • Screen 13 Profile & Security
SecureBank Mobile App Biometric Authentication Screen
SecureBank PIN code entry system
Home Screen for SecureBank
SecureBank Analytics Screen
SecureBank Send Money Screen
SecureBank Enter Amount Screen
SecureBank Confirm Transfer
SecureBank Transfer Successful
SecureBank Upcoming Bill Payment Screen
SecureBank Recurring Payment Screen
SecureBank Paid Screen
SecureBank Add New Bill Screen
SecureBank User Profile Screen

Design Solution

I led a complete redesign focusing on simplifying core banking tasks, implementing biometric authentication, and creating a personalized dashboard.

 

We conducted extensive user research with 15 customers and ran multiple usability testing sessions to validate our design decisions.

Prototype

Created interactive prototypes for key user journeys including transfers, bill payments, and account management.

Mockup 9

Phase Five(5): Test

Usability Testing

To validate the redesigned experience, usability testing was conducted using interactive prototypes of the SecureBank mobile app.

 

8 participants a mix of frequent mobile banking users and moderate users were asked to complete common banking tasks including checking balances, transferring money, and paying bills.

Tasks Tested

Key Findings

1. Users Struggled to Find Transfer Features

In early prototypes, some participants had difficulty locating the transfer option because it was nested inside the Accounts section.

User Feedback

“I expected the transfer option to be on the home screen.”

Improvement

Transfer functionality was added to the Dashboard Quick Actions section, making it accessible within one tap.

Result

Users completed transfers 40% faster during follow-up testing.

2. Login Process Felt Slow

Participants reported frustration with entering passwords every time they opened the app.

User Feedback

“Typing my password every time makes me avoid opening the app.”

Improvement

Biometric authentication was implemented, allowing users to log in using fingerprint or facial recognition.

Result

Login time decreased significantly and users reported a more seamless experience.

3. Transaction Information Was Difficult to Understand

Participants initially struggled to interpret transaction details due to unclear labeling and limited merchant information.

User Feedback

“I’m not sure what this charge is from.”

Improvement

Transaction cards were redesigned to include:

  • Merchant name and icon

  • Transaction category

  • Date and time

  • Clear transaction amount

Result

Users were able to identify transactions more quickly and confidently.

4. Card Security Controls Were Hard to Locate

Participants had difficulty finding where to freeze or manage their debit card.

User Feedback

“I expected card controls to be easier to find in case of emergencies.”

Improvement

A dedicated Cards section was introduced in the main navigation, giving users direct access to card management tools.

Result

Users successfully located card controls in under 5 seconds during testing.

Usability Testing Outcome

After implementing design improvements, the updated prototype showed measurable usability gains.

Results

Key Takeaway

Usability testing revealed that simplicity and speed were the most important factors for mobile banking users.

 

By simplifying navigation, implementing biometric authentication, and prioritizing core financial tasks, the redesigned SecureBank app created a more intuitive and efficient banking experience.

Expected Results & Impact

2M+

Active Users

Monthly active users increaing by 180%

95%

Satisfaction

User satisfaction score (up from 42%)

35%

Efficiency

Reduction in task completion time

4.8/5

App Rating

App store rating improved from 2.3

-60%

Support Calls

Decrease in customer service inquiries

92%

Setup Completion

Account setup completion rate

Next Steps

Conclusion

By following a user-centered design approach, SecureBank Financial aims to address the challenges faced by consumers and provide a convenient, secure, and fast transactional experience.

Free iPhone 15 Pro mockup with credit card in hand Mockuuups Studio scaled

Interested in Working Together?

Let’s create something amazing for your users