ATM Application Design

Brief

The requirement was to review the user interface and experience of the ATM Kiosk and mobile app and enhance their usability.

My role: UX Designer, Team Leader

Size of team: 4 members

The Process

The approach to design was systematic and the process was iterative We took a very systematic approach to this project with multiple feedback cycles and iterations.

ATM design process

Research

The initial phase included 3 types of research:
Observations
Interviews
Surveys


Key takeaways:

  • Users were distributed almost evenly across the two channels of purchase - ATM kiosks and Buying in a Tabacchi.
  • Lack of clear and accessible information induces cognitive stress.
  • ATM kiosks and the app were perceived to be intimidating to new users; high level of errors.

Analysis

A detailed analysis was made based on the research:
Expert Reviews
Personas
Card Sorting


User Goals:
Four tasks were designed based on personas

  • Buy single urban ticket
  • Recharge ATM card
  • Navigate their way to a desired destination
  • Action in case of loss of card
ATM Applying Fogg’s Behavior Model to the tasks

Applying Fogg’s Behavior Model to the tasks

Information Architecture

The Information Architecture was built based on the results of the card sorting conducted.

ATM information architecture

Task Flows

For each of the four primary tasks, a user flow was created to map the process and optimize it.
Example - Lost card scenario: A complex part of the project since it is a new feature. The user can login to his/her account to block card, order a new card and print a temporary ticket till the new card arrives. The aim of adding this new feature was to reduce stress and facilitate hasslefree card replacement.

ATM taskflow for lost card

Wireframes (Kiosk)

Low-fidelity wireframes were created at this stage to ensure that the primary focus rests on the usability and the basic layout aspect of the project. An example here shows two flows - to buy a new urban ticket and the lost card scenario.

ATM kiosk wireframes

User Testing

We took a step back into UX design (wireframes) to review and incorporate our discoveries from the user testing. The example shows a solution that addresses the confusion and uncertainty in buying a cumulative ticket. The process was broken down into two smaller steps to decrease the cognitive load of the user.

ATM kiosk wireframes user testing

Prototypes (Web App)

A high-fidelity prototype was designed keeping in mind the feedback we received from users. Here are examples showing the flow of two tasks - buy single urban ticket and the lost card scenario. Since the lost card is a new feature, the users had to first be educated about the process. The user’s motivation is high. Hence, this section is more descriptive with details, while the buy single ticket was design as a purely intuitive experience.

ATM web app - buy single ticket
ATM web app - lost card

User Testing (App)

Based on the feedback from the user testing, we revised the layout.
Example 1: The ticket status info has been re-designed to give the user visual feedback that can be understood at a glance.
Example 2: To combat the issue of information overload, the actions were broken down into a clear step-by-step process that directs the user to one CTA and highlights one key piece of information.

ATM web app - chnages after user testing

The Final Output

ATM final UI

Other Projects

Armani

Oakley

Tuesdays