Travelata.ru – flights
online tours store
Travelata.ru is a tour aggregator. The service allows you to find and book online tours from all verified tour operators. Users select the search parameters and receive a list of hotels, and then a list of rooms and tour operators that provide these tours.
CLIENT
Travelata.ru

ROLE
Product Designer

TEAM
Product Manager,
Junior Designer,
QA specialists, iOS & Andorid, Front-end, Backend Developers
Challenge
Users don’t notice the city of departure and buy tours with the wrong city of departure, which subsequently forces them to cancel the tour and incur financial losses. There were problems with receiving and displaying new data on baggage & flights information in the ticket card.
Solution
Change information display hierarchies, add information on flights and baggage.
Impact
The number of support calls decreased by 13% after updating the design of the flight card.
Old design
In the old design, there were quite a few problems, from the inverted headings "departure" and "return", to the display of information in general. Initially, the main stress was made on the departure time, but with the expansion of franchise offices across the country, more tourists began to buy tours from other regions besides the central ones (= different time-zones in Russia).
The first version of the updated design
The first and critical step was to change the information hierarchy, in this case, the city of departure. We began with the button for the selected flight. Now it shows the total amount of the tour due to the selected flight (sometimes you have to pay extra for flights). We also developed a banner at the beginning of the page, which informed the user about the city of departure. This redesign was done by the Junior Designer under my supervision.
The second version
After the first iteration, it became clear that during this time more information on flights appeared in the "inventory" part of the team. We were also able to receive a flight number and a flight type. In the new design, it was important to think over all possible cases: whether there is an airline logo or not, whether we know the type of flight or not, what is the full name of the departure and arrival airports, how much time the user will spend travelling, how many transfers he will have, whether there is luggage space or not. All these requirements were taken into account and reflected in the new design of the flight card.
The third version (in backlog)
In the third update of the card, a decision was made to simplify the visual design and make it more modern. The photo has been reduced in size — this step was done solely to give the card "more air". Also in the future, a functionality is planned that allows you to enlarge photos directly on the page with the results.
The Turhunter icon has been changed to a more appropriate one, as before, users still thought they were adding the hotel to their favorites, and not following the price change.

The "Add to compare" link was designed nearby — this functionality was added after additional usability research, as users would like to collect their favorite hotels in one place and then decide on the page which hotel is preferable for them.
It was decided to remove the price from the button based on the additional research done on competitors and also on usability research, during which it was found that the price is very hard to perceive on an orange button than on a white background.
Transfers
The previous version of the design of flights with transfers was made in the form of a pop-over. This version was incomprehensible to the user, so it was decided to make some significant changes: display all flights from point A to point B, flight time, travel time, luggage space, airline, flight type and number, show the type of transfer (waiting inside the airport or changing the airport).
Luggage and carry-on luggage
For luggage and hand luggage, I developed a mini guide for displaying information in a tooltip when hovering over icons. The guide was developed on the basis of competitive analysis and the information we receive, namely: the number of luggage pieces, luggage weight, luggage size for three values or each value separately, the number of flights. Luggage and hand luggage are shown per person.
Mobile platforms
Mobile platforms were also changed: iOS, Android and MobWeb. On all three platforms, the interface is practically the same in order to make it more convenient and easier for the user to perceive information while changing platforms.
UI changes
The previous version also had a lot of problems in terms of development and design. In the new version, the number of fonts and styles has decreased, the blocks are built on a grid, and the margin and paddings have been applied to a new logic.