Ironhack’s Prework Challenge 2: Skyscanner Wireframing

In the second Ironhack‘s Prework challenge for the UX/UI bootcamp, we were asked to ‘reverse engineer’ Interaction Design and User Flow of one popular app. For this task I have chosen Skyscanner app.

Why Skyscanner?

Skyscanner is the travel search site and app for savvy travellers who use it to find and book great deals on flights, hotels and car rentals.

I very much enjoy travelling and despite that lately I use the app way less than before (because of the current COVID-19 situation), sometimes I still turn Skyscanner on to plan my dream getaways.

Besides its smooth interface and intuitive design, I particularly like a couple of features of the app which make me want to continue using it. One of them is the monthly price charts feature. It allows you to immediately decide the best price and date within a certain time frame without having to click on each date. Another great feature is Explore Everywhere. Skyscanner allows you to explore flights before you even set your mind on where you would like to fly to!

For this task I decided to use a design platform Figma.

Task Analysis

Wireframes

Wireframe is a two-dimensional skeletal outline of a webpage or an app which gives a simple visual representation of how it will be once designed.

I decided to focus on the user flow from Home screen Explore Everywhere function to checking offers of the flights. Below you can see my low-fi user flow.

Lo-fi wireframes — Home screen to Check Offers user flow

Screen#1 The app will open to the home screen from where the user clicks on Explore Everywhere button at the top-left of the screen to find the best destination. #2 The screen with a list of suggested countries and estimated lowest prices next to each one opens up. #3 After selecting Ireland for example, the user is presented with the top flight deals to various cities of the selected location #4 Next, after selecting Dublin the user is taken to the top deals list with dates and price combinations to choose from.#5 The user chooses the first deal and now they can see a list of flights from where they can select the preferable airline(s), time and price combination. #6 The user clicks on the preferable flight and now they have an option to view the details of the flight or scroll down for the ticket provider list. They choose to scroll down and click on Choose a provider button #7 A list of providers opens up where the user is able to select the best option based on the ratings and prices.

Originals
Wireframes created using Figma

Final Words

Since it was my first-time designing wireframes in Figma, at first, I found myself stuck on a couple of things. However, after doing some research I managed to work it out in the end. Overall, I really enjoyed using Figma because of how easy it was to use.

Despite that the main idea of wireframes is a simple representation, I learned that the whole process still requires quite meticulous work. Hopefully with practice and having learned new tricks I will be able to do it much quicker in the future. Looking forward to that :)

Please check my prototype from the link below. Any tips are welcome!

Prototype

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store