ATM WEB APP is a group project, the brand asked to create new responsive Web App For ATM Milano, including new Services with a strong focus on User Experience.

The Project started with a deep analisys on ATM vending machines.

We observe the customer behavior, interview some users, create personas and from their inputs, we simplify the structure of the whole purchasing system.

The last step of the project was to create a responsive Web App usign the features of desktop and mobile phones (such as camera and geolocalisation) to offer a better service for customers.

Home add: language, map, a short cut for purchase an urban ticket.

Main Menu add: back button, navigation, main buttons tickets/charge travel card (sizes-colors-descriptions).

Ticket Menu (same fixed template); One way (same interface) add: interactive map (area section), active info.

Ticket Purchase add: big title and call to action, payment (countdown), info during printing.

Travel card add: ATM/trenord for a week, month or year.


Prototype: Mobile

With our research, we find out that the majority of people search for €1,50 ticket. For this reason it has been introduced a new function that, saving clicks, allows users to purchase the urban ticket very fast from the main menu of the App. Since this is a new feature and customers have to get used to it, the App has a brief description next to the call to action to prevent any error.

One Way

The template is fixed. There are no differences between city areas and it's added the possibility to save the ticket for later usage.

Travel Card

This particular funtion represented a problem for mobile users that have to fill in a crowded form, to make it easier, exploiting the features of a common smartphone, it has been introduced the possibility to scan card's data with the camera; this is a way, together with inline validation, to prevent errors. Another problem occurred while choosing between a list of contracts that in the mobile was too crowded to tap the one that suites for the users needs. For this reason it has been added a shortcut to recharge the last contract the user did (which is quite often the choice users selects), giving a clear resume and the possibility to find a totem where they can activate the card.

Map Tool

Will be always visible to prevent errors. It suggests the user to reach any place, speeding up the ticket purchase. The search bar helps increasing the efficiency of the service. It also give the possibility to save the ticket and use it when it is necessary. Finally the Login comes after the Map Tool to allow to use the Web App also just for quick infos, giving immediate feedback to the user.

ATM Website

Prototype: Desktop