Ironhack Challenge 03: Usability Evaluation and Site Redesign
Analyzing and evaluating a website with user feedback to redesign a new version.
For this new Ironhack Challenge, the main aim was to test different plaforms for booking trips with a set of different users. The selected destination was Casablanca, Morocco.
The planned trip is from BCN to CMN (Mohammed V International Airport.) The nearest Airport is CMN, which is already the main one in the country and the one that arrives to the city of destination. It is a direct flight with no stops inbetween.
The main currency is the Moroccan Dirham, in which 1DH is equivalent to 0,093€. They usually also accept € and $ but there are many exchange offices at both Airports and, if planned ahead, they can also get Dirhams at own the user’s bank.
According to research the level of cleanliness of water in the city is not equivalent to the city of residence of the 3 users, which might be a small inconvenience but with a general stomach protector the travelers will be okay. As they are all in the Eurozone they do not need a visa to travel to Morocco, they have the right to a 90 day visa-free touristic trip. The country is currently closed to tourists, but as this trip is planned one year before, it is predicted that next year it will be open to European travelers.
The weather tends to be rather hot by this time of the year, however it could get chilly at night, so it is recommended to have a variety of day clothes ready for warm weather and humidity, as well as a spring jacket in case it gets cold at night.
The ideal trip length would be 7 days, 4 days to visit the city, 2 to visit the desert and nature and a full day to travel from one city to another and rest a little bit.
My main target for the user research could be described/identified as the following:
Young group of 20–40 y/olds
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.
The users I ineterviewed are all based in Barcelona. They all come from different countries (Spain-Russia, Germany, Czech Republic) but they have been living in Barcelona for more than 4 years already. They are all 25–26 years old and are currently working, which provides them with a stable income and the possibility to save money for a trip to Casablanca.
With this in mind, the first step was to analyse and Benchmark different traveling and booking websites such as Kayak, Skyscanner, Trip Advisor and Hopper to find the best one for my specific age group target. With the use of Nielsen’s Principles, I got to the conclusion that the best one for my target audience was Kayak as it uses minimalistic design and can be easily used by people in that age range.
After preparing the set up for the users to test Kayak I gave them the task to organize the trip and came up with a list of very interesting details and information.
Main friction areas:
- Even if all the users live in Barcelona, when opening Kayak, the app directly detected the language setups of their phones. This is both positive and negative as everything was mixed up. For example, the user from Russia (with english settings but with an extra Cyrillic keyboard) also had the plane ticket prices in Russian Rubles.
- Only one of the users had used Kayak before, the rest were negatively surprised when they got to the moment of reserving the flight and saw that they could not purchase it in Kayak but they were sent to another website. Also, this website depended on the nationality of the user, as for instance, the German one got German websites suggested for booking the flights, not Spanish ones.
- Another pain point was that when looking for a place to stay, users were overwhelmed by too many housing filter options, many of which are so specific (like “treehouse”) that they are unnecessary.
- If you start looking for a place and you enter all your details but then want to change to “look for flights”, the filters of days and city of departure and destination do not save. It is necessary to rewrite them to start looking for flights on the same dates again.
- When you enter the main home page of Kayak, there are many different elements that call your attention more than the main icons of booking hotels, cars or flights. For example the “measure your bag” feature is not so necessary.
- When users were looking for places to stay they were surprised there was no option of “connecting to Airbnb” or seeing apartments to rent. However, there is a tag which tells you the place you are looking at is an Apartment. It is not seen well.
In general all the comments were very different and most of them were about small details of web problems, not so focused on the design itself. I also realized that the users that never used Kayak before needed some seconds to analyze the whole screen before pressing anything. One of the users stopped for a moment with annoyance when she saw that the booking was not made directly in Kayak but it took you to another website. It clearly would be way more comfortable to have the reservations inside of Kayak instead of taking you to another place which could look like spam or a fake website(also more trustworthy, as you enter a website and if you like it you trust it). On the contrary the one that had already used it before was more confident and could get to the “reserve hotel” part much faster.
These images show examples of various details that users were not very happy about or did not understand immediately. The mix of currencies can be a little bit confusing as in every different area there is a different currency, in these cases € and $ until the user looks for the 3 dots on the top right side of the screen to Set currency to €EUR.
Some of the feedback that I also received was that usually my users prefer to book their trips on their computers as they have a more comfortable UX and UI in terms of a design that breathes and their predictable workflow.
All in all, apart from the fact that currencies mix and there are some small details that can be annoying, the main issue that we found was the way the places to stay were shown.
After considering different options and lofi wireframes the easiest and most user-friendly wireframe was the following one. Just by adding some information boxes and removing unnecessary offers and text, the experience is simplified and takes the user directly where eh wants to go with the fastest shortcuts.
A Mid-fi version of this wireframing would look like the following images:
Home
Reduced the amount of noise and distraction and changed the “Make 2.000 points” section for Top 10 stays of the month. Users of this app tend to choose from the “recommended” section in stays because it lets them know about other people’s experiences with the hotels they see in the list.
The first things user do is press the 3 coloured squares on the screen, as they are the reason they entered the app in the first place.
Choose your stay
The details that appear in the redesign of this section allow the user to choose the most important filters first. Including hotels, Apartments, Hostels.. in the top categories will let users find faster what they need. If the user does not select if they want one of these categories, he/she will still see the small “apartment” tag on the advertisement. In the contrary, once the user selects a type of stay from thhe top menu, the tag will disappear, as everything will be only Hotels, only Apartments, etc.
Something very important too is adding “Total Price of Whole Stay”. It is the best way for the user to calculate the total spending of the whole trip when placed by the price per night.
Increasing the size of the destination text and instead of using the airport name, the actual name of the city where the user is staying is important too. If the user has a trip with many stops it can be confusing to use the airport shortcut (CMN for Mohammed V International Airport + Casablanca).
Conclusion
All in all, even if there is a list of things that could be optimized to perfect the app, the work put in the design of Kayak is very good. It is an app that has many features and offers almost everything to any user who wants to plan a trip. In my redesign I basically focused on the process of finding and buying a plane ticket and booking the hotel, because it was mainly what my users explored. The changes suggested are small things that could have a great impact on how a user searches for a place to stay visiting another country. On the one hand, the changes in the home page will give the user a feeling of a more personalized app, as it will be oriented towards finding the best deals for the trip they have been investigating. On the other hand, the changes in places to stay offer a solution to finding a place much faster as the most important filters are made visible.
Important things I learned:
Even if the design of an app tries to lead you into a path, different people will choose different paths sometimes.
We all see different things in an app or website. Expect the unexpected.
If the user is constantly using apps, they will find their way easier than less experienced ones.
Sometimes less is more, but more important things are good, less unimportant ones is better.
