Italo Treno
For this case study, we had to evaluate the usability of a mobile app or website from our company of choice and implement solutions.
Role: UX Designer / UX Researcher
Timeline: 4 Days
Tools: Figma, Invision
Team Members: Anabel Fernandez, Stephanie Gysler, Alexa Hare
As part of our design challenge at Emerge Technology, our team decided to work with Italo Treno to evaluate the usability of their existing mobile app. Italo Treno is a company of high-speed trains that connects a total of 13 major Italian cities. They have 4 seat classes that include Smart, Comfort, Prima, and Club Executive.
Italo Treno is the official Italo app. It gives users the ability to perform transactions to acquire high-speed train tickets. Users can also create personal accounts that allow them to subscribe to the Italo Piu loyalty program. In addition, the app allows them to search and track trains in real-time.
Before our analysis of the app, we looked over user reviews and saw that the app received an overall 2.5/5 rating. Our hope was to provide usability evaluations to help justify reasons to invest in better user experiences.
The first thing we did was map out the current task flow a user goes through in order to book a ticket.
It is evident from the existing Task Selection Map that users are led through several different screens, and inputs in order to search and buy tickets. In shorter words, THERE ARE WAY TOO MANY SCREENS!
We summarized the usability issues from our heuristics analysis and ranked them in order of severity. They are as follows:
1. Flexibility and efficiency of use
2. Match between the real world and system
3. Aesthetic and minimalist design
4. Visibility of systems
5. Error prevention
We plotted the usability issues on this matrix to identify which solutions to address first.
We wanted to prioritize changes that were relatively easy to make and had a high user value.
Our goals were to
Implement solutions to the most pressing usability issues
Work within the existing brand identity for consistency and recognizability
Simplify the task flow for an improved user experience
Part 2
In part 2 of our case study, we implemented changes to Italo’s user flow. By doing this we simplified the task of ticket booking for an improved user experience. Pictured above is the current flow of Italo’s mobile app.
View prototype of current user experience.
View prototype of new user experience
The changes we implemented are as follows:
On the sign-in page, there is cluttered informational text that is irrelevant and reduces readability. To limit confusion, we decided to create a familiar standard login screen where users can either log in to their account or create an account. This change also disallows users to continue as a guest which will prevent them from entering an incorrect email.
On the homepage screen the two icons for “find ticket” and “leave now” are the same, making it difficult to distinguish. Users are easily misled by the double images and functions of the search icons. When either of the magnifying icons is pressed, the user is led to the same exact page. We improved the navigation by increasing icon size and deleting repeated icons.
On the departure and arrival screens in order to input a departure and arrival station users HAVE to select and scroll from a long list of stations. The cognitive load is high because users are led to several different screens to complete simple actions. In our version, we provided users the opportunity to input text and have the search option load a list of options in alphabetical order.
On the passenger selection page, we made all types of passenger options as well as criteria visible on a single page for consistency. We also made it apparent to the user which page they are on at any given moment in the process with a heading and a back button for navigation.
On the search/ date and time screens, we changed some of the language to be more familiar to native english speakers. We used "point of departure and arrival" to label the stations and switched "add backward" to a large icon that allows users to add a return if need be. This helps make the screen feel less crowded. We also added a calendar wheel to increase the usability of the calendar function.
On time table/ train selection screen we removed all duplicate and unnecessary information so that the main focus would be the important aspects of the page. In this example, Roma has two terminals. We highlighted these terminals to draw the user's attention to select the correct option.
On the invoicing screen we removed unnecessary check-boxes like "natural person" and "legal person". We also chose to auto-populate the contact information for the passenger from their sign-in/sign-up account to eliminate the possibility of incorrect data entry.
On the payment screen, we minimized and streamlined the page by removing overpowering icons, changing the currency, and outdated payment method options.
On the confirmation screen, we removed irrelevant information such as billing request. This information should automatically be sent to the user's email. We also added a QR ticket code that will allow the user to easily get their ticket scanned when boarding the train.
Key Learnings
Changes can be made to improve the function of a company's website or application without rebranding
It's helpful to begin by defining design constraints while designing as a team.
A UI Library is essential when working with a brand that has a defined image
Communication is the most important part of teamwork
Thank you for reading this case study !
