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.
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
Applying Fogg’s Behavior Model to the tasks
Information Architecture
The Information Architecture was built based on the results of the card sorting conducted.
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.
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.
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.
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.
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.
The Final Output
