How Citibank failed at mobile

Mobile apps have changed the way we live and work, providing quick access to information that affects our daily lives. We’ve become accustomed to having this information at our fingertips: maps showing us where to go, instant communication with friends and family, real-time updates for our favorite sports teams, and the list goes on.

One area that seems to lag behind in the mobile department is banking and finance. The mobile experiences from most major players in this arena are lackluster, hard to use, and downright frustrating. In fact, the only bright spots in an otherwise dim world of banking apps come from Simple and from financial management software like Mint and Check. These companies are definitely putting pressure on others to step up their mobile experiences, but until traditional banks begin to shed customers, it likely won’t be enough.

Citibank’s mobile app has languished for years as a steaming pile of fail. I wouldn’t be surprised if they had the absolute worst banking app in the world. It was a combination of web views, confusing or hidden menus, hard-to-hit touch points, and some really shaky hardware tie-in to the camera for check deposits.

Basically, it looked like the 1990s took over your phone.

For years, I’d been begging Citi via Twitter, email, and the Google Play Store for a new app. So, when I finally received this email from Citi last week, I was sure that day had finally arrived…

citi-mobile-email

I was wrong.

Instead of a brilliantly executed native app for iOS and Android, it appears that we’ve received a warmover of their existing codebase. Sure, it’s got a new look and feel, makes navigation a lot less confusing, and marks a feeble attempt to replicate some of the mobile OS’s specific styles, but if you’re going to spend the money to drastically update an app, doesn’t it make sense to–you know–make it worth using?!

I’m an Android user, so my experience is based largely on using the app within that ecosystem. iOS users may have a different experience, and if so, I welcome your thoughts and feelings in the comments.

Built for last decade’s Android

overflow-menu-button

This might be a nit, but the first thing I noticed upon logging in is that the “overflow menu” button shows up in the lower right-hand corner of devices with on-screen navigation. This is a vestige of building your app with a target of Android 2.3 or below. Modern apps generally target Android 4.0 or higher, but also include compatibility for older Android devices. Citibank’s mobile team must not understand this.

Just another web-app container

OK, so perhaps this is only partially true, but there’s no mistaking that the new Citi app is not native–it’s a web app. Worse, it’s not even a well executed mobile web app.

Moving from one page in the app to another usually results in a “loading” spinner popping up for a few seconds, followed by a (sometimes jerky) animation showing the next screen sliding over-top the current one. The loading spinner isn’t obvious. If you’re not watching closely, you might not even realize it’s there, instead thinking that the app hung while loading the next page.

Even so, the app still manages to pull in a few native controls. First up is the ATM/Branch locator, which actually leverages the latest Google Maps v2 API, providing a smooth zoom and navigation interface for finding nearby Citi locations. Double-tap-and-drag is fully supported here for one-hand navigation. Nice.

The other semi-native control is the camera, which is used by the mobile check deposit feature. Unfortunately, that’s where the “good” stops, because the camera is beleaguered by terrible user interface choices, which brings us to the next topic…

Horrible, terrible, no good, very bad user interface (and experience)

As I previously alluded to, the Citi app doesn’t have much going for it, and this is especially true when it comes to the specifics of their user interface. While the outdated Android build target and the lack of a truly native app experience may be somewhat forgivable, the user interface aspects and total lack of execution are absolutely not.

To Citibank’s credit, they’ve provided a decent user experience or UX across their products and services in the past. They’ve always had excellent customer service, nice integration with Mint and Quicken, a variety of great banking products, and so on. But, while the overall experience has been good, the mobile app is an increasing part of the UX and severely degrades the overall quality of banking with Citi. More so as many users begin adopting it.

So, in terms of UI, where does Citi’s mobile app stumble fall flat on its face? Everywhere.

Confusing or non-existent use of the “back” button

Android’s “back” button is certainly not without controversy. Many words have been penned lamenting the lack of consistency with this Android feature, but Citi’s app brings use of the button to new lows.

For example, upon logging into the app, one might choose to immediately make a transaction, such as a transfer or deposit. This launches a new page within the app, but if you hit “back,” nothing happens. Nothing. However, if you select an option (e.g. deposit a check) and then hit “back,” the app takes you back to the transaction menu. Press “back” once more and you end up on the account selection screen. I’ll chalk this up to a bug rather than a total lack of design foresight. Even so, Citi clearly expects you to use the large “X” button in the upper right-hand corner to close the menu. Nowhere in Android’s design principles is that paradigm used.

Sometimes, hitting “back” returns you to the application’s slideout navigation drawer. Other times, it sends you through an endless cycle between an ATM or Branch detail page and the ATM/Branch maps page. Again, maybe this is a bug, but it’s likely that way because it’s not a native app.

Missing standard UI controls

Since the arrival of Android 4.0, Google has introduced new UI paradigms designed to better the user interfaces provided by apps. Two of these features are the Action Bar and the Navigation Drawer. Similar concepts exist in the iOS world. The Android SDK provides default implementations of both of these UI patterns that can be customized, tweaked, and skinned to meet an app’s requirements and better match a brand’s color scheme, logo, etc. Citi ignored all of this.

action-barInstead, the Citi mobile app leverages its own “header bar” that provides access to the navigation drawer and quick access to launch the “Transact” menu. I believe both of these choices are designed to replicate some traditional iOS paradigms. That’s not necessarily a problem in and of itself, but it is poorly executed and annoying. An Android app should almost always follow Android design language.

nav-drawerLikewise, the navigation drawer not only looks non-standard, but it does not open when the user swipes in from the left side of the display. It also does not use the standard Android “hamburger” iconography to indicate a navigation drawer is present. Finally, it “pushes” the content area out to the right instead of sliding over top of it, as is the Android standard. This last point may be a nit, but it continues to illustrate Citi’s complete disregard for design.

Confusing text inputs

This was a new one for me, not to mention a total shock.

As expected, users have the opportunity to perform transactions like: payments, transfers, and check deposits. Each of these options provides an input field intended to accept the dollar amount of the transaction.

text-inputInstead of using a standard text field with some type of input mask and validation, the app locks the rest of the UI once the user focuses on the input. After entering a number, you must remember to press the “done” button in the upper right-hand corner of the screen to close the input and continue through the remainder of the transaction.

Not only is this unlike any UI input I’ve ever seen, it’s downright confusing. I wasn’t sure if the “done” button had been there from the beginning or if it popped up once I selected the amount input. I also wondered if pressing it would attempt to submit my transaction. Perhaps this is modeled after some iOS convention, but even so, I don’t think Apple’s intended implementation would be anywhere near this confusing.

The only redeeming quality of this entire situation is that the text input does trigger the numeric-only keypad, which greatly enhances entry of numbers. Some apps overlook even that.

Unnecessary camera customizations

One thing I like about PayPal’s mobile check deposit feature is that they use your operating system’s native camera. Assuming you know how to use that, you know how to take a picture of a check. Not so with Citi’s app.

camera-ui

Instead, they re-skin the entire camera UI, requiring users to press a single button to take a photo. Additionally, there are no manual focus controls, and the camera viewfinder is partially overlayed with a message instructing you what to do. Furthermore, the controls that do exist are stretched and distorted, as if the images weren’t properly designed for larger or higher resolution screens. There are far, far better ways of setting this up.

Again–why can’t we just go with the standard?

Miscellaneous items

There are a few other items that just rub me the wrong way.

settingsThe application’s extremely sparse Settings page attempts some usage of Android-style controls, but they mostly come across distorted and unresponsive.

dialog-uiDialog and alert messages don’t show up too often throughout the app, but when they do, they are again some custom concoction of Citi’s (or the mobile framework they employed).

Other UI elements are a bit strange. For instance, the app attempts to provide a search utility, but invoking it requires tapping a tiny little icon right above Android’s “home” icon. Don’t miss, or you’ll exit the app. Buttons across the app are also non-standard (what did you expect?). They provide no indication of whether or not you successfully tapped one.

buttons-and-search

Wrap up

From what I’ve seen, the iOS app doesn’t fare much better than the Android version, which is surprising given that the app clearly attempts to follow the iOS design principles far more than it does Android’s. Ironically, Citi’s app has even lower ratings in Apple’s App Store than it does in Google Play. With today’s release, it’s clear that Citi doesn’t value the new design paradigms introduced with iOS 7 either. The app’s characteristics line up closer with iOS 6 and below, but I think even that is a bit of a stretch.

Ultimately, Citi seems to be doing whatever they want in the design department, essentially tossing any sort of style guideline to the curb.

I think the majority of Citi’s problems could be solved by writing truly native apps for both iOS and Android. It’s likely that the apps could share a large amount of code across the backend and simply implement native UIs for both using the individual SDKs. Taking this approach might actually turn out to be simpler than the current tack.

Often, these institutions are not willing to spend any extra dollars to create truly immersive and amazing experiences for their customers. That’s an regrettable scenario, since there are likely thousands of potential customers who would switch to the bank having the best mobile app. Just ask Simple.

Unfortunately, my guess is that we’re stuck with this app for awhile. Unless Citibank receives vehemently negative feedback in large numbers, it’s unlikely that they’ll right this wrong any time soon. But, until they do, I won’t be using it unless I absolutely must.

We entrust these companies with a lot of money. Is it too much to ask for them to show a little effort in return?

Source: Google Play

Posted in Mobile Tagged with: , , , , ,
  • Ivan C

    Agreed – horrible app! I use this on my iPod Touch for the sole purpose of mobile check deposit. Today I was prompted to upgrade to the newest version. I did so, and can no longer take photos of my checks. I just get a camera icon for both the front and back check image spots. I touched everywhere I could think of, to no avail. Have not figured out how to downgrade to the previous version.

  • SRL

    Not only is Citibank’s redesigned Android application everything you say it is, but their mobile web site, which is normally more usable than their app appears now to be broken. Trying to access transfer and payment pages results in a returned error. Informing Citi customer service of this is torture and a effort better avoided. Years ago, when I worked for the Chase Manhattan Bank, Citi’s online banking was the envy of many of my colleagues. Now, whether it’s online banking, Internet browser-based mobile banking or using one of Citi’s stunted apps for mobile banking (my experience is mostly with Android), using their technology is painful and best avoided. Give their mobile web site a try and go to the “set up a one time transfer” page and see what you get.

  • randompsychology

    The unfortunate reality is that most financial institutions have terrible apps. I’ve tried Wells Fargo, Chase, Citi, and PNC just to name a few. Either they lack basic features or they’re poorly designed.

    The only bank with a decent app seems to be Simple (https://www.simple.com/). But there are drawbacks on the financial side of things there, so there’s no perfect solution. 🙁

  • Today is February 11, 2017 and over the past year I have succeeded exactly once at executing a mobile check deposit. Every other time it will not accept the photos.