This is the third challenge in Ironhack’s UX/UI design course prework, and the purpose is to assess the user experience in a travel app and redesign it based on user research, using heuristics usability evaluation for benchmarking and wireframes for the redesign.
1. User persona
Young group — 20–40 y/o (4)
You and your friends have decided to invest and spend some quality time together. You are planning your trip one year in advance to really make it happen and accommodate everybody’s schedules and needs. You’d like to share as much time together and plan for a lot of fun. You’re interested in a mix of culture and leisure. You have all saved for the last year for the trip so, while you’re still price-conscious this is the opportunity to spoil yourselves.
2. Destination research
We’re going to use Mexico City as a hypothetical travel destination.
- The most convenient airport to reach it is the Benito Juárez International Airport, located in Mexico City.
- The currency is Mexican Peso (MXN), which has an exchange rate of 1 peso to 0,047 euro (EUR).
- No vaccinations are mandatory, and EU citizens require no visa to enter the country as tourists.
- The recommended wardrobe for traveling in autumn should include a thick sweater or jacket, as it can get cold in high-altitude locations such as Mexico City.
- 4 days are usually enough to visit the main attractions in Mexico City.
Using heuristic evaluation, I compared Skyscanner, Kayak, Hopper and TripAdvisor. Heuristics are a research method in which you go through a certain number of established criteria that serve as guidelines for reaching a decision or a conclusion.
In this case I referred to Jakob Nielsen’s principles. Right off the bat I had to disregard Hopper and Kayak, as they don’t offer attractions and tour reviews, which our users need, as they intend to plan part of their activities in advance. With only Skyscanner and Trip Advisor left, I evaluated the two of them based on Nielsen’s principles. Both of them feature very polished user experiences that comply with Nielsen’s principles, but Skyscanner wins out for its simpler user interface, as TripAdvisor’s is a bit too cluttered.
To test the app and identify the problems that need to be solved, I interviewed 3 users fitting the general description of the user persona. 2 of them are males, aged 26 and 25, and one female aged 31.
At first we did a 5 second test, in which I asked them what they saw, what they think the app does, and what they think the first step would be to book a flight.
After looking at this screen for 5 seconds, all of the users could successfully identify it as an app for booking flights, hotels and rental cars, and also thought that the first step would be to tap the flights icon.
My conclusion from the 5 second test is that the first screen in the app is very simple to understand and use, even with very little time to look at it; however, none of the users immediately realized that the app also features attractions and restaurants, as it is not prominently featured in the home screen.
Next I had them carry out a couple of tasks relevant to their hypothetical trip. Since they are young and Mexico City has a good public transport system, I thought they’d rather avoid the hassle of having a designated driver, so I only had them select a flight, book a hotel and look for attractions.
None of the users had trouble finding a suitable flight, but user A commented it wasn’t that obvious which flight was the cheapest and which the shortest. However, a problem for users B and C emerged when they attempted to book their selected flight, as Skyscanner took them to a booking website in German (which they don’t understand), where there was no apparent option to switch to English. They had to go back to the flight list and select another flight that could be booked on an English language website, which was quite a hassle, as they had to manually tap on several different flights all the way to the booking option.
Finding and booking a hotel was on the other hand very easy for all the users, as they could see the rates and book directly on Skyscanner, and the travel dates were already selected, due to having chosen them previously in the flight section. Users B and C commented that the hotel sorting feature was very useful, and from what I saw, they had no problem finding it and using it.
The task of looking for attractions and restaurants was harder than expected for all 3 users. All of them expected it to be in a green icon next to the ones for flights, hotels and cars, and it took them a bit of time to find the option. User B also expressed uncertainty when tapping the “explore” icon, not knowing exactly what it meant. Another problem experienced by all users in the “explore” screen was going back to the main menu from there. They had seen the flight list first and used a convenient arrow at the top to go back to the main menu, but such an arrow didn’t exist in the attractions screen, forcing the users to figure out that they had to tap the “search” icon at the bottom of the screen.
In summary, there were 4 major pain points I identified through user testing:
- The lack of an obvious indication of what the cheapest or shortest flight is.
2. How inconspicuous the attractions and restaurants option is.
3. The fact that the app redirects users to sites in a different language when they try to book certain flights.
4. The lack of a return arrow in the explore screen, similar to the one users got used to in the flight screen.
The best solution I came up with to problem number 3 is to have Skyscanner only present flights which can be booked through a website in the same language that the user was using in the app. This new parameter would be automatic in the app’s algorithms.
The other 3 problems can be solved by adding a return arrow and altering the app’s layout to be clearer about how to search for attractions, and about which flights are the cheapest and quickest options, as these 2 are the most important criteria for almost any person looking to book a flight.
I set about making lo-fi wireframes of the screens that needed to be modified, which you can see below.
Using 4 wireframes created in Sketch, I created this interactive prototype. The modifications I made include adding a green icon for attractions, right next to the flight, hotel and car hire icons. I also changed the name from “explore” to “attractions”, to make its purpose clearer. In the flight selection screen, I added green text highlighting the cheapest and quickest options and putting them at the top of the list. In the attractions screen, I added a return arrow that leads back to the main menu, just like the one in the flights screen.
This challenge was very helpful because it taught me how to objectively evaluate the performance of a user experience and determine which possible modifications could be made to improve it. It also reiterates the importance of user research as the most important guide in user experience design.