Client
s IT Solutions
Year

2018-2020

Deliverables
  • Concept
  • Design
  • Frontend Development

User interface for ATMs of Erste Bank and Sparkassen

Together with the Sparkassen, Erste Bank represents one of the largest banking groups in Austria. It comprises over 1,100 branches in Austria and serves more than 3.6 million customers.

s IT Solutions AT Spardat GmbH is the IT provider for Erste Group and the savings banks in Austria. In addition to many other high-quality IT solutions, the software for almost 4,000 self-service devices of the banking group is developed and supported here.

dmcgroup was commissioned by s IT Solutions to rethink and redesign the graphical user interface for self-service devices with touchscreens in a joint process and to support the technical implementation by providing front-end templates.

SB Erste Bank Premium Mastercard
SB Erste Bank Keba ATM
SB Erste Bank Success Icon

Alfred BauerHead of Customer Care & Self Service Solutions | s IT Solutions

Alfred SchmidtProject Lead | s IT Solutions

Fritz KrammerBusiness Owner | Erste Bank

Christoph KamonLead Developer | s IT Solutions

Simply intuitive – the new face of ATMs

The bank’s self-service machines make it easy to carry out banking transactions around the clock: printing account statements, making transfers, and – among a number of other functions – withdrawing and depositing cash.

The focus is on maximum accessibility and intuitive use with as little learning curve as possible: After all, the devices are used by almost all age and population groups.

People standing at a self-service machine usually have little time but plenty of distractions around them – from sunbeams falling on the machine’s display to a line of people waiting behind them.

This difficult context of use is reflected in the requirements for the interface.

  • Self-explanatory & intuitive to use
  • “Design for all” with a focus on target groups over 50
  • Special consideration for target groups with special needs
  • Optimized for touch operation
  • Adoption of the current design language of Erste Bank

Window to state-of-the-art Internet banking – part of the omnichannel strategy

Erste Bank and Sparkassen are among the most modern and innovative banks in Europe.

One of our key concerns was to ensure that the new interface would be an attractive window into the world of the bank. The experience of other channels, such as Internet banking “George”, should find its way onto ATMs.

But we were concerned with more than just cosmetics: George customers will find their familiar surroundings from George again on self-service devices:

  • Your personal account designations
  • Individually set account colors from George
  • Personal salutation and profile picture from George, if available

The basic interface between self-service and George is the foundation for further synergies between the touchpoints.

SB Erste Bank Welcome Screen
SB Erste Bank Main Menu Screen
SB Erste Bank - Auszahlung Animation

Microinteractions for positive user experience

The new self-service devices should be fun to use: through the use of fresh colors, simple and clear screens, and targeted animation that supports interaction with the device.

Positive user experience is in the details: small animations and transitions from one view to the next ensure, thanks to proven dramaturgy principles, that the interface feels organic and alive – without being overwhelming or annoying.

SB Erste Bank ATM_Dalek Animation
svg+xml;charset=utf dmcgroup

The most effective personalization happens automatically

Interaction with a self-service device must be as fast and efficient as possible. Our research showed: the majority of transactions carried out by customers follow recurring patterns.

Together with s IT Solutions, we succeeded in developing a “self-learning system” that offers individual suggestions for customers’ “most frequent actions” through real-time evaluation of customer behavior – drastically reducing transaction time for these recurring tasks. And all this without the need to make personal settings.

User-centric, iterative implementation in a multidisciplinary team

The collaboration began with an extensive ideation and prototyping phase. Here, the basic conceptual and creative principles for the redesign of the interface were developed together with s IT Solutions.

After the prototype developed in this phase achieved excellent results in a market research study, implementation started at the beginning of 2018.

A multidisciplinary team from dmcgroup, s IT Solutions and Erste Bank developed feature by feature in close, agile collaboration:

  • Storymapping workshops to formulate requirements and consider functional scope
  • Co-location and co-creation for effective collaboration
  • Regular coordination with the technical experts of Erste Bank and Sparkassen as well as the bank’s steering committee
  • User testing for every new feature and at every crucial stage of the project: with concept sketches, design prototypes and finally with the “finished” application on real devices
  • Rollout of each newly developed function in a pilot phase in selected stores
  • New knowledge gained in this way could be iteratively used to improve the surface

At every point in the project, the excellent teamwork between the employees of dmcgroup, s IT Solutions and Erste Bank and Sparkassen was exceptional.

Design principles for self-service interface

1

Focus on the essentials

Our interface puts what is important at the moment in the foreground.
Not everything is equally relevant at all times when using the device.
2

Clear user guidance

Simple language and a central call to action in generous typography ensure that the current task is quickly grasped.
3

Eliminate errors by design

Processes and query screens are designed in such a way that incorrect entries are not even possible.
4

Microinteractions for that special something

Subtle animations and transitions create an experience that feels natural and fun.
5

Automatic personalization

By analyzing individual customer behavior, shortcuts are offered that drastically shorten the corresponding transaction time.
SB Erste Bank - IBAN Animation
SB Erste Bank Kontoauszug
SB Erste Bank ATM Screen PIN