Ironhack PreWork — Skyscanner

Challenge 3: Usability Testing and Site Re-design

Check out these nice illustrations on https://oioi.rocks/

In the following study, I follow step by step my process for the Testing and Re-Design of the renowned travel mobile app Skyscanner.

Hope you’ll find it interesting as I did! :)

User Type & Scenario

User Type

For this challenge, I decided to take into consideration the experience of a user persona that I’m pretty familiar with:

Worldtrotter, Backpacker — 18–38 y/o (1)

You’ve decided to finally go visit Christ the Redeemer in Brazil,
which has been sitting in your dreams for a long time now.
You don’t have a long time to plan but also you don’t need it.
You’ll be travelling in 6 months and are open to almost any possibility
but have a budget constraint. You are price-cautious and prefer experiences where you have a chance to meet people and make acquaintances while enjoying the wonder together. You are not picky and you can accommodate the most affordable, adventurous, genuine experience.

Researching my user persona, through reading articles and directly speaking with my acquaintances I found out some interesting points that helped me greatly in the next steps.

In particular:

Smartphone statistics indicate that they’re the primary mode of technology that millennial travellers use to interact with the digital world. It’s how they get their information, as well as how they plan their entire trip.

An analysis of smartphone statistics shows that 86% aren’t happy with their mobile travel booking experience. Spend some time polishing your app and website, and enjoy the increased traffic and improved customer loyalty.

Millennials are susceptible to authenticity. They don’t want false-sounding advertising, stock photos of beautiful beaches, or misleading information. Instead, they want to see an authentic experience.

Taken from: https://www.stratosjets.com/blog/millennial-travel-statistics/

This was confirmed by my previous conversations with many backpackers (I worked in the travel industry for the past 4 years) with a passion for adventure and spontaneous travelling way since many confirmed that what they look for is a simple, direct, clean experience while planning.

They know already what to look for, and enjoy easy and transparent access to information to keep their flow constant and intact.

One of the impressive New 7 Wonders: Christ the Redeemer (Rio de Janeiro, Brazil)

Scenario Details

I proceeded with defining further details about my scenario:

• Destination:
  Christ the Redeemer
• Nearest / Airport:
  Rio de Janeiro, Brazil
• Currency and exchange from your own currency:
  Real (1 to 0,13 EUR)
• Vaccinations:
  Yellow Fever, Rabies, Routine Vaccines, Polio, Hepatitis A/B, Typhoid
• Visa:
  Passport with 6 months of validity, duration of 30 days,
  confirmed flight ticket
• Wardrobe recommendations:
  Light Clothes, Windbreaker, Sneakers & beach clothing,
• Day needed to visit attraction:
  4 days (1 for arrival, 1 for the visit, 1 for resting, 1 for planning the next days) — keeping it spontaneous and adventurous.

With all this in mind, I then proceeded with choosing the right app for my analysis.

Benchmarking

Skyscanner is a metasearch engine and travel agency based in Edinburgh, Scotland, was born in 2001.

For this challenge, we have been given the possibility to choose between 4 mobile apps:

Kayak, Skyscanner, TripAdvisor, Hopper.

I based my benchmarking process on Jakob Nielsen’s 10 usability heuristic principles.

Even being all really good and performative apps, I eventually decided to utilise Skyscanner for this study, for the following reasons:

• uses a really clear and familiar language;
• the interface is essential and minimalistic but with an appealing and modern look;
• it offers a coherent extensive range of information and documentation;
• it has numerous filtering options, making the research as customisable as possible;
• it performs an extremely extensive meta-search,
• it has many parallel and additional function, unblockable through the creation of an account,
• it was developed being a cornerstone of cheap and DIY travel planning.

Usability Test

Defining the task

Check out these nice illustrations on https://oioi.rocks/

Before starting the test, keeping in mind all the useful information that I gathered I defined two tasks that my interviewed user was going to perform, one after the other.

Task A (Flight Booking):

1. Open the app
2. Search for Flights
3. Berlin-Rio de Janeiro / Round Trip
4. Budget: max 480€
5. Travel length: 12–15 days (user decision)
6. Month: September

Task B (Accommodation Booking):

1. Switch to Accommodation search
2. Book a Hostel
3. Reasonably Cheap
4. As close as possible to Christ the Redeemer
5. Only for the first 4 days (needed for visiting the attraction)

If you are wondering, I decided to keep the task as simple as possible.
The user is organising a trip 6 months ahead, so the interest is only on organising the basic part of the travel — flight & accommodation to ensure the visit at the wonder.

Usability Test

Before we start

Being my first experience with usability product testing, I chose to moderate directly these interviews, to absorb as much information as possible and have more insights into the process.

I was recording the screen from their phone and recording the audio in the meanwhile, for me to re-analyse the interview with calm and don’t miss any detail! :)

To be honest, the first interview has been a bit of a mess, but luckily I corrected it while doing it and I finally found the right way to present and moderate the session.

One important thing that I noticed, is that taking notes on paper during the interview distracts and breaks the flow of the user, therefore my decision to record the session.

In future, I will definitely be eager to a 3-persons moderated interview method (interviewee, moderator, note-taker moderator).

5 Seconds Test

Skyscanner Home Page

I gave the user 5 seconds to look at the home page and then asked the following questions:

•What did you see?
•Was the function of the app clear?
•Where would you search for a flight?

The recurring feedback was that they were fully focused on the colourful and centred Covid-19 travel.

Icons and other buttons were seen but not recognised or at least, no attention was focused.
On a first approach, they would have clicked the map to plan the travel (n.b. it just shows the actual world Corona travel regulations).

Main Pain Points & Proposed Solutions

The interviews and feedbacks have been diverse and all interesting.

Some phrases that stroke me were:

“ The icons are not so noticeable, maybe too grey?”
“Is it searching or should I try to give the ok?”

And also a behaviour that I noticed was that the Bookmark option indicated with a Heart button (where you can save and consult your finding afterwards) has been not only ignored but didn’t encourage any kind of interaction.

The above are really interesting cue points for further analysis, but in this case study, I decided to focus on the most structural and basis functions that have to be reviewed to give a base positive experience for the user.

Home Screen 🏠

This is where I started to put on paper my solutions.

Issue #1

It tends to be perceived as confusing and superfluous:

• users clicked on the map to book the flights and accommodation to discover that it only shows the current regulation.
  It seemed redundant and bothersome, having to perform additional actions from the home page to perform the initially expected app function.

The two pages have been combined in one Home.

Solution

• I decided to combine functions of the two pages in a single Home screen, and to reserve a distinct section selectable via the footer Nav menu for the Explore function (for info and spontaneous planning).
• Also, while trying to book a Hostel (or potentially, any other kind of accommodation other than Hotels) was mislead by the Icon “Hotels” —
  I decided to use a more generic and wide term to support the button: “Stays”

Flights Screen 🛬

Issue #2

• While choosing the dates on the calendar, there is no way to see what is the price range making it virtually impossible to make a quick and uncomplicated decision when having budget restrictions.

Some additional features have been added to the original Calendar.

Solution

• I decided to include a simple colour/shape-based system for the Calendar to see basic price range information (cheap, mid, expensive) while scrolling through the months and days.
• Besides, if the user keeps pressing on to date, it will be shown the actual price range based on the results.

Issue #3

• “Filters”, “Passengers” are not perceived as clickable buttons, the “Sort by” function is not clearly stated and this breaks the user flow unnecessarily.

The interface has been re-organised to give enough focus to every search option.

Solution

As previously mentioned, simple and effective filtering is a basic function for the proper use of meta-search apps finding hundreds of result peruse.

• Therefore, I re-designed the buttons name, look, order and position, to suggest a more recognisable, ease-to-use Top to Bottom interaction.

Issue#4

• The Filters screen uses a Vertical Scrolling Menu.
  I noticed that this doesn’t help the ease of use, and especially the last filters at the bottom (they require the full scrolling) of the menu were ignored.
• Besides, setting the filters required to open a new screen — can be avoided! :)

We can summarise the double-step filter action, in a simple, better-organised single screen.

Solution

• I decided to use a more compact menu view, where more options are visualised and clicking on them will open a pop-up where they can be set, when closed the details will be shown under the button to give instant feedback and a clear overview of the filters.

Hotels Screen 🏨

A Lo-Fi sketch for the solutions related to the newly called “Stays” section!

Issue #5

• Users have complained an initial the lack of “Sort”, “Filters” because they’re actually disappearing while scrolling and not so visible being at the bottom of the interface (often covered by the thumb while scrolling
• The “Map” Icon, was seen but not immediately recognised as such.

Solution

• Therefore, I re-organised the layout to have all the search option on the top part (also, keeping in mind consistency with the Flights screen).
• I separated Sort By and Filters functions to avoid misuse and user error.
• I decided to use a more recognisable Map icon button and to keep it as reachable as possible.
• The users can set up the filters and then if necessary, can access the map to check the filtered results.

Issue #6

• Destination Search screen: the users didn’t look immediately for the exact destination (a precise attraction better than the city) because they thought wasn’t an available functionality.
  Instead, they proceeded with looking for the city and then checking in the map the closest ones.

We should make good use of this nice shortcut!

An input suggestion was missing on this screen — the user was using just a limited portion of it.

Solution

• I thought simply to add a more specific placeholder, inviting to submit certain details and to add a Map research function — to maximise and encourage customisation and control of the Stays research process.

Issue #7

• Filters Screen: I noticed similar feedbacks to the Flights section.

Filtering should be a more immediate and easy-to-use function.

Solution

• After dividing the Sort By and Filters options, I decided to use a similar Menu layout to encourage and make the filters overview and modification more accessible and appealing.
  I emphasize the Accommodation type filter since before was at the very end of the scroll and it is actually a really useful feature.

❗️Extra ❗️

• When switching between tasks, users noticed that wasn’t possible to access the Hotels section without coming back to the home page.

This was found slightly annoying and not user friendly.

Solution

• As you can notice, to keep consistency and to improve the accessibility between the two sections I made the top Navigation bar available also in the Flight Section.

Prototyping

I found it necessary (and to be honest, I kind of like it!) also to build a small prototype to support and test my proposed solutions.

I added some screens to the previous wireframes to make the prototype interaction likely and function experience.

You can see them here below:

And as usual, please, play around with my prototype and let me know what you think about it!

Conclusion

This has been my last challenge for the Bootcamp pre-work and has been really interesting to see how the previous ones have affected and influenced my process on this one.

I noticed that using an established and clear process while researching, interview, testing and iterating it’s the key to a successful result.

It only comes with extensive and careful research beforehand — to have a clear overview and knowledge of who and what we’re going to interview/test.

Also because, for example, while interviewing, the user really senses your confidence and calm on conducting the research and feels more eager to share deeper insights about the experience.

Also, having an informal conversation about it after the actual session is really useful and can unveil interesting details.

I felt like I could have adjusted many things on the app, and the challenge has been also to prioritise and choose the right ones to analyse.

Let me know below what did you think about the study and if you agree with my proposed solutions!