UX Design Challenge 3: Usability Evaluation and Site Redesign
By: Brigitte Ng
Tags: Travel, UX, Usability, Skyscanner

Introduction

My third UX task (wow we’re on a roll here!) was to evaluate the usability of a popular travel app and redesign it based on user feedback. For this task, I chose the user group of people aged 20–40 planning a trip with their friends, and for these users I chose the destination Machu Picchu in Cusco, Peru. It is a spectacular experience that includes a multi-day hike on the Inca Trail and an opportunity to see the stunning sunrise from the peak. The length of the trip would be roughly 2 weeks, beginning in September after the peak tourist season ends.

The key needs of this user group:

To plan the trip well in advance — given the distance to travel and cost of flights, it would be ideal to plan the trip as early as possible. The dry season, which coincides with the peak tourist season, is from July-August, so it would make sense to plan for slightly after that.

— given the distance to travel and cost of flights, it would be ideal to plan the trip as early as possible. The dry season, which coincides with the peak tourist season, is from July-August, so it would make sense to plan for slightly after that. The ability to compare prices of various options and come back to them later — sometimes flight prices fluctuate greatly and it would be wise to buy them at the best time.

of various options and — sometimes flight prices fluctuate greatly and it would be wise to buy them at the best time. Some flexibility in itinerary — the group may want different travel options and routes. Given that the Machu Picchu visit would only take a few days out of a two week trip, it would make sense to extend the trip beyond that and perhaps include other cities in the surrounding area. There may be cheaper transit options!

Benchmarking

I compared three major travel apps: Kayak, Hopper and Skyscanner. Based on my needs, I ultimately chose Skyscanner as the most suitable option for my users. The following features in particular stood out to me:

Trips: Allows users to save various flight searches into one “Trip” for easy comparison.

Allows users to save various flight searches into one “Trip” for easy comparison. Price Alert: Users can set up email alerts for when ticket prices change.

Users can set up email alerts for when ticket prices change. Good to know: When viewing specific flights, the app automatically shows information such as long transfers (and includes length of transfer).

Testing

Now that I had my app chosen, it was time to test. I asked three people between the ages of 20–40 to imagine they were booking a trip to Machu Picchu with friends. These were the tasks they had to complete:

Search for round trip flights between both Amsterdam-Cusco and Amsterdam-Lima (There are direct flights from Lima to Cusco but there are also other travel options such as buses or trains that travellers might choose if they want to do a more scenic route and visit other destinations along the way).

Save two flights for each route. One flight would be a cheaper option and one flight would be the most direct option.

Set up a price alert for both flight routes.

Insight

I first used the five-second test to gather some first impressions that my testers had of the app. All of them correctly identified it as an app related to booking flights, but one remarked that there was a lack of any obvious branding. In fact, the name of the app was not present anywhere (though this was not necessarily pointed out as something that they would change). Overall, all testers liked the design at first glance.

Next I asked my testers to complete the tasks listed above. Users commented on the following positives:

Price alert is a useful function that they weren’t aware of or wouldn’t have thought of themselves.

The app seemed straightforward to use: easy to search for flights, easy to view the options by price and duration.

More interestingly, the tasks revealed some rather interesting frustrations that users had:

The save function only appeared when they clicked on an individual flight, and was not available in the list view of flights.

There was a bug in the “save” function that appeared when users tried to save a flight to their trips. The message “Something went wrong” would appear at the bottom of the screen. Users succeeded after multiple attempts but this was very annoying.

The price alert button was not immediately obvious, nor did they know that this function existed until I asked them about it specifically.

The saved flights could be more clearly labelled.

The icon for the search function didn’t make sense.

There were also some small comments on the visual design of the app:

Lack of consistent colour schemes throughout.

Design could be streamlined a bit (e.g. on the Flight Details page, there was no need to have the save button appear twice).

Redesign

Based on my research, these are the main changes I aimed to achieve:

From any given page, it should only take one tap to save flights, as this is a key feature of the app —Price comparison is an important activity for my users.

Price alert button should “pop” more and also appear on the screen when viewing individual flights.

When a flight for a given route is either the cheapest or the fastest, this should also be indicated when viewing individual flights in each Trip.

Minor design changes to make the appearance simpler and more unified.

Skyscanner’s search screen (L) and my redesign (R)

For the search screen, the key change I made was moving the price alert button (the blue bell in the left hand corner) to the top, and making it a horizontal banner above the list of flights. This ensures that users will always be able to find the button (and will be aware of its function).

For the icons at the bottom of the screen, I changed them slightly — Namely the search icon and the trips icon. I felt that these new icons clearly communicate the icons’ respective purposes and remove the need for text underneath.

For the individual trip details for one particular (set of) flight(s), I removed the second “Save this flight” button and simply added a tool tip to the save button at the top right hand corner of the screen. This ensures that users still know about the function, but removes the redundancy of the second button.

I also added a price alert toggle, exactly the same as in the search screen, for consistency and ease of access. It should only take one click to save flights and users should always see the option available. I also removed the icons at the bottom of the rectangles displaying each flight. Those indicate the features of the aircraft and available services onboard. I felt that this was unnecessary and users could click “See Details” if they wanted to view this information.

For the Trips page, I added a “fastest” label to the fastest flight for a given route, so users will remember it when they return to book flights later.

Overall from a design perspective, I unified the colours so that the “Skyscanner blue” would always be the most prominent colour, particularly in the headers and footers of each page.

Conclusion

I had some difficulty with testing as the app frustratingly kept showing a bug while my users tried to save flights. However the overall process of usability evaluation was really interesting, as I got to hear some perspectives that I never would have thought of while using the app myself. Furthermore in some ways it’s more fun to critique and redesign an existing project, as you already have a pretty solid starting point (BTW if anyone from Skyscanner is reading this, I still think you’re great!). However, I found myself sometimes limited by the app’s existing structure and struggled to think outside the box, especially given the limited scope of the project. If I had more resources I would perhaps go for a more thorough redesign, and I look forward to doing that in the future.