Skyscanner App: Visualizing the Wireframe

Khushbu Rathod
2 min readJun 4, 2023

This article draws inspiration from the pre-work conducted at Ironhack Academy’s UX/UI Design Bootcamp.

For the second challenge of Ironhack Institute’s prework, I was tasked with crafting a wireframe for an application I frequently use. Being an avid traveler, Skyscanner emerged as the perfect choice for me.

Skyscanner is a metasearch engine and travel agency based in Edinburgh, Scotland. The site is available in over 30 languages and is used by 100 million people per month. The company lets people research and book travel options for their trips, including flights, hotels and car hire.

There are multiple compelling reasons behind choosing the Skyscanner app. It encompasses a multitude of excellent features and boasts a visually pleasing user interface.

Firstly, it consolidates various options by offering the ability to search for flights, hotels, and car rentals all in one place. This eliminates the need to browse multiple websites when planning your holiday.

Secondly, it provides the convenience of searching for flights without specifying a destination. It presents you with comprehensive details, including costs, and organizes the information in a date-wise manner. You can easily assess the flight prices for specific dates. Overall, Skyscanner is an outstanding application that greatly facilitates holiday planning.

When creating the wireframe for the app, I opted for the functionality to search for flights from a specific origin (Destination A) to a designated destination (Destination B) within a particular timeframe.

User-flow to search for Flights

Screen 1 serves as the initial landing screen upon opening the mobile app. To initiate a flight search, users can tap on the ‘Flights’ option, which transitions them to Screen 2. On Screen 2, users can input their origin and destination, as well as select their desired travel dates. Once all the necessary details are entered, the app navigates to Screen 6, where a comprehensive list of available flight options is displayed, along with their respective costs. This empowers users to select the most suitable option at their preferred price point. Subsequently, the app redirects users to the website of the chosen airline to proceed with the booking process.

To see the prototype of the User-flow, you can click here.

The process of creating the wireframe for the app that I’ve been using extensively was truly exhilarating. Ironhack’s wireframing kit proved to be incredibly valuable and convenient throughout the process. I’m eagerly anticipating the upcoming bootcamp, as it presents an invaluable opportunity to delve into extensive learning and acquire in-depth knowledge.

--

--