A better ATM experience from Wells Fargo
Originally Published on 02 Jun 2008
Enter your PIN
Wells Fargo hired Pentagram in the fall of 2005 to begin work on a new user interface for their ATMs. Wells Fargo was in the process of replacing their ATMs with newer models with touchscreen monitors. This was a relatively slow process, since there are about 7,000 ATMs in the field, and replacements are expensive. The design efforts were to improve the user experience and satisfaction. Wells Fargo sought a more graceful presentation flow rather than a choppy screen-to-screen feel, and an overall more elegant appearance for the UI.
Simple task, simple screen (mockup of the original blue color scheme). Large dots help you keep track of the number of digits entered.
Interaction Design
Previously, the UI had to run on touchscreens as well as machines with buttons afforded by the hardware. This meant that screen buttons always had to be placed on the left and right sides of the screen in order to line up with the tactile buttons. The decision to decouple the new screen layout from the old “buttons-on-the-side” hardware was one of the most important design decisions for the product.
Comparison of the old and new Main Menu.
With the new UI, we were able to use the entire screen for user input. This came really handy when we approached the workflow for envelope-free check deposits which allow much shorter processing times and the ability to print receipts with an actual image of the check. It also saves the bank processing costs.
Check deposit transactions are quite complex because of the number of the things that can potentially go wrong, such as an optical error in the check scanner. The scanner is actually quite robust: We tested some heavily crumpled and smudgy checks and they were all recognized. But the system still had to allow users the opportunity to fix scanner errors.
We thought users would find it a little scary to insert a stack of checks or cash directly into the ATM without an envelope, we wanted to make the entire process as transparent as possible.
The screen is updated with thumbnails and status of the checks during scanning. (Mockup)
If a scanning error occurs, the customer can pan around the scanned image and enter the correct amount. (Mockup)
Everything can be reviewed before submitting the deposit. The history menu allows you to skip back to previous steps. (Mockup)
The design team learned that the single-most used feature of an ATM is the cash withdrawal. The objective for the new UI was to continue to offer quick and easy cash withdrawals, while making the other services more visible and accessible. Some of these services, such as purchasing stamps and printing account statements, can be convenient for customers and they save a trip to the post office or branch office. For Wells Fargo, it is an additional source of revenue.
Purchasing stamps is convenient for customers and a source of revenue for Wells Fargo. This is a photo of the UI in the current color scheme. Photo: Michael Beavers
A great feature of the Wells Fargo ATM UI has always been the Quick Cash button. It allows you to quickly withdraw an often-used amount from your checking account with the press of one button. There is no need to go through the steps of selecting an account, selecting an amount, and confirming the transaction. However, few people knew that this feature could be customized with a different amount and account. The functionality was always there, but it required pressing the My ATM Preferences button, followed by a tedious multi-step procedure to change the settings.
We thought that the new UI could be better than that. Instead of just offering generic choices and complicated customization procedures, the ATM should learn by itself what individual customers do most often, and then make those things easier to accomplish.
The new UI still offers the Quick Cash feature, but in a much smarter way. Instead of one Quick Cash button, we introduced a whole column of shortcut buttons that behave somewhat like the History menu in a web browser. It is still possible to customize them through Set My ATM Preferences, but hardly necessary since they always reflect the most recent transactions.
Shortcut buttons retain transaction-specific preferences, such as the selected account, amount, and receipt choice. Photo: Michael Beavers
Visual Design
Wells Fargo’s ATMs come from various manufacturers. They differ, to a degree, in the screen size and the position of the keypads, card readers, receipt printers, and other functional elements. Since the UI needs to work on all of them, we couldn’t tailor it to a specific hardware arrangement. Big arrows pointing to things were out.
ATMs by NCR and Wincor Nixdorf.
Areas at the very top or bottom of the screen can become invisible for very tall or short people because of the recessed screen placement in some ATMs. Therefore, we did not place any important information in those areas.
We also learned that the buttons needed to be large since the the thick protective glass cover breaks the light coming from the screen. This creates an “aquarium-effect” that can make it hard to know where exactly to touch the glass in order to press a button.
Sufficient contrast is also extremely important. A considerable number of streetside and drive-in ATMs get direct sunlight onto the screens. We compared the old and new designs on a laptop screen in bright sunlight to make sure we had enough contrast in the new UI.
Comparison of the contrast of the old and new UI on a laptop in bright sunlight.
We chose a grid and visual design that allowed us to use most of the available screen real estate without looking cluttered and stuffed. Buttons are designed so that the visual focus is on the valuable information (=the text label) and less on the shape, allowing for tight spacing.
Buttons of the old UI had really strong borders, adding a lot of visual complexity to the screen. The new buttons are visually simplified.
Screen grid schematics: We initially used a 5 * 5 button grid, but then switched to a 6×4 grid that afforded us larger font sizes for the text labels.
Wells Fargo’s brand color palette is a pretty unique combination of the two primary colors red and gold, with a secondary palette of warm grays, tan, and greens. Unlike Bank of America or Citibank, blue is not part of Wells Fargo’s color palette.
We initially explored several color schemes for the UI with an on-brand color palette, but decided on blue for the prototype. (Mockups)
However, blue seemed to be a color that was genuinely pleasant to look at, and even though it was “off-brand”, everyone could live with it. It provided great contrast to the red Return Card button and the yellow alert boxes. During user testing, we presented participants with our color choices and got the same results: “It’s calming”, “I like the blue sky”, ... and so we went with it.
Surprisingly, Wells Fargo recently switched the UI to the current tan color scheme. I don’t know what
prompted that decision, but it does bring it back in line with their brand.
User Testing
Wells Fargo has its own user testing facility in the San Francisco Bay Area. We attended testing there throughout the project to validate interaction flows and visual design decisions.Remove Card. Thank You.
The process of interaction design, visual design, and user testing took about a year. The first ATMs with the new UI began to appear on the street in the spring of 2007, about 6 months after we wrapped up the project.It was great to discover the first new UI “in the wild”—in the lobby of a parking garage on 4th & Mission in San Francisco. Looking at the screens a year later, I’m pleased that Wells Fargo is continuing to develop the UI without abandoning the roots of our original design.
Designed by Pentagram San Francisco.
Robert Brunner: Principal, Creative Direction
Brian Jacobs: Art Direction
Tom Hobbs: Interaction Design
Charles Mastin: Interaction Design, Prototyping
Holger Struppek: Visual Design
