UX/UI Case Study: Designing the Belavia Airline Mobile App
My name is Maria, I’m a product designer from Minsk. The stars aligned, and the beginning of my design education at Wannabelike course coincided with the preparation for the workation in India. When buying a Minsk-Delhi ticket from Belavia, I immediately came up with the idea of the project: the design of a new application for the Belarusian airline. And here we go!
Context
In August 2023, the Belarusian airline Belavia launched a direct flight from Minsk to Delhi. Instantly, my friends and I decided to buy tickets and arrange remote work in India for a couple of months. I had never flown with Belavia before, and when the time to book a flight came, I found that only the web version of the service was available. There was no mobile app. In 2023. For the only airline of Belarus. Can you imagine?
That’s how this project happened: I wanted to show you what the Belavia service might look like on our phones. The goal was to review the web booking experience and recreate it in a new mobile app.
Research
The work on the project began with competitor analysis and qualitative research. The latter required eight in-depth interviews. They allowed me to formulate hypotheses on how to make the mobile flight booking experience simple, clear, and convenient.
Pains
During the interview, my objective was to learn the difficulties users face when booking flights and managing bookings. It was also important for me to ask how they solved these problems. Respondents helped highlight the key inconveniences:
In addition, I made some interesting observations:
- Airline mobile applications are much less trusted than their websites. Users feel that the phone screen displays less information, which affects their sense of security: we are afraid of missing something important. For me, this was a revelation because, generally, using a mobile app is much more convenient — you can quickly change or refund a ticket, track the status of your booking on the way to the airport, and open a boarding pass on your phone. It’s important to provide users with all the necessary information to ensure the feeling of safety in the app.
- It scares people when things are unclear. Users don’t know what to expect if they misclick. That’s why it’s vital for the user’s journey to be simple and clear.
- Users need to feel that everything is under control: when essential information is easily accessible, when they can promptly get answers to their questions, and track the status of their booking. Belavia should show support and care.
What I suggest
Studying the Belavia website, competitor and user pains analysis became the foundation for the UX update and the introduction of new features. I suggest:
Values, mission, vision, metaphor
The research led me to the next stage — defining the values, mission, vision, and visual metaphor of the new Belavia.
I really wanted the process of searching and buying tickets to require minimum time and effort, booking management to be easy and transparent with the tips and customer support available.
I decided that the Belavia app should embody the following values: simplicity, accessibility, care, and control. Then, I defined my mission: to create a mobile app design with improved UX and updated UI. I envisioned Belavia as a pocket-sized flight assistant.
Based on the values, I formulated a visual metaphor: clear way to anywhere.
Structure
To make the way truly clear, I identified the key user interaction scenarios and the information structure for them. After that, I started working on no less important stage — wireframes creation.
Belavia mobile app design
Now that all the UX work is done, we finally move on to the UI!
Search
The flight search page offers users the essential features: search with recent queries, hot tickets, popular destinations, and nothing more.
Now, the calendar shows only available dates with the minimum ticket price indicated. At the destination selection stage, you can choose not only the previous query but also ‘Anywhere’ as the destination.
The results page allows users to quickly edit the search, sort the results, easily view flights and their prices for adjacent dates, as well as subscribe to price change notifications.
Booking
The booking process starts with selecting a plan. Here, it was important to provide a clear and concise description of the plans.
The most critical part of the project is the booking process. Unlike the web UX, all booking steps are placed on one screen: the steps open in modals, which makes it possible to change data while remaining on the same page. This solution allows users to see all the information about the upcoming flight in one place and significantly speeds up the ticket purchase process.
As I mentioned earlier, one of the values of the new app is care. So now, when entering personal data, Belavia suggests the following:
- Check your passport and verify the data.
- Double-check the data, as in case of a mistake, you will need to pay.
- If you don’t want to enter the data, choose from saved passengers or scan your passport.
Cool? Yeah, I think so!
When the personal data is successfully entered, the user can not only select a seat but also add baggage or specify food preferences.
Now, when all steps are completed and the booking is nearly finished, let’s once again review the convenience of the one-page booking process: you can quickly review the entered information and, if necessary, make changes. Besides, there is now a separate modal window explaining the terms of the loyalty program and providing a link to more detailed information about it.
The flight is booked! It was quick, wasn’t it?
On the confirmation page, you can add the flight to your calendar, download the itinerary, and also go to the booking management page.
Managing Booking
Control remains in our hands. The ‘My trips’ section allows users to:
- Quickly track how many days are left until the flight.
- Manage the booking.
- Open the boarding pass.
- Add other services.
The air travel timeline assists in many ways:
- To understand how soon the flight is.
- To purchase additional services online.
- To get reminders of next steps (for example, that it’s time to check in online).
- To receive the instructions on how to get to the airport and find the gate.
Now we are not afraid to get lost!
While it’s possible to download the boarding pass in advance, it’s much more convenient to have it in the app and be able to open it at any time, beautiful as it is.
And finally, the personal account allows users to manage profile data, view notifications, track price changes for selected flights, contact customer support, participate in the loyalty program, and much more.
We found a flight, bought a ticket, and tracked the booking status. The new design of Belavia ensures a much more comfortable and quick path than its web version. Hot tickets, a calendar with prices, search modification, and the ‘Anywhere’ direction option allow users to book a flight in a matter of minutes. The ticket purchasing process no longer seems complicated or scary: filling in, checking, and changing data can be done on one page. In addition, Belavia supports users up until the flight, reminding them of the remaining steps and offering assistance in trip preparation.
I love flying, and I love to book my trips easily and hustle-free. The Belavia mobile app design ensures the way is clear to anywhere.
Namaste!
