Wireframing Skyscanner’s App

I’m here with another challange for my Ironhack journey, a fun one indeed.

On Skyscanner

“ Skyscanner is a metasearch engine and travel agency based in Edinburgh, Scotland and owned by Trip.com Group, the largest online travel agency in China. 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.

Compared to other travel metasearch engines, the website counts a greater share of millennials among its users. ”

Why Skyscanner?

The reason I chose this app was that I’m quite fond of it. In the last 5 years I’ve made 6–8 international flights and 8–10 domestic flights annually. And Skyscanner was always the number one app I went for. It’s neatly designed, very organized and always shows you the best possible flights/flight combinations.

What is wireframing?

“ Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added. ”

User flow

Instead of the classical user flow I’m very familiar with -selecting a flight- I wanted to challange myself and chose “booking a hotel” option. The user flow goes as below:

The user clicks the Hotel icon / Types the destination details / Selects a hotel of his liking / Selects the room type / Goes to the payment screen

Here is the user flow I chose in lo-fi:

And here is the prototype I created in Figma.