Exploring user flow in the Skyscanner mobile app
By: Kat Jg
Tags: User Flow, Interaction Design, Wireframing, Design

Background

Preparing for a UX Design Bootcamp, I was assigned a task to reverse a chosen app to a low-fidelity wireframe. The purpose of this exercise was to discover user flow step-by step and learn how to clearly communicate design ideas.

The app

Skyscanner is a travel-oriented website, visited by around 60 millions of people per month to find budget-friendly flights, hotels and car rentals. The website offers a variety of searching options, that can satisfy every traveller, providing them with many alternatives and attractive deals.

Why I’ve chosen Skyscanner

I decided to work on Skyscanner because I always use this website to plan my travels. I like the flexibility of search options that encourage me to explore destinations I wouldn’t think of myself. It mostly serves me to book a flight. I usually enter the Skyscanner on a laptop and have never opened their app before.

I was curious how they managed to give users a bunch of complex information about bookings and travel details, fitted in limited space of a mobile screen. I wanted to explore how the user flow looks like and what changes, compared to the website, were made in order to make the booking process as easy as possible, considering constraints mentioned above.

User flow

User flow I decided to reverse is the process of buying a flight ticket. My choice was influenced by the variety of input controls that this process consists of and by the complexity of actions that the user has to perform in order to book a ticket.

Home screen of the app shows three main options that the user can choose from — flights, hotels or car rentals. Below, there are also travel recommendations and updated prices of the most recent search. After selecting the option, the app redirects to the search screen, where all search parameters can be adjusted accordingly.

Search results are displayed in the next screen and include the most important information about possible connections. More details can be revealed by clicking on the specific flight. They are presented in a new screen together with a call-to-action button allowing the user to explore this option further and pick a ticket provider from the list. There are total service costs included, which makes the decision easier, because the user doesn’t have to check the price on external websites. In order to finalize the booking, the user needs to click on the provider, which results in redirection to their website.

Conclusion

It was a useful exercise that gave me a lot of insight into booking process that I usually perform without further analysis. This time I followed every step carefully and paid attention to all of the small details that build the entire experience.

Reversing an app to a low-fidelity wireframe requires from the designer to determine what content should be removed from the app, as they are not relevant for the user flow. In case of Skyscanner app, I decided to replace all the marketing-related content with default text, but I left section titles and basic travel details, given their importance in understanding the flow. I tried to keep it simple, using only basic colors that were necessary in order to differentiate the components.

This exercise helped me to take a closer look at the purchasing process step by step and notice some features, of which I wasn’t aware before. I also realised which elements have more aesthetic function, which ones serve marketing purposes and which ones are strictly functional. Low-fidelity wireframe gave me a clear vision on how the app skeleton looks like and what functions are needed to be considered in order to create a positive experience.

Link to interactive prototype:

https://invis.io/EDTEF7YGF9X