Banking app redesign

We began the project with a workshop to define goals and scope. The redesigned mobile banking app aims to address user frustrations with the current app, such as complex navigation and a cumbersome interface, by delivering a seamless and intuitive financial management tool.

The cross-functional team included a Product Manager to guide strategy, a Development Team to implement features, and myself as the UX/UI Designer, responsible for creating a user-friendly interface.

Simplify Navigation: Restructure the menu layout to ensure easy access to core banking functions such as account balances, transfers, and payments.

Accessibility Compliance: Adhere to WCAG 2.1 standards to make the app accessible to users with disabilities, incorporating features like screen readers and high-contrast modes.

Advanced Authentication: Implement two-factor authentication (2FA) and biometric login options like fingerprint and facial recognition for enhanced security.

Real-Time Fraud Detection: Integrate systems that detect suspicious activities instantly and alert users promptly.

Card Management Features: Allow users to freeze/unfreeze cards, reset PINs, and set spending limits directly within the app.

Optimized Load Times: Ensure the app loads quickly and responds efficiently, even during peak usage periods.

Scalability: Design the app architecture to handle increasing user traffic without compromising performance.

Network Optimization: Enhance app performance under low bandwidth or unstable network conditions.

Unified Account View: Provide a single dashboard where users can view all their accounts—savings, checking, loans, and credit cards.

Easy Account Switching: Enable effortless switching between accounts and the ability to link external accounts for comprehensive financial management.

Product Applications: Allow users to apply for new financial products, like loans or credit cards, directly through the app with pre-filled forms utilizing existing user data.

Investment Options: Include services for purchasing stocks, bonds, or mutual funds directly within the app.

Insurance Products: Offer personalized insurance recommendations based on user profiles and financial goals.

Third-Party Integrations: Seamlessly integrate with external apps like accounting software, PayPal, and Venmo to enhance usability.

Unified Access: Easily access and view all accounts in one place.

Quick Information Retrieval: Check account balances, transaction history, and statements with minimal navigation.

Seamless Transfers: Transfer funds between personal accounts or to external accounts effortlessly.

Fast and Secure Login: Experience quick login options like biometric authentication without compromising security.

Manage Security Settings: Easily change passwords, enable 2FA, and control privacy preferences.

Effortless Payments: Make payments, including bills and peer-to-peer transfers, without delays.

Recurring Payments: Set up and manage recurring payments to avoid missing due dates.

Transaction History Access: Easily access and search past transactions.

Real-Time Updates: Receive alerts for important updates like suspicious activity.

Customization: Tailor the type and frequency of notifications to personal preferences.

Instant Control: Freeze or unfreeze debit/credit cards instantly in case of loss or suspicious activity.

Card Settings Management: Request new cards, change PINs, and adjust spending limits easily.

Real-Time Transaction Details: View pending and settled card transactions in real-time.

Data Protection Assurance: Feel confident that transactions and personal data are secure with end-to-end encryption.

Fraud Notifications: Receive immediate alerts for unusual transactions with options to report or dispute them instantly.

Intuitive Navigation: Navigate the app effortlessly with a clean interface that reduces complexity.

Efficient Task Completion: Perform tasks with minimal steps, catering to users of all tech-savviness levels.

Accessibility Features: Access the app’s features regardless of disabilities, utilizing voice commands and text-to-speech options.

Consistent Speed: Experience fast loading times and seamless functionality, even during peak hours or low connectivity.

Streamlined Processes: Reduce time spent on routine tasks through optimized workflows.

Convenience and Accessibility: Banking apps offer 24/7 access to financial services, allowing users to manage accounts, transfer funds, and pay bills from anywhere. 

Cost Efficiency: Digital transactions through apps reduce the need for physical branches, lowering operational costs for banks and often resulting in reduced fees for customers.

Enhanced User Experience: Modern banking apps provide user-friendly interfaces with features like real-time notifications, personalized dashboards, and financial planning tools.

Security Concerns: Despite advancements, banking apps remain targets for cyberattacks, potentially compromising user data and financial information.

Limited Adoption Among Certain Demographics: Some user groups, particularly older adults, may be hesitant to adopt mobile banking due to unfamiliarity with technology or trust issues.

Dependence on Technology: Technical issues, such as app crashes or server downtime, can disrupt user access and erode trust in digital banking services.

 

Integration of Emerging Technologies: Incorporating AI, machine learning, and blockchain can enhance security, provide personalized services, and streamline operations.

Expansion into Underbanked Markets: Banking apps can reach underserved populations, offering financial services to those without access to traditional banking.

Partnerships and Ecosystem Development: Collaborations with fintech companies can lead to innovative services, such as integrated investment platforms or advanced budgeting tools.

Intense Competition: The rise of fintech startups and neobanks introduces new competitors, challenging traditional banks to innovate continuously. 

Regulatory Challenges: Evolving financial regulations require constant updates to app features and security protocols, potentially increasing compliance costs.

Technological Disruptions: Rapid technological changes can render existing app features obsolete, necessitating ongoing investment in development and upgrades.

In today’s fast-paced digital environment, managing personal and business finances should be seamless and efficient. However, the current banking app fails to meet user expectations due to its complex navigation, cumbersome interface, and outdated design. This has led to user frustration, a lack of trust in the platform, and inefficiencies in managing financial tasks on the go. To address these issues, a comprehensive redesign is essential to create a more intuitive, accessible, and user-centric solution that aligns with modern digital banking standards and user needs.

Age: 34

Occupation: Freelance Graphic Designer

Location: Urban area, tech-savvy city

Education: Bachelor’s Degree

Alex is a busy freelance graphic designer juggling multiple client projects and managing both personal and business finances. They rely on mobile banking apps to handle invoices, track expenses, and pay bills on time but often feel frustrated by clunky interfaces that disrupt their workflow. Time efficiency and financial security are Alex’s top priorities.

Struggles with overly complex navigation in the current app.

Frustrated by the inability to customize dashboards for business and personal accounts.

Concerned about security, especially when using mobile devices for large transactions.

Annoyed by the lack of real-time notifications for spending and account updates.

Wants to save time by streamlining financial tasks.

Seeks peace of mind through enhanced security and reliability.

Values a user-friendly, visually appealing interface to match their professional tools.

Frequently checks account balances and categorizes expenses.

Prefers mobile over desktop for quick banking but switches when tasks become too cumbersome.

Uses budgeting apps and integrates tools like QuickBooks for professional needs.

Context: At the end of the week, Alex reviews expenses for their freelance projects. They need to categorize transactions to ensure accurate records for tax purposes.

Scenario: Using the redesigned app, Alex accesses their business account and filters transactions from the past week. With intuitive categorization tools, Alex assigns expenses to “Office Supplies” and “Client Meetings.” The app’s suggestions, based on transaction history, speed up the process. Alex exports the categorized data to their accounting software in just a few clicks.

Outcome: Alex efficiently tracks and organizes expenses, saving time and maintaining accurate financial records for their business.

After reaching a consensus on the wireframe layouts, I advanced to creating low-fidelity designs suitable for testing with a small group of users. The primary objective during this phase was to evaluate how users interacted with the basic structure and navigation of the app, leveraging their existing mental models and the use of semiotics to interpret the interface.

In these low-fidelity designs, I included only tiles and placeholder text, supplemented with icons on certain pages. To assess the intuitiveness of the design and the effectiveness of visual cues, I presented the pages to users in a random order without any explicit labels or contextual information. I asked them to identify what each page represented based solely on the visual elements provided.

Upon login, users see a clear image of their debit or credit card with essential details like account number and sort code, enabling quick reference for tasks like setting up direct debits.

Pay & Transfer: Fast and efficient fund transfers.

My Card: Manage PINs, set spending limits, or report lost cards.

Help: Quick access to FAQs and customer support. These key functions are prominently accessible from the dashboard for convenience.

Users can view all accounts (checking, savings, loans, and credit cards) on one dashboard. External accounts can also be linked for a comprehensive financial view.

A minimalist design keeps the main page focused on essential functions, with less frequently used features housed in a top menu to reduce clutter.

A dedicated section provides notifications, documents, and easy access to customer support, including booking appointments or calling representatives for personalized help.

Instantly disable transactions for misplaced or suspicious activity.

Provides peace of mind with immediate control until the card is unfrozen.

Securely view PIN after biometric authentication.

Change PIN easily within the app for security or personal preference.

Instantly report and deactivate lost or stolen cards.

Guides users through replacement card requests, including delivery details.

Request replacements for damaged or expired cards.

Option to customize card design if available and track delivery status.

Quickly report unauthorized transactions to the fraud team.

Secure follow-up communication within the app ensures prompt resolution.

When a user selects an account from the main dashboard, they are presented with a detailed view tailored to that specific account. This screen highlights the top three most frequently used features associated with the account, ensuring quick access to essential functions.

In addition to these, The users have access to all functions related to the selected account. This includes the ability to download account statements directly from the app, providing convenience for record-keeping or financial planning purposes.

When examining individual transactions, users are provided with comprehensive information to help them understand and verify their account activity. Each transaction detail includes:

Merchant or Recipient Name: Displays the company or individual associated with the transaction. If the payment was made to or received from a company, the company’s name is shown. If it’s an individual, the username or contact name is displayed.

Account Used: Indicates which of the user’s accounts was involved in the transaction, useful for those managing multiple accounts.

Date and Time: Specifies when the transaction occurred, aiding in tracking and reconciliation.

Amount: Shows the total value of the transaction, including currency details if applicable.

When a user selects the “Pay & Transfer” option from the main dashboard, they are guided through a streamlined and intuitive process designed for efficiency and ease of use. The interface first prompts the user to select the account from which they wish to make the payment or transfer. This is particularly helpful for users with multiple accounts—such as checking, savings, or business accounts—as it ensures they have control over their funds’ source.

Existing Payees: If the user has previously saved payees, they are presented with a list of these contacts for quick selection. This feature enhances speed and convenience for routine transactions, such as paying bills or transferring money to family members.

 If the intended recipient is not already in the user’s payee list, the app provides an option to “Add a New Payee.” This process is straightforward and secure:

The user is prompted to enter the necessary information, such as the recipient’s name, account number, and sort code or routing number.

Verification: For security purposes, the app may verify the details to prevent errors or fraud, possibly sending a confirmation code to the user’s registered device.

Save for Future Use: The user has the option to save this new payee to their list for easier access in future transactions.

After selecting or adding a payee, the user is guided to specify the transfer details:

Amount: Enter the exact amount to be transferred or paid.

Schedule: Choose whether the payment is to be made immediately, scheduled for a future date, or set up as a recurring transaction.

Reference or Note: Add a memo or reference note for personal records or to provide information to the recipient.

Before finalizing the transaction, the app presents a summary screen where users can review all details:

Verification: Display the source account, recipient details, amount, and any fees that may apply.

Edit Options: If any information is incorrect, users can easily navigate back to make adjustments.

Confirmation: Once reviewed, the user confirms the transaction. For added security, the app may require biometric authentication or a PIN at this stage.

Fraud Detection: The system monitors transactions for unusual activity and may prompt additional verification if something seems amiss.

Encryption: All transaction data is encrypted to protect sensitive information during the transfer process.

By offering a user-friendly and secure payment and transfer interface, the app ensures that users can manage their finances confidently and efficiently. The design minimizes the steps required to complete a transaction while providing all necessary options and safeguards, aligning with our commitment to exceptional user experience and robust security.

To maintain a clean and user-friendly main interface, we’ve incorporated a hamburger menu represented by the familiar three horizontal lines icon located at the top corner of the app. When users tap on this menu, they are presented with a list of additional features and settings that the app offers.

Minimizing Clutter: By housing less frequently used functions within the hamburger menu, we prevent the main screen from becoming overloaded with too many options. This design choice helps to reduce visual clutter and cognitive load, allowing users to focus on the most important tasks without distraction.

Enhanced User Experience: Organizing features in this way avoids overwhelming users, especially those who may not be as tech-savvy. It creates a more intuitive navigation flow, where essential actions are readily accessible, and supplementary options are available when needed.

Accessibility of Additional Features: Despite not being immediately visible on the main screen, the features within the hamburger menu are still easily accessible with a simple tap. Users can explore and utilize these functions at their convenience, knowing they are just a few clicks away.

By strategically utilizing the hamburger menu, we strike a balance between providing comprehensive functionality and maintaining an uncluttered, user-friendly interface. This approach aligns with modern app design best practices, focusing on simplicity and ease of use while still offering a full suite of banking services to meet users’ diverse needs.

The final designs mark a significant transformation of the banking app, addressing the initial challenges of complex navigation and user disconnection. By centring the redesign on user needs and integrating feedback at every stage, we achieved an app that is not only functional but also engaging and empowering for users. 

By aligning the final designs with both business objectives and user expectations, we have set the stage for the app to become a central tool in our customers’ financial lives, reinforcing the bank’s commitment to innovation and customer satisfaction.