That design is money!
A better ATM experience from Wells Fargo
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
Talk about That design is money!
Holger Struppek
Holger Struppek is a Design Director at Hot Studio in San Francisco. Prior to joining Hot Studio, he worked at Pentagram in San Francisco.
Read more about Holger Struppek.
Reputation Points: 14
Web Sites
Holger Struppek's Stories
Related Categories
Tiny URL
Use this when sending links by email.
Comments Feed
This site and its contents belong to us.
If you use our stuff, be nice about it or we'll find out where you live and drop-kick your housepets.
Creative Commons Attribution 3.0 United States License
Holger, thank you for this article. It is clear that the design team worked from from solid insights about users and built the system around their needs and concerns.
I do question Wells Fargo’s decision to change the overall color scheme to be more in line with the brand, especially given the need for high-contrast buttons, which the blue color scheme afforded users. That kind of thing really should have been addressed through the surround and point of sale graphics. Sometimes marketing and brand people don’t know when to leave a good design alone—”on brand” sometimes conflicts with usability. I don’t think users ever question that they are visiting a Wells Fargo ATM and not some other bank’s.
The other thing I find interesting is the left gutter feature that generates a button with frequent interactions, such as withdrawing $40 as a common task. The system sees that a user consistently withdraws a certain amount and then creates a simplified operation around that task.
The old way might have been through onerous “preferences” settings either within the ATM interface or through profile management tools on the Web. Your automated predictive approach is far more preferable!
Your design team did an amazing job with this product. I wish more interface designers were this considerate.
This is a fantastic article! Looking forward to more.
Wonderful article. Love the way you walk through the various prototypes and the thought put into the design, particularly things like the shortcuts and the display of cash availability right in the main menu.
That being said, I strongly feel you missed out on something which the current crop of BoA ATMs address pretty well: I would imagine (it certainly is for me) that by far the most common transaction is a simple cash withdrawal, and BoA puts the “Fast Cash” button (the amount is customizable) right in their *login* screen (see http://www.meydad.com/wp-content/uploads/2007/11/img-0008… for an example). The workflow then is: slide card in, punch in PIN, log in via Fast Cash button, get cash, get card, done.
Nonetheless, great design, and thanks for a peek behind the scenes.
As an interaction designer and Wells Fargo customer—thank you! I have been complaining for years (as anyone who runs into me after I withdraw cash will tell you), that every time I use the ATM, I need to tell it which account I want to withdraw money from (or deposit money to). This might make sense if my ATM card were tied to multiple accounts, but it’s not—I just have the one account, so why introduce an entire step just to ask which account I want to work with?
Probably 95% of my interactions with the ATM involve withdrawing the same amount of cash from my account. Now all I have to do is enter my PIN, press one button and I’m done.
ATM design is one of those things that highlights for me the problematic path that a use case-driven methodology can lead to vs. taking a holistic approach to interaction design based on what people actually need and use a product for. It seems that every book I’ve read about use cases uses ATM systems in its examples for how to construct use cases, and the resulting UI and workflows are reflected in the painful, unnecessarily complex/confusing interfaces found out in the real world.
strange.
this group, not pentagram, has it in their portfolio.
http://www.ammunitiongroup.com/
First time I saw the interface, I did a double take because the UI is so logical. Previous experiences with ATM machines made me regard them as a “dumbed down” interfaces. It’s so simple and straightforward, it’s almost as if it were designed for people with a technical background. I wish that we could see more results of the user studies.
However, I am pleased that it recalls the common settings that I use for transactions. I don’t have to tell each ATM that I like pictures of checks printed on my receipts!
I just saw the new interface yesterday at an ATM and boy, does it suck !
As someone commented earlier, the color scheme is hard to read. But most of all, it seems like the most common operation “Get Cash out of my checking account” is not well-designed. It takes a whole bunch of menu clicks to get there and the buttons for this 90% case are just the same size and color as all other buttons and have to be “Searched for”. They should have taken a look at the new Citibank ATM interfaces. Much better.
Java? no, Ruby on Rail ??? noooo
it is .net WPF…rock!!!!!!!!
http://www.microsoft.com/casestudies/casestudy.aspx?cases…
You guys did a really good job on this. I saw this blog post on another site and was interested to see how you did it all. I first saw the new look two weeks ago and immediately thought it was a real improvement over their previous UIs. Good job! And kudos to Wells for hiring someone who knows what they’re doing to handle this instead of somebody in-house who doesn’t know design.
This is an excellent article about the process of how to do UIs.
This is really cool, but the one feature of the old button based machines that is impossible to replicate on a touch screen is braille. How will blind users be able to use these new machines?
Excellent! A well-written account of the design process and I love how you let us peek in on how you came to certain design decisions.
nice description of your design and a nice outcome as well. I use their ATMs all the time and can say that I really like the new design. Its visually cleaner and elegant and I found the shortcuts easy to find and use.
Congrats! It has been a pleasure your article. I think the predictive screens will be the next ATM future. Here in spain we are very focused in improve usability in ATMs but also in multichanel solutions to integrate with CRM. Here we are also adapting ATMs from BOL and I hihgly recomend to apply eye tracking user test in order to define the best palete.
Warm regards
Well. I really loved this redesign and there is on doubt that Pentagram did a great job. However- there are some UI concerns in those screens as lack of feedback for the users (e.g: mark steps that I have completed with a V). But all in all this is a nice move by WF.
mama mcgee, in the work section of ammunitiongroup’s site, it says the displayed work was done while the team was in Pentagram.
Thanks for the feedback, everyone! It’s great to receive so many positive responses to our work and to the article.
Sean Robertson asked about the usability for sight impaired customers:
“This is really cool, but the one feature of the old button based machines that is impossible to replicate on a touch screen is braille. How will blind users be able to use these new machines?”
Wells Fargo’s ATMs are so-called “Talking ATMs”: They have a headphone jack and offer audio guidance in English and Spanish for all financial transactions. There are Braille decals on the machines that identify the different components such as the card-reader, cash and receipt dispenser, etc. Also, there are tactile identifiers on the number “5” and on the OK, Cancel and Correction keys. The UI can be navigated using 2-digit key commands; for instance “30” is the same as pushing the top shortcut button.
Best,
Holger
As a long time Wells Fargo user I have been waiting for a decent UI forever! I think this is a huge step in the right direction. I also am thrilled with the envelope-less deposits.
My only complaint has been that when you insert a check to be deposited the feeder/grabber (whatever you call it) seems to be deep inside the machine and very gentle when it takes hold of the check = no immediate user feed back. I always feel like I’m sticking the check into the abyss and have to sort of do a double take.
I know without the audio on the touch of a button you would be a bit lost, very similar. Which just reminds us that it’s not all about the visual experience…
Good job.
Silvia,
I think that’s an important point. This publication is about both the physical and representational (in this case, screen) realm of interface and product design. Perhaps this is an area where ATM manufacturers should take note.
Thanks for your comment,
Michael
I liked the old Wells Fargo ATM interface but the new one is many times better. It’s a delight to use.
A bit of trivial history:
- In 1980 at Apple, Rod Perkins designed what we called “Dialog Boxes” for the Lisa computer (the Mac’s older sister) and I designed what we dubbed “Alert Boxes”. We needed to come up with user-friendly names for the standard buttons that either confirmed the user’s choices or aborted the command.
- ATM’s were a recent innovation. I happened to visit the local Wells Fargo Bank to withdraw some cash. The ATM’s interface used “OK” to confirm the transaction amount and “Cancel” to abort the transaction. I thought to myself, “In a few years, everyone will be using these gadgets and OK/Cancel will seem intuitive to them”. So we went with those names.
I sometimes bemoan the choice of “Cancel” because a command’s action can be negative. A very bad case is when you select an order on an e-commerce site and click “Cancel this order”. If the site asks you to confirm using “OK” and “Cancel”, which button does what? The designer needs to choose unambiguous names (and colors) for the buttons, or rethink the flow so the situation never occurs.
But whenever I get down about OK/Cancel, I cheer myself back up by visiting http://www.ok-cancel.com/.
Larry, welcome to our little community! We’re honored you dropped by. I think it is fair to say OK/Cancel is a pretty comfy convention by now. 8>)
I do like how the design team did an “Okay” button and then an explicit “cancel” such as “Return your card” and, conditionally, “Including all checks” in different places where checks have been inserted into the machine. These are fairly unambiguous user commands for the system to follow.
Great job. What about their website?
Who actually designed the Wells Fargo ATM design?
Pentagram or http://www.ammunitiongroup.com/ (slide 4)
http://www.ammunitiongroup.com/ has Wells Fargo as part of their design work.
T Fisher: The design was done at Pentagram by partner Robert Brunner as the creative lead. Robert has since left Pentagram and founded Ammunition Group.