UX

Feature Friday: Editing Transactions in Online/Mobile Banking

Feature Friday: Editing Transactions in Online/Mobile Banking
By Jim Bruene Posted on
Categories: Personal Financial Management, Simple, UX

One basic feature missing from most online and mobile banking services is the ability to edit/annotate transactions. Some banks, BMO Harris for example, support transaction and/or category editing in their PFM modules. But it’s very rare to see it within basic digital banking.

One exception, is BBVA Compass’s Simple banking unit. Simple allows full editing of the transaction name, category, and goal. And users can add a memo and an attachment to individual transactions. Clicking on a transaction brings up the detail section along the right (see screenshot below). The feature is functional on the desktop, but it’s easier to use, and more robust, on a mobile phone where the built-in camera aids photo attachments. And the transaction is visually more appealing after editing on mobile (see After mobile screenshot).

Thoughts: While it’s a little harder to use than I’d like, it feels wrong to complain about UX issues at Simple, when the vast majority of FIs don’t allow any editing whatsoever. But my job is to whine, so I’ll make this suggestion. The best user experience is to edit directly within the transaction record rather than following commands over to the right. And on mobile, voice editing should be supported.

Bottom line: While Simple’s transaction editing may not quite live up to the digital banking pioneer’s name, it’s head and shoulders above the competition. And that’s no simple feat.

Transaction editing on the desktop

Step 1: Select transaction on left; if desired, change category (#1), or funding source (#2), then press “edit”

Step 2: Annotation options (1) Edit name, (2) Add memo, (3) Upload image, (4) Add location


Transaction editing on mobile

Before edits                                                             After edits

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Author: Jim Bruene is Founder & Senior Advisor to Finovate as well as
Principal of BUX Advisors, a financial services user-experience consultancy. 

 

 

Share this:

Send Post Twitter LinkedIn Facebook

Mobile UX: A First Look at “Second Look” Transaction Alerts from Capital One

Mobile UX: A First Look at “Second Look” Transaction Alerts from Capital One
By Jim Bruene Posted on
Categories: Alerts & Messaging, Capital One, UX

capital-one-labs-home

A paradox of the early digital banking era (1995 to 2007) was: Why is Capital One a laggard? The new company (spun out from Signet Bank in 1994) was widely revered as a data-analytics and marketing master. But it was practically a digital no-show for more than a decade, offering just a minimum level of functionality online. As recently as 2010, Capital One was the last major bank to launch a native mobile banking app.

Fast-forward six years. Capital One owns the innovation mantle, at least in the United States. It has Capital One Labs; it runs an innovation center in the Bay Area; and it now offers the most advanced set of mobile apps in the card-issuing business.

Its latest innovation? The first proactive service from a major issuer that alerts cardholders to deviations in spending with recurring charges. It’s called Second Look, and it certainly deserves one.

I was introduced to the new feature this week when I received a notification on my iPhone alerting me to a spending increase on my power bill (screenshot 1 below). After swiping through it and logging in via TouchID, the app displayed a chart showing how much my bill had increased last month (screenshot 2). And I was asked whether I was OK with the charge or not (bottom of screenshot 2). If not, the bank provided instructions on how to dispute the charge (screenshot 3). Customers can also elect to receive the alerts through email.

Another thing I really appreciated: The bank gave me enough info in the notification to make an intelligent decision whether I even needed to log in. The bane of the mobile-user experience is dealing with (ultimately ignoring) all the false positives you get through most notification services. I clicked through the notice out of curiosity. But thanks to the detail, I already knew that the $14 increase wasn’t a major problem.

Bottom line: This is just one example of a more proactive approach to helping customers deal with day-to-day finances. It’s still a relatively manual user experience, especially if you want to dispute a charge. However, as banks layer AI on top of their data hordes, outside APIs, and location-based info, we’ll see much, much more. Kudos to Capital One for leading the way.

(1) Second Look notification from Capital One
Exhibit 1: “Second Look” notification from Capital One

 

Exhibit 2: Second Look transaction analysis
Exhibit 2: Second Look’s transaction analysis

 

Exhibit 3: Second Look's taking action screen
Exhibit 3: The manual process to dispute a Second Look-flagged charge

 

 

 

 

 

 

Share this:

Send Post Twitter LinkedIn Facebook

Alerts: Discover Card Highlights Merchant Refunds

Alerts: Discover Card Highlights Merchant Refunds
By Jim Bruene Posted on
Categories: Alerts & Messaging, Credit/Debit Cards, Discover, UX

So much of day-to-day banking is either negative or at best, incredibly boring. I spent too much, my payment is late, I can’t remember where that last $40 from the ATM went, and so on. No wonder consumers are less than enthusiastic with their banking relationships.

What to do about it? For one, when you have good news, CELEBRATE! And one of the easiest ways to do that is when a merchant refund appears on a credit or debit card account. For example, Discover does a great job with its email. It’s personalized, and clearly shows the date, credited amount and merchant name (including hyperlink to Netflix). And there is a huge button at the bottom to check out the transaction online (not that you’d really need to).

Discover Card merchant refund notification email (29 Sep 2016)
Discover Card merchant refund notification email (29 Sep 2016)

 

But after clicking through the email, the user experience (UX) gets a bit gummed up. The first webpage displayed is the main secure homepage (first screenshot below). That makes sense since the email button says See Transactions. However, since my statement cycled since the refund was processed, the $15.34 Netflix credit is nowhere to be seen. (Granted, had I clicked on the message when it first came in, the transaction would have been listed on the lower portion of the screen.)

But now I have to play “guess where to click” with the Discover site in order to find my transaction on the previous statement. Not rocket science, but also not super-intuitive either. The obvious starting point is the big orange “recent transactions” button in the middle. But again, that leads only to the current statement. Astute users will find the link to the previous statement (ambiguously called Current Statement) at the bottom of the page. Clicking that leads to a page with the desired transaction, though it’s not particularly called out, appearing in a slightly different font shade and a Payments and Credits description (third screenshot below).

Bottom line: The email is fantastic (A+). The website has a great layout and look (go, orange). But insisting on displaying transactions on a monthly statement basis is so last decade. For the most part, users want to consume transaction data like email. Make it easy to see everything by paging through them and let me flag, pin, label, and mark as unread, significant transactions. For extra credit, put the most important ones on top like Priority Mail (Gmail) or Focused (Outlook Mobile).

 

Discover card home page (displayed after clicking on link in email above)
1. Discover card home page (displayed after clicking on link in email above)

 

Discover Card previous statement page.
2. Discover Card transaction page (displayed after clicking “Recent Activity” on homepage).

 

Discover Card "current statement" page
3. Discover Card “current statement” page

Share this:

Send Post Twitter LinkedIn Facebook

Mobile Monday: The Bank of America “Help” Button

Mobile Monday: The Bank of America “Help” Button
By Jim Bruene Posted on
Categories: Bank of America, Mobile Banking, Service, UX

bofa_help_top

I love the minutiae of digital banking. Others may be fascinated with how the blockchain will disrupt global payments or the impact of Dodd-Frank on debit-card rewards. Me, I just need a shiny new button to make my day. And as luck would have it, Bank of America obliged in its latest iOS update (Sep 22, v7.1).

The bank added a Help button centered at the top of the screen on most pages (see above and first screenshot below). Pressing the button leads to a slightly context-sensitive, self-service menu with an “Ask a question” box on top (second screenshot). The search failed my advanced search stress test (Do you have SEP IRAs?, third screenshot), but otherwise seemed serviceable. And it was relatively straightforward to find the right button to connect to an actual human at the call center.

Bottom line: Locating a Help button in a prime position is a good way to show that you care about the customer’s experience. It would be nice if the BofA button led to a better search function, complete with an audio option, and better context-sensitive results (note in screenshot 3, the top result from my SEP-IRA question is “Troubleshooting”). And if I was being totally honest, the button is a little hard to see on a tiny screen, the red on red. But regardless, it’s a good start.

New "Help" button on BofA mobile "transfer" screen
New “Help” button on BofA mobile “transfer” screen
Screen shown after pressing "Help" on Transfer page
Screen shown after pressing “Help” on “transfer” page
Result of search for "SEP IRA" on Help page
Result of search for “SEP IRA” on “Help” page

Share this:

Send Post Twitter LinkedIn Facebook

Mobile UI: Capital One Wallet Reverts to Old-School Navigation

Mobile UI: Capital One Wallet Reverts to Old-School Navigation
By Jim Bruene Posted on
Categories: Bundle, Capital One, Key Bank, Mobile Banking, UX

hamburger-menuI am not a huge fan of the hamburger navigation menu. If you are a smartphone native, I’m sure your eyes go right to the little pack of horizontal lines in the corner. But if you got your first smartphone in your 40s, you probably could use a little more help.

So I applaud Capital One, recently named in Fast Company as one of the best-designed mobile apps (see note 1), which in a 7 September iOS update ditched the so-called hamburger menu for something that’s actually visible on the page. See Fig 1 before and Fig. 2 after. I also learned today that Key Bank made the same decision to ditch the burger, but instead of a lower nav bar, they went with the more web-centric look of a near-the-top nav (Fig 3).
(Update 29 Sep: A reader informed me many banks are ditching the hamburger menu in light of Apple’s design advice here, here and here.)

Capital One Wallet iOS Previous
Fig 1. Capital One Wallet iOS
Previous

 

Capital One Wallet iOS Current
Fig 2. Capital One Wallet iOS
Current

Unless you are Facebook, Instagram, or other apps where customers spend hours every week, you need to make it easy for infrequent users to find their way through your app. And even though mobile banking is relatively simple, many providers make it needlessly hard to navigate with cute, hidden menus.

I understand why designers minimize the navigation, mobile real estate is precious, and even a half-centimeter devoted to on-screen navigation is a lot. But what’s more important, showing more transactions on the main screen or how to actually do something meaningful?

The update also included a new restaurant finder to identify popular eating establishments based on transaction data across all Capital One cardholders (Fig 4). It’s reminiscent of the Citigroup/Microsoft/Morningstar joint venture Bundle (F10), which, not coincidentally, was acquired by Capital One four years ago.

Key Bank iOS app with top navigation
Fig 3. Key Bank iOS app with top navigation

 

capital-one-wallet-restuarant-finder
Fig 4. Restaurant Finder in Capital One Wallet (iOS)

———-

Notes:
1. Only two financial companies were named in Fast Company’s list of 100+ best-designed products or apps in the October issue. The other was RobinHood, the simple, mobile stock-trading app.

Share this:

Send Post Twitter LinkedIn Facebook

Banking UI: Let’s Not Get Overly Responsive on the Desktop

Banking UI: Let’s Not Get Overly Responsive on the Desktop
By Jim Bruene Posted on
Categories: UX, Website Usability & Design

 

nextcard home2My favorite website of all time was from the ill-fated dot-com “fintech” card issuer, NextCard. In 1999, it was light years ahead of its time in design and UI. If only it had been equally savvy in its underwriting skills, it would be a digital banking giant by now.

What I loved about its website was the almost total lack of copy. In an era where most traditional brands dumped everything they could think of on the homepage, NextCard made due with just 50 words of copy, an almost “Google-like” experience (and this was before Google). See its circa-2001 homepage above.

The nice thing about the NextCard effort, besides the big red “easy” button dominating the page, is that the whole thing fit nicely on a single desktop computer screen. That was back when horizontal and vertical scrolling were the norm.

Fast-forward 15 years and the vast majority of banking websites are MUCH, MUCH, MUCH better. And I am a big fan of responsive design. It’s forced designers to pare back on overly busy home pages that have been a hallmark of banking sites since the 1990s.

wsecu mobileHowever, I think we are now in danger of becoming over-reliant on responsive design, at least on the desktop. Yes, it’s cost-effective to build a single site that works across all screen sizes. But if you are big enough to have a six-figure marketing budget, you can afford to tweak your site so it sparkles on both smartphones and desktops.

I don’t want to single out anyone, but I need an example, so I looked at a few sites in the Seattle area and chose Washington State Employess Credit Union to illustrate my point. Its site renders great on mobile phones or tablets with an intuitive swiping down (or is that up?) layout (see inset for iPhone 6 capture).

However, the same photos, fonts and layout rendered on a 13-inch laptop browser screen aren’t as elegant. The biggest issue is navigation. WSECU goes with the smartphone convention of a small “hamburger” menu in the upper right (see screenshot below). Users accustomed to mobile navigation will likely find it, but others may be perplexed.

With no visible desktop navigation, the eye is drawn to the “We’re all in” main headline along with the two running across the bottom (“Look what’s happening at your branch” and “Reflecting on 2015”). None of those are particularly enticing jumping-off points for the casual online visitor.

Overall, the WSECU site is pleasing to the eye and has easy-to-find login and search. However, the desktop version isn’t as effective as it could be explaining the products, services and benefits of banking there. And 20 years into web design, we should be more responsive to visitor needs.

WSECU home2

Share this:

Send Post Twitter LinkedIn Facebook

Chatbot Banking

Chatbot Banking
By Jim Bruene Posted on
Categories: Service, Strategies, Uncategorized, UX

2 5 billion peopleTry wrapping your brain around this little nugget. There are now 2.5 billion unique users of messaging apps worldwide. And they are fast becoming news, search and ecommerce platforms on their own.

How does chat morph into ecommerce, let alone banking? In China and other Asian countries, embedded chatbots are all the rage on messaging platforms such as Wechat, WhatsApp, Kik, Telegram and Slack.

Telegram is the only messaging platform to open up its chat API, such that there are now 120,000 bots serving its 5 million users (for example, see @gif and @vid at work here).

Tencent’s WeChat, the most popular messaging app in China … lets users shop, pay bills and book appointments.
—Wall Street Journal, 22 Dec 2015 

chatbank_mockupJust yesterday, YC-incubated Chatfuel demoed its platform at W16 Demo Day. And it’s coming soon to Facebook’s Messenger (of course).

Chatbot is hard to define. Google tells us:

chat·bot /ˈCHatbät/
noun
a computer program designed to simulate conversation with human users, especially over the Internet.
“Chatbots often treat conversations like they’re a game of tennis: talk, reply, talk, reply.”

Unlike sales/service “live chat” that’s become commonplace within online banking, chatbot banking is 100% automated and includes a back and forth “chat” designed to hone in on the precise question or request. They are a boon to mobile self-service, where the limitations of screen size make traditional searching less user-friendly.

But chatbots can also handle transactions, especially the repetitive routine ones typical of online/mobile banking sessions. See the inset for how I imagine text banking might work for one of the most common tasks: balance inquiry with a subsequent funds-transfer.

Looking ahead
If you think of online banking via a PC as digital banking 1.0, and mobile as digital banking 2.0, then the upcoming invisible UI (or the “no UI, UI” coined by USAA’s Neff Hudson) using chatbots, AI and machine learning could very well be version 3.0. At least, that’s my hope. It reminds me of my all-time favorite quote about banking (circa late 1990’s), from noted technologist Esther Dyson:

Banking is like vacuuming; it’s vital, but everybody tries to reduce their vacuuming time.

Embrace the vacuum. People pay good money for them (no relation to Esther, I think).

Share this:

Send Post Twitter LinkedIn Facebook

Mobile UI: US Bank Tackles New Navigation Conventions

Mobile UI: US Bank Tackles New Navigation Conventions
By Jim Bruene Posted on
Categories: Design, Mobile Banking, US Bank, UX

usbank_mobile_screens

As I was taking a tour of US Bank’s gorgeous new mobile app (above), I was reminded of an ongoing problem in mobile UI, lack of navigational consistency. For anyone over 30, you’ve seen this play out before. It took nearly a decade (1995 to early 2000’s) for websites, especially in financial services, to conform to pretty straightforward navigation conventions (tabs on top, login in upper right, etc.).

usbank_previousWhile responsive design—one website for desktop and mobile—has made things a little less standardized, desktop browser navigation is still pretty easy to figure out. And there’s always the back button to get you out of a jam.

Not so on smartphones. First-generation mobile banking UIs generally used the bottom of the screen to showcase 3 or 4 navigational choices, often with a More button to expand the choices. This worked OK since early apps usually had limited functions.

But as banks redesign their apps to a more modern esthetic, the bottom navigation bar is disappearing. That looks great, but how do users find key functions?

That brings me back to US Bank’s new app. When I finished admiring its newly sleek design, I was momentarily thrown for a loop on how to get out of the main page. The familiar buttons at the bottom were gone (see older screenshot right). And initially I didn’t see the “hamburger menu” in the upper left corner—a stacked column of three bars (upper left), or a stack of small dots (following line items)—which have recently become fairly common design conventions.

usbank_nav_closeupusbank_mobile_nav_optionsSo it turns out that US Bank has located navigation options in two spots, neither particularly easy to see on a phone.

(1) The hamburger menu is there in the upper left, but it’s small and looks like it’s part of the logo (see screenshot at left and closeup at right)
(2) The smaller context-sensitive menus are positioned directly to the right of each account. Deposit accounts have three navigation choices (Pay/Send, Transfer Money, Deposit)

Bottom line: US Bank has delivered what may well be the best looking big-bank mobile app yet, at least in the United States. It is also packed with new features such as no-login balance inquiry and customizations. So kudos to the team at US Bank, which also led the pack on desktop UI more than a decade ago!

That said, the almost-hidden primary navigation is a case of the design getting slightly ahead of its users. While users may soon get used to the new nav links, I recommend a few adjustments in the meantime:

  1. Add navigation instructions to the “feature tour” when users open the app for the first time.
  2. Make the hamburger menu stand on its own by increasing its size and placing it away from the US Bank logo (below the logo, or in the upper right which is wide open).
  3. Consider adding the word “menu” below it for a few months, at least until users get the hang of it.

——–

Update 16 Nov 2015: Digital design guru Jakob Nielsen just published an overview of mobile navigation echoing our concerns with the hamburger menus.

Share this:

Send Post Twitter LinkedIn Facebook

Feature Friday: “Combine Usernames” from Capital One

Feature Friday: “Combine Usernames” from Capital One
By Jim Bruene Posted on
Categories: Capital One, Mobile Banking, UX

Capital One just updated its Wallet iPhone app to include gift cards. That seemed like a good candidate for this week’s Feature Friday.

capital_one_combine_usernamesBut on the way to checking out the gift card feature, I ran into another new Capital One feature I love. It’s called Combine Usernames and it does just that. The option appeared automatically on the first screen when I first logged into the latest issuer’s standard mobile banking app (not the newer Wallet app) (see inset). The card giant noticed I had two usernames registered and offered to automatically combine them. It’s not something I’ve run into before, and it’s super convenient for those of us who can’t keep their digital life in sync. After selecting Combine Usernames near the bottom of the main screen, you are directed to a new screen with instructions to swipe to combine. I swiped and it worked immediately, although the page warned it could take up to 72 hours. I wasn’t sure what was lurking under my other username, but it turns out it was my old ING Direct (now Capital One 360) account. Now, everything’s visible on the app, and I’m in sync at Capital One. ———– I’ll cover the gift card function after I test it at Starbucks. Enjoy your weekend.

Share this:

Send Post Twitter LinkedIn Facebook

The Evolution of Mobile Weather Apps (and what it means for banking)

The Evolution of Mobile Weather Apps (and what it means for banking)
By Jim Bruene Posted on
Categories: Mobile Banking, UX

weather_buttons_iphoneIn 2007, I’d never used an Apple product. But I was one of the first to get an iPhone that year. I wanted to see for myself what the much-touted device meant for the future of financial services. While there was no banking in v1.0, I found myself enthralled with the weather button, my first taste of the elegance of a native app experience.

Fast forward (almost) 8 years, and the weather button(s) is still my most-used app (as you can see on my home screen at right with four weather choices). But in the face of fierce competition, even weather apps have evolved from being completely static to having a useful alerting functions. The Dark Sky app (screenshot below, note 1) hits me with a popup notification and jingle 10 minutes before it’s about to rain, which comes in very handy in Seattle.

Look at the schematic of the Dark Sky weather app below. Five years ago weather apps gave us the a simple probability of rain some time during the whole day. Now it predicts precisely the exact minute rain will start in my neighborhood. That’s a massive functional improvement.

dark_sky

Relevance to bankers
The evolution in mobile weather demonstrates the importance of transitioning from static information retrieval to active alerting. A good passive experience was fine for the first wave of mobile information (2008 to 2013/2014), but the best apps now go way beyond that now.

Let’s switch gears to money management. Your preferred banking/PFM app knows how much you’ve spent compared to previous periods, it knows how much you make and what bills are due before the next paycheck. So your money app can alert you, in real time, when you are bumping up to the last of your discretionary spending each pay period.

And while that’s a pragmatic use case, it’s also a negative one since the app keeps reminding users how strapped they are. A more entertaining use revolves around purchase recommendations. My money manager (Mint in this case, but it could be my bank/card issuer), knows I’m a coffee shop addict. The app could give me a heads-up when I was in the vicinity of a high-rated coffee shop. Of course, the recommendations would have to be highly relevant and focused, or I would just ignore (or turn off) the alerts.

Bottom line: It’s time for banking/PFM apps to be as smart about your money as Dark Sky is about the rain. I forecast a bright future for FIs that get it right.

——–

Note:
1. Dark Sky is so good, they actually can charge $4 for it in face of dozens of free apps (including the one that comes bundled on all iPhones).

Share this:

Send Post Twitter LinkedIn Facebook