Web service
Train Booking Biletyplus
This service allows you to pick up and buy cheap train tickets for Russian Railways and international carriers. Train Booking Biletyplus provides current prices for long-distance trains.
Introducing
👉 I would like to share my experience and show part of the work I did in an IT company as a product designer.
The task was to develop a service for the purchase of railway tickets. You can buy a ticket both on the website (desktop version) and on mobile.
The service includes
Team
Product Manager,
1 frontend developer,
1 backend developer
& other key roles
Timeline
~ 2 years
My Role
UX/UI Designer
Platform
Figma
Problem & Solution
✔ It is not always convenient for users to go to the train station to buy a ticket. There is no longer any need to waste time and specially go to the ticket office in advance.
✔ When buying a ticket, it is difficult to understand where your seat is in the carriage. In our service, the user can select a specific seat, lower, upper or side shelf by clicking on the seat number on the graphic diagram of the car.
✔ When ordering a railway ticket online, the user receives its electronic version. The electronic ticket stores all the information about the trip. He can download an electronic ticket to his smartphone and present it to the conductor upon boarding or print it out.
✔ When booking tickets, the system automatically checks discounts for the specified destinations and whether the user fits this category.
✔ If the user has changed his mind about taking the train for some reason, he can easily make a refund in the user's personal account.
Process
The process includes
- • the creation of landing pages (the issuance of API results in a given direction, for example, Moscow – St. Petersburg)
- • filtering the issue at the user's request
- • the train page – booking form
- • booking confirmation page
- • payment page (card data entry)
- • successful payment page
- • personal account for order management
- • creating an internal admin panel for support (desktop version only)
- • creating a desktop and mobile version of all pages
Example: Part of the admin panel
Schemes of train cars
✔ A lot of work has been done to display the diagrams of train cars. To display the scheme of the car, you need to: create a framework of the scheme in Adobe Photoshop, add places and number them in the names of the layers (each element is a separate layer that has a specific name for developers). Next, you need to save the scheme using a script (plugin) that reads the coordinates of each element and assigns them to the name of each layer.
✔ Ready-made schemas are stored in directories on the server and there are a lot of them. Schemes are created manually and checked for a match on other services.
Example: ДОСС_СИДЯЧИЙ_2Ю(55С).psd
✔ Previously, we did not have car diagrams everywhere (not all were drawn), and seats were displayed sequentially in our system, but this view will not help determine which compartment your seat is in. We realized how important this is and our developers created an AI that draws similar schemes using analysis. This is a temporary solution until we draw up-to-date diagrams, which the system will automatically load.
System testing
Testing of the system took a lot of time
- • the relevance of the data on the pages
- • booking seats on domestic and international destinations with their own nuances
- • booking seats for children and adult passengers
- • correct application of tariffs (discounts)
- • validation when filling out the passenger card
- • payment testing
- • registration and login to the account
- • testing the functions of the personal account
- • testing the admin panel
Results
As a result, we have a powerful service that we are improving to this day. However, in the first months of the release of the service, the conversion to sale did not suit our team. Mostly traffic from mobile devices is 80+%. On the desktop, the conversion to sale was greater. We spent a lot of effort to find out the reasons for the low conversion rate. Since we spent all the available time testing the product – we didn't pay enough attention to the user experience.
👀 To improve the user experience, I spent a lot of time in the Webvisor service (Yandex.Metrica) to understand what users don't understand on the site and where to start improving. Some hypotheses have been put forward.
Example from Webvisor
📊 It was not enough to watch the users on the Webvisor. We have set up a sales funnel in Google Analytics and Yandex.Metrica. This helped us to understand at which stage (or page) users are leaving.
Example from Yandex.Metrica
So we realized that there was a large outflow on the booking page. On this page, people chose cars, tried to fill in the data in the passenger cards, but did not go to the booking confirmation page.
For example, to check what problems may arise when filling out the data card, we hung events using the Google Tag Manager. I created similar js-events in Yandex.Metrica to track events.
📑 We have compiled a list of improvements, the confirmation of which was shown by the numbers and user behavior in the Webvisor. The improvement of our service started with more important issues.
🔥 Now we have increased the conversion rate several times and continue to improve the product!
Conclusions
Some thoughts
- • There are no stupid users. There is an insufficiently user-friendly interface.
- • It is necessary to devote enough time to testing the interface.
- • Before you solve a problem, you need to determine whether it exists and how serious it is.
- • Your product must be several times better than competitors in order to convince users to switch to you.
Thank you so much
for your time!