Citizen's Bank
Mobile Redesign.
For this case study, we’re looking at 3 parts of the Citizens Bank mobile app that I suspect can be improved. First, the navigation can be streamlined to improve usability, making the application easier to understand as a whole. Second, account management can become more intuitive, reducing load time while using some of the currently empty space within the UI. Third, reducing redundancies in sorting through transactions by date.
Current Design
Navigation
Slider navigation unnecessary. Many items can be chunked to reduce scanning effort. Four is optimal in this situation.
1) Accounts, Transfers, Pay Bills, Mobile Deposit, Zelle, Manage Debit Cards.
2) Messages/Alerts
3) Contact, Help, Locations
4) Settings, Log Off
Account Management
The primary goal of most Citizens Bank app users is to quickly check the current state of their funds. CB does have an optional Quick Balance feature that allows users to somewhat less securely either long-press on the app icon or enable a widget to view their balance(s).
For a user to check the same information, along with additional information regarding their account status, it should be as simple as it is to check the widget/icon long-press, with just the added security of the app verifying their identity.
Here, we will use the screen space potential to simply and intuitively provide users with more detailed information.
Transaction Sorting
In recent years screens have gotten bigger, but it could be argued that cellular connectivity hasn’t improved significantly. We can again take advantage of the ample screen real estate here to reduce multi-screen redundancies that use both valuable bandwidth and the attentional resources of the user.
Solution
Home / Accounts
The Citizen’s Bank ‘Home’ screen is effectively simply the Accounts overview.
The list of accounts has been replaced with Account Cards that indicate the account type, available balance, and recent information about the account, such as pending charges, recent deposits, and available credit for credit cards.
Below the accounts section are grouped payment options, Zelle and Bill Pay. These cards will expand with more information about the services, whereas in the original slider menu each option opened a completely new screen.
Navigation has been simplified to 4 options: An ‘i’ icon for banking info/help/locations (recognition of this icon as providing these user needs subject to testing,) the Citizen’s Bank icon for Accounts Home, a message bubbles icon for bank contact, and a user/gear icon for user profile and account settings. Notifications bell icon has been moved to the top right, indicating contrast between notifications and messages.
Account Card Expanded
Tapping on a particular Account Card expands the card to reveal transactions and options for account management.
Icons for Mobile Deposit and Calendar for filtering transactions, along with an option to download recent transaction history are in upper-right corner of the Account card.
Transactions are grouped more closely, however use of space and typography maintains scannability.
In the original menu, a “Manage Debit Cards” option brought the user to a separate page that gave them the option of deactivating their card. This features is integrated within the Account card at the bottom, and toggling it to deactivate a card will trigger a prompt asking users to confirm the action.
Calendar Expanded
Rather than using multiple screens for filtering transactions by date, the function is display-none within the account transactions expanded view. Tapping on the calendar icon reveals the calendar, providing users with the ability to create a time frame for transactions to view. In order to give users space for trial and error, curated time frames will populate within the transactions area automatically, however, the calendar will remain in place until the Filter button is tapped, at which point it will slide up giving users a more robust view of their chosen transaction history.
Problems with this solution:
Given the sheer amount of information being conveyed on a single screen, this may not be reasonable for smaller phones (dimensions used were that of an iPhone XS Max) or phones with lower resolutions. Viewport alternatives will need to be considered.