Iron Hack | Prework | Challenge 03
Improving Skyscanner App @ UX/UI Bootcamp
This challenge is part of the pre-course tasks (Prework) of the UX UI Design Bootcamp at Iron Hack Lisbon.
My tasks:
- Choose a user type amongst several user types given;
- Research about the destination and specifics;
- Conduct Usability Heuristics evaluation with Nielsen’s Principles in four mobile apps (Kayak, Skyscanner, Trip Advisor and Hopper);
- Test and interview with at least 3 users in your chosen user type;
- Summarise the findings, detect the main friction areas and prioritise pain points;
- Redesign wireframes in an interactive prototype.
1. User type/persona
According to my main audience reach, I've chosen the following user type:
Worldtrotter, Backpacker — 18–38 y/o
You’ve decided to finally go visit that wonder that 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 traveling 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 to enjoy the wonder together. You are not picky and you can accommodate the most affordable, adventurous, genuine experience.
As it was open to any possibility, I did a brief research about inexpensive destinations, and compared the local currency to Euro. Also I've considered the ones that had more possibilities of meeting new people according to the main touristic spots.
2. Destination
Thailand is a country in the mainland of Southeast Asia. It is the world’s 50th-largest country by land area, and the 22nd-most-populous country in the world.
It has tropical climate, with temperatures around 30 degrees Celsius every day through the year. In winter, the temperatures can drop to 10 degrees in the evening, but during the day it would rise to almost 30 degrees Celsius again.
It is necessary to pack light clothes, comfortable shoes, and a jacket or sweater for the cooler evenings. In the Gulf of Thailand it is important to include a raincoat or umbrella. Also bring clothes that fully cover your shoulders and knees (and ideally your ankles too), so that you can enter the temples.
The currency in Thailand is Thai Baht (1 Thai Baht equivale a 0,027 EUR).
For the purpose of the research, I'll fix the destination in the city of Bangkok, the capital of Thailand.
3. Usability Heuristics evaluation
Testing apps:
In order to better understand the apps, I did the following tasks:
Open app > Free exploration in all the menus
Search for cheap flights (in euro currency) from Lisbon to Bangkok (round trip) > Book a flight in the period of six months time (around March/2021)
Also I analysed the description in Google Store plus the most positive and negative comments, and its replies.
You can see my full review article here.
Which app to redesign?
Using Nielsen's Principles, I've compared the four mobile apps. The coloured dots are positive points, and the grey ones are insignificant.
Hopper: I'm unsure if this app could be useful for our persona, as it does not allow you to book anything, just search for prices (and that are usually higher than normal, as the review shown). For the rest, I think all of them have good potential to the user and could use at least a slightly redesign.
Kayak: in my opinion is a good option for this persona in particular, as he/she wants to save money, and this was one of the most positive compliments on the store comments.
Skyscanner: that has a very complete proposition in the matter of planning a trip. It could be a good call for this persona too, as it allows to filter by prices in some sections.
Trip Advisor: The persona could benefit from the recommendations about excursions and places to rent (although may not fit in his/her budget). Flight prices cannot be checked directly in the calendar as the other apps. This is a good app for those who doesn't have a budget constraint.
So I chose Skyscanner to focus in this exercise, as it stands in the middle of Trip Advisor (not so cheap), and Kayak (not so complete).
4. Interview and results
I prepared a script for the interview, combining five second testing and first click/navigation testing via Usability Hub, where I ask for the following:
Part 1: Look at a screen, then answer these questions
What do you think this app does?
Can you recall its name?
Say two words that comes to your head when you look at it.
Part 2: Tasks based on images
Where would you click to change the starting point of your trip? How sure you are about your decision?
How would you choose the date of your trip? How would you do to filter the results by price?
Choose the date of the trip (day 1), click to search, choose one of the results and book a flight.
Did you manage to find it all out? What was the most frustrating part?
Results
I've got 17 responses to my test that fits our persona.
** The five seconds/first impressions were based in the following image. The answers. It was asked what was this app for, and the answers were ranging more or less the same: "trips", "looking for flights", "defining a trip destination". The most different answers were: "To find places to live (rent or buying house)", "to know where i'm heading", and "to pick a location".
In general we can say that is delivering the message it should, but that also it could be clearer.
- For the first two words, most of the answers were the name of the cities shown in the image, and "where to? (para onde?)". There were other frequent answers: "location", "destination" and "travel".
With these I understand that the written words were bringing more attention than the actual general meaning.
- About the name of the app, absolutely no one was able to recall it. Some were unsure if the name was in the screen or not, and some answers were "where to? (para onde?)", which is understandable due to its typographic hierarchy in the screen.
It implies that the app is not delivering a recalling identity, even for those who used it before. Also it could be good to reassure to the user what is the product he/she is using in the main screen, and help him/her to associate image, identity, and brand.
** It was asked where in the image the person could click to change its starting point of the trip. A total 95% of participants made a decision in an average of 9 seconds. The heat map can better show the results. All the green areas were hotspots, meaning the possible choices.
- "Where to" was the choice of 5% of the participants
- 9% chose to click on the "back button"
- 36% went for the right spot, that is "Lisboa"
- 45% clicked on the search bar
- 5% clicked elsewhere
With this result it is clear that the app getting the current location itself, without giving any obvious chance to change it, is not working. Also, the majority went for the search bar (as I did too), and will end up frustrated because that will lead to change the destination, other than the starting point.
Interesting enough, 86% were very sure about their decision.
** The next chosen screen to test was the calendar. I asked where would they go to choose the date of the trip.
- 55% chose the right action, that is clicking in one the circles with the corresponding date, and/or scrolling the screen until finding the correct month.
- 30% were not sure. They were claiming that the app was not asking for it yet, and they were supposed to go back and try to set it in a new screen, or scroll the current screen to try to find a clue. Some were pretty close though, saying that they would click on the starting date in the circle, but them would not know what to do next to set the ending date.
- 15% were incorrect, more preoccupied with the price tags in the top and the total price of the trip than the date itself. Another response mentioned clicking everywhere until it does what he/she wants it to.
There’s a lot of white space (mentioned in one of the responses), because its the end of the month, so it seems that the screen is missing something. This screen leads to confusion, as the titles says "When do you want to go?", but focus more on the price range. Surprisingly, one cannot click on the price tags, even if it seems like buttons to filter (it is more like a key to the prices). Clicking on the calendar is somewhat known feature of those who used similar apps, but is now totally clear for those that are used to the search bar for the date.
** To be sure about the filter, I asked about it too after, on the same image: how would you do to filter it by price?
- 75% would click directly on the "$" tags.
- 5% thought it was only the key to the calendar.
- 20% did not find a filter option, and would click on the green circles on the calendar.
# The last test was a navigation test, and implied a full task to search for a flight on day 01/march/21, press search, choose one of the results, and book it.
In the first screen, I think the errors were more about not reading carefully the title, as all of the users clicked in a circle with a date. The second screen the users had no doubt in finding the search button. In the third screen they also could click in a result confidently.
The real issue was in the last screen, where to book the flight. In the current app, there’s a button to “view offers”, that opens a menu with external links of partners, and them when you’re redirected to another site you can book it. Only 22% of the testers clicked on the right spot, which means that 78% where uncertain.
Also, there's no way to be sure about which result you really chose, as the screen seems to remain the same (these were pointed out from the testers).
5. Customer journey analysis
Considering the persona and the interview, I did a customer journey mapping so that I could understand each step. Today, only the search and planning is included in the app, and this is the part where most of uncertainly lays.
The current flow is shown above, so that is clear what are the steps needed to go through the customer journey.
Considering this flow, and applying the knowledge from the interview and research, I did some comments on each screen.
Based on the results of the research, and trying to avoid the negative emotions while using the app during the customer journey, I focused on the following pain points:
- Not clear interface and inconsistent visual identity
- No attention to typographic hierarchy, which leads to confusion
- Misleading titles that does not fit the screen
- Lack of a price filter in the selection of dates screen
- Uncertainty about your choices (starting point of the trip, chosen search result)
- Can’t find out how to book the flight
6. Visual analysis
Now that I know what’s going on the UX side, let me check the UI — I wanted to understand what’s behind the brand identity. Gladly, I found the official rebranding case, along with the assets (but not the new font), guidelines for advertising, design resources, and their self description about the brand, including what it the tone they are trying to achieve now.
With that in mind, I did a simple moodboard to myself with all the visual material I found relevant, and compared it with the current app design. Still, I could not understand why the visual interface is changing after the search, from a playful look to a more serious, sober feeling.
7. Wireframe
After doing some paper sketches, I figured out that I needed to simplify the quantity of information for two reasons: first, it is leading to confusion, and second, to maintain the idea of the intended visual of the brand.
I focused only on redoing the main screens, according to the user flow I showed before, and resolving the pain points. I studied the website to better understand what was the main information that needed to be shown on each screen, and how to facilitate the experience for the mobile user.
8. Prototype
I did not translate my version of the app to English, as Portuguese is a language that normally has longer words than the first. And one of the problems I noticed was exactly using long translations in titles and text, that were being cut or taking more lines than it should.
For the first screens, I took off the scrolling text box, and used a fixed text instead that I got from their own Cookie Policy and translated. In all the screens I ensured a visible logo, and in the main screen I've changed the text from the green buttons so they are smaller, but still deliver the message.
The "Where to" screen was originally holding too much information, with a list of popular destinations (that is the function of the "Explore" section), and it was taking the focus from the main ideia. To still embrace the ones that are not sure where they want to go, I've included a button that will search flights to "Anywhere".
I added a new screen, "From", so that you can choose where is your starting point by typing it, or clicking in a button to choose your current location.
I was thinking of doing it all in just one screen, but then remembered that the keyboard would be in the way, so I did it separately. Also, it keeps full attention from the user to the task.
For the "When" screen, I've included two choices to the user: "specific date" or "whole month". You can now filter on the calendar by only making the "cheaper days" visible, or by choosing "cheapest month".
For flight results, I made the interface more light and coherent.
For the confirmation phase, the chosen flight is listed, and there's a button to "book". When clicked, an alert asks if you want to buy in-app (and Skyscanner will choose the supplier for you), or if you want to choose it yourself. This way, what was first an inconvenience is now a choice. They will redirect your information to the supplier, avoiding that the user is obligated to leave the app, and making it more reliable.
Link to the prototype here.
Final Thoughts
This was the last challenge from the prework, and for sure it was the most difficult.
I had to stop myself from making more than the necessary for this proposal (to solve the pain points), almost if I were doing a sprint. I know that there's more to be done, and probably there's always going to be something.
I see this in a positive way though, as if my eyes are now more meticulous than when I started. Meaning, I can already feel some progress, yeah!
I can't wait to start official classes :)
