How Critical Mass redesigned the cash machine for Citibank

The new touchscreen interface uses modern UX principles to make ATMs easier and faster to use.

The design of the humble cash machine isn't something most of us have given much though to – but it's a perfect example of how enhancing UX can make a difference to something a lot of people use on a regular basis, improving both their customer experience and their opinion of the brand that's delivering it.

This was the task given by US arm of Citibank to Critical Mass – the global digital agency, not the direct action-led cycling group. Critical Mass has designed the front end of Citibank's online banking – as part of working across on the bank's branding including its mortgage service and rewards programme. Next its sights were set on the bank's ATMs (as I'm sure you're aware Americans call cash machines).

"Citi was one of the original pioneers of ATMs back in 1977," says Aaron Rosenberg, Critical Mass's VP for program management and delivery. "Their ATMs hadn’t been updated in 15 years or so – and [like most bank ATMs] were some of their least appealing experiences. When you visit the ATM, it seems so ordinary and everyday. We asked ourselves why is that?"

"We asked what could be done to make it smarter, easier, faster and above all really more human. That was our challenge. That informed the initiative and the subsequent design implementation."

Use the slideshow controls above and right to read the rest of this story, and to see the evolution of the design of Citibank's ATMs.

Aaron describes the approach to designing how the ATMs work as "device-optimised" – not trying to replicate the complexity of what's available through online banking but producing a more stripped-back, efficient experience that suits what people require from a cash machine.

Critical Mass senior art director Cindy Yu says that this is in contrast to the previous design of the ATM's interface (right).

"We did an analysis of their current ATM experience and realised it was quite mechanical [and] robotic," she says. "Being originally designed in 1977, it was more of an engineered product. There wasn’t such a focus on user experience. We envisioned an experience that was based on the principles of being more human, more flexible and more fluid."

Another issue with old designs (right) was that there were many redundant screens that slowed down users and frustrated them. These had to be dispatched with.

"One that we saw a lot was the [regular] use of a screen that asked the customer to reconfirm their actions," says Cindy. "A screen with one single line that said ‘are you sure?’. It almost doubled the number of steps a customer would have to go through, as they would be asked to reconfirm almost every time they made a choice."

Advertisement. Article continues below

Some of the screens in the older designs did attempt to speed things up for users, but as they were poorly implemented, they often had the opposite effect. One example of this Cindy cites was an attempt to let users bypass the language selection process for faster service – called Fast Cash.

"You’re presenting two fundamentally different things on one screen," says Cindy. "And if I chose to speak another language, I’d lose the option for Fast cash. If I selected Fast cash, I’d lose the chance to change my language."

One key aspect of making the process more efficient was introducing a level of personalisation. For example, if a customer changes the language to Spanish, on their next visit they will be automatically be presented with a Spanish interface when they insert their card.

A visual spruce up as also necessary – not only to use modern styling but also the bring a old design in line with Citibank's latest branding.

"[On the old machines] there was a huge disconnect from the current Citibank brand," says Cindy. "Our mandate was to create a visual alignment, so that the new ATM designs supported the current vision. The ‘blue wave’ that you find along the header of all desktop websites was introduced to create a strong connection for the brand."

One user journey the design aims to make more efficient is when a user wants to review one or more of their account balance before withdrawing funds – something that Citibank's stats showed was a regular path for many customers (Citibank allows customers to access multiple accounts using a single card in the US).

"Before making a withdrawal, [the customer] would go into their account information – which lists the accounts you have available for each of their accounts – before making a withdrawal to see if they had enough money," says Cindy. "[We wanted to let the user] have a glance at your funds before they perform their transaction.

The design introduced an area to the main menu screen to allow a "quick peek" at balances. Users can scroll horizontally through their accounts as tabs, review balances and perform transactions.

"We took what we found statistically to be a common and often-used feature and elevated it to a place where customers could easily access it," says Cindy.

Advertisement. Article continues below

Another important considerations for usability was accessibility for customers with disabilities. This also meant complying with design parameters set out by US legislation called the Americans with Disability Act.

"We had to make sure font sizes were large enough to be deemed legible by all people," says Cindy. "The size of our buttons had to be large enough to accommodate the general public.

"Colour and contrast was also important. The need to ensure we had strong enough contrast between the text and the background in order for it to be legible."

While you might think of ATMs as dumb terminals, Aaron describes the redesign as "very much a contemporary digital project for us".

The interface was coded using a mix of HTML, CSS and Javascript, which was then translated for use on the ATMs.

"We came up with a template architecture that allowed us to do a lot of this stuff very quickly," he says. "Front-end code – created in a similar way to what we would typically do for a handheld – would interface with the middle layer of software that controls the [ATM’s] drawers and platform. This allowed us to write code using conventional tools while ensuring that the back end was totally secure."

The new interface should be rolled out across Citibank's 2,900 ATMs by the end of February.