Jul 23, 2019
UI/UX Case Study: Designing a Flight Seach App
Introduction
We all love traveling, don’t we? It is summertime, the perfect time to plan your next memorable trip, and since we are in 2019. you are most likely to use an app to help you find the best prices and locations. Being in that situation currently, I decided to make a complete app for my favorite flight search website — Megabon.
Quick analysis
In the aero industry, there are many big names. They invest a lot of money on their websites and apps, and they are really good in some terms. But there are problems which I wanted to try to solve with this project. For an average user, their UX can be a bit over the top, more complex than it should. My parents and many of my friends requested help from me whenever they wanted to search for a flight or book it. That’s why my main goal was to make the app’s flow as simple as possible, covered with beautiful and inspiring UI.
Wireframing
Before doing actual UI and making things look stunning, we need wireframing. Before that, I could have gone with sketching but I had most of the interface already in my head so I skipped that step and went straight to Xd.
Scenarios
Heading towards UX Map, I realized that I need to focus on one problem that almost all of the competitors have: not paying attention to different user’s scenarios. What I mean is the lack of ability to search for flights without a destination with only dates, and with the destination without dates. Most of them offer only searching with full info, which isn’t really handy. That’s where Megabon stands out from competitors.
UX Map
As you might conclude from the picture, the UX map is basically predicting all scenarios when a user is using the product. Almost every time we design an app or a website, we need UX Map (unless it’s really, really simple one). It is extremely important when doing a bigger project in order to keep you well organized. I found it too hard to keep track of all screens and what I miss until I did UX map.
UI — Final Results
Here it is — the final result. I went for a very bright and user-friendly interface. Megabon’s color is blue, and that’s why the background is a gentle blue gradient. Other colors in color palette are yellow and reddish, which give a great contrast. Here is the palette:
That’s it, guys. It was a lot of fun creating this app and making a full working prototype. If you want to check it out, here is the link for app prototype. Thanks for reading!
