Redesigning Melli Bank’s ATM User Interface to improve usability and accessibility

ATM Redesign Project – Melli Bank

Summary of the Project

Melli Bank is the largest national bank in Iran, which has more than 8,000 ATMs across the country. In 2018, the bank decided to redesign the user interface of its ATMs in order to align their ATMs with new standards in addition to the new branding. I was hired to implement this project and it took about 3 months.

Company: Faradis Alborz Co.

Customer: BMI.ir

My Role: UX Designer

Project Date: 2018

Why the bank considered redesigning its ATM interfaces:

  • Improving User Experience (UX): Enhancing the overall user experience is a primary goal. A well-designed ATM interface can make transactions smoother, faster, and more user-friendly. This can lead to higher customer satisfaction and loyalty.
  • Accessibility: A redesigned interface can address accessibility issues, making it easier for all customers, including those with disabilities, to use ATMs independently.
  • Efficiency: Redesigned interfaces can streamline the ATM transaction process, reducing wait times and increasing efficiency for both customers and the bank.
  • Brand Image: A modern and user-friendly ATM interface reflects positively on the bank’s brand. It can create a perception of innovation and customer-centricity.
  • Compliance: Evolving regulatory requirements necessitate changes to the ATM interface to ensure legal compliance.
  • Competitive Advantage: Staying ahead of competitors by offering a superior ATM experience which can attract and retain customers.

UX Strategy for ATMs Interface Redesign

Business Values:

– Customer Satisfaction: Improving the ATM user experience to enhance customer satisfaction and loyalty.

– Efficiency: Streamlining ATM transactions to reduce wait times and operational costs.

– Brand Image: Reflecting a modern, innovative, and customer-centric brand image.

 Compliance: Meeting regulatory requirements and maintaining legal compliance.

User Needs:

– Ease of Use: A user-friendly interface that is intuitive and requires minimal effort to complete transactions.

– Accessibility: Ensuring that the ATM is accessible to vision impaired users.

– Feedback: Providing clear feedback on transaction status and errors.

– Language and Localization: Supporting multiple languages and localization for diverse customer bases.

Technical Capabilities: 

– Modern Hardware: The ATM hardware should be up-to-date and capable of supporting the redesigned interfaces.

– Software Development: Skilled developers and software engineers capable of implementing the new UI and features.

– Compliance Expertise: Knowledge of regulatory requirements and the ability to ensure compliance with financial regulations.

– Cross-Platform Compatibility: Ensuring the ATM software works seamlessly across different ATM models and manufacturers.

Project Scope: 

This redesign’s goals include rebranding and creating a cutting-edge user experience while adhering to accessibility guidelines. Parts of the user flow may change in addition to the user interface design. Coordination with the technical team is required for some changes that may affect the technical layer.
Given that this user interface will be implemented on both new and existing ATMs, it is essential to give the designer the bank’s specifications for ATM monitors.

Design Deliverables: 

– Userflows

– Wireframes

– Prototypes

– and design specifications.

Branding and Color Palette

The design of the new user interface is based on the Bank’s brand book, which has been developed by a third-party design agency.

Logo and Primary Colors:

BMI logo design

Color Variations:

Type Faces:

This was a multi-lingual design project. The ATM works in English and Persian language and I had to design pages in both languages.

English Typeface:

User Research and Persona Creation

The User Research for this redesign project was done as a separate project, which you can find in my portfolio. A set of 5 personas was created during the research phase and is used during this redesign.

BMI User Persona

UserFlow Diagrams:

User flow diagrams are a visual representation of the path that users follow to achieve a meaningful goal on a website or app. They are used to improve both the user experience and business values of a website/app project.  

Creating user flows can help us to identify pain points and frustrations during a user experience, which can lead to better product design and service.

I’ve created a bunch of user flows for each task that user can achieve using ATMs.

The money transfer userflow is presented below:

UX user flow for money transfer

Design for ATMs

There are lots of differences between designing an ATM interface and other kinds of screen UI, including both web and mobile.

Despite our rich experience in UI design, we had to dive deeper into this field. The target is to create a solution that takes into account machines position, technical restrictions, and other aspects. And, what is really important, that is easy to use for people with color deficiency or vision impairment.

ATM user interface consists of a page with 8 buttons which has predefined locations at the left and right of the screen.

ATM Design UX principles

Accessibility Issues in ATM UI Design

Design affected by the environment

Any user can face some difficulties with screens depending on the time of the day, sun light, or ATM position. Furthermore, getting a service quickly is sometimes crucial. In order to design straightforward and automatic interaction scenarios, it was my challenge to take into account all of these factors.

ATM in the street

I worked out a color scheme with high contrast. The main reason for that is to make data on screens easy to read regardless of luminance level.

Accessibility principles

Text size and contrast for the navigation elements comply with the AA level of Web Content Accessibility Guidelines (WCAG 2.1)

color contrast test in ux

Translation

After creating layouts we got a challenge to present them in 2 languages. English and Persian.
English is a left-to-right language while Persian is a right-to-left language, So I had to design all pages in both languages to make sure all the design rules are met in every user interface. Because of using only static text screens by ATM, I got to design more than 100 pages.