Travelata.ru – tour card
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
One of the important requests from users is to add photos and room descriptions to the tour and checkout pages and to change the visual design of the block.
Solution
Changing the visual display of the card, adding indicators of the parameters included in the tour, as well as adding photos and a description of the number.
Impact
After updating the design, users began to miss information about the room and the tour less often by 20%.
The first design version
The first design version was developed by the Junior Designer, it had several problems: insufficient detailing of information on the tour, poor layout of blocks, no visual hierarchy of information, unfinished state of the card with minimum and maximum information sizes.
Updated design — second version
In the updated design version the tour card has changed a lot. On the left is the main photo of the hotel and below the photo of the room, then the accordion with more detailed information about the hotel. Next is a block with information about the hotel, rating, indicator "few places", star rating or hotel type, hotel name, as well as the previous hotel name, location with the ability to open a map, as well as information about the room. Unfortunately, technically it wasn’t possible to display any description on the card, so only the hotel name and a button on the pop up to view additional information remained. On the right side of the card there are tour parameters: tour operator, dates and number of nights, number of tourists, board, etc.
Updated design — third version
After the effectiveness of the previously developed design was proven, it was time to add further improvements. In the later version, the design was already built using a grid and standardized margin and paddings, and there was also a decrease in the number of fonts and styles. At the very beginning of the page, there has been added a search option for a specific room and tour operator to simplify user interaction. Plus, this solution allowed the marketing team to be more flexible with the use of promotional links to hotels — now when the link "burns out", the user can always customize the search according to the parameters' user needs.

The block on the right has also been fully worked out, especially the part with visas, since most popular destinations for Russians don’t require a visa.
Room description pop-up
The pop-up with the room description has been completely redesigned. Medium-sized photos were added, the description was divided into logical blocks — a standardized name, a name from the tour operator, a short description of the room, number of rooms and area, type of bed, type, what amenities and services are available.
States
The main work was to think over all the states of the tour card. It was necessary to take into account the fact that some information may be missing due to not receiving a request from the backend and not transmitting information from the tour operator.
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.