Skip to main content

User interface for ATMs of Erste Bank and Sparkassen

Erste Bank und Sparkassen – Concept, Design and Frontend Development

Together with the savings banks, 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 of 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.

In 2023, dmcgroup was responsible for rebranding the user interface to match the bank’s new corporate design.

Client: s IT Solutions

Since: 2018-2020

Services:

Concept Design Frontend Development
SB Erste Bank Premium Mastercard
SB Erste Bank Keba ATM
SB Erste Bank Success Icon

“The project sets new standards in the use of self-service devices. The work of the dmcgroup is: Competent & creative. With the customer. On the pulse of time.”

Alfred Bauer, Leiter der Abteilung Kundenbetreuung & Self Service Solution | 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
Erste_Bank_Case_Teaser
SB Erste Bank - Auszahlung Animation
SB Erste Bank ATM_Dalek Animation

User Experience

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.

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

The excellent teamwork between the employees of the dmcgroup, s IT Solutions and Erste Bank und Sparkassen was exceptional at all times during the project.

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 PIN Eingabe

Our Team

Together with Erste Bank and Sparkassen, we have redesigned the user interface for the bank’s ATMs. Our team worked closely with the customer to create something special.

Continue browsing through our projects

Filter

Beitragsbild für Figma Blogartikel

Migration of a global design system from Sketch to Figma

Migration of a global design system library From Sketch to Figma by Antoniya Dimitrova30.05.2024 Below is an in-depth look at…
svg+xml;charset=utf dmcgroup

Aktion Mensch

Barrier-free corporate design & brand relaunch for Aktion Mensch The we wins As the largest private funding organization in Germany,…
svg+xml;charset=utf dmcgroup

Success factors for digital product development in an agile workflow

What are the success factors for digital product development in an agile workflow?

Would you like to find out more about our services or do you have any questions? I will be happy to help you. Contact me to discuss your concerns and receive customized solutions.

Tamara Himler

Tamara Himler, Client Service Director
M +43 676 93 83 137
tamara.himler@dmcgroup.eu