The task was to redesign the trenitalia website – infamous for its lack of usability and somewhat antiquated design. In order to narrow this undertaking to a more feasible scope for five people, we set the focus on the trip searching and booking process – the main task on the website.
New UI proposal
The project went through all the usual phases: Starting at research and information gathering, to analysis and conception, ending with a first design. Our approach was to tackle the biggest flaws and problems first, come up with a design closely aligning to the current CI as a first intermediary step. Further steps would then be necessary to transform the whole site.
Research and Analysis
Based on interviews and preliminary research, we created four personas to cover the whole spectrum of trenitalia customers. From the economically-minded student to the transiting worker we had a broad spectrum of experiences to draw our tasks and scenarios from.
A heuristic analysis uncovered the biggest pain-points and problems of the website, as well the biggest opportunities for improvement. Laying out the information architecture showed further problems in the overall structure – in many cases the user flow would branch off into dead-ends if the user seeks further information. In other cases overabundance of information and choices would paralyze the user.
Since a company like trenitalia does not exist in a vacuum, comparing the process with the competition and establishing benchmarks is a must.
Re-Design
The first step of the redesign was to de-clutter and streamline the whole interface. Getting rid of unnecessary drop-shadows, design elements and effects. By creating a visual hierarchy through the bright white primary text fields on the solid red background, the user's eyes are drawn to the most important part of the query. The other fields are reduced in importance, thereby visually calming the form making it instantly comprehensible.
After submitting the form, the query condenses to a natural-language version. Still editable, by clicking on the form elements, it provides a more natural summary of the trip.
The core design is based on a two column layout. Train and trip information is displayed on the left while choices are displayed on the right. That way the content on the left stays consistent throughout the process.
Reorganizing the structure within the process reduces the amount of choices that have to be made at any given moment. That way users are not overburdened and can make better decisions.
On the go
Responsive design is essential for a travel application. Naturally, the two column layout is a perfect fit for mobile use. Only requiring minimal adjustments it works as effortlessly as the desktop version.
