Case Study Usability Design for the App “Hopper“
This case study is about usability evaluation and site redesign. In this case study, I will analyze an existing booking app and come up with wireframes to improve the user interface design.
Which target audience did I choose?
The persona: young couple — 20–40 years old
You and your partner decide to go to a special place next summer. You realize you have both saved enough for the tickets and are planning to save as much as possible for the next 6 months to do this trip. You want to be efficient and have everything you need organized to enjoy at 100% while there. Even if you’re young, you want to have special moments to celebrate being together.
What was the scenario?
You would like to plan a trip to one of the seven wonders of the new millennium. You do not want to take a long-haul flight as you are concerned about the nature and CO2 emissions and would like to avoid a jet lag. While scrolling through the list, the destination Petra in Jordan catches your attention. Petra is an historical archeological city which has magnificent reviews. The City of Petra was hidden in the mountains of Jordan for thousands of years when a young Swiss explorer Johan Ludwig Burckhardt rediscovered it in 1812. In the last scenes of Indiana Jones and the Last Crusade the Treasury serves as a secret temple lost for hundreds of year. And that is actually what it is. The city is accessed through a 1.2-kilometre-long (0.75 mi) gorge called the Siq, which leads directly to the Khazneh. Famous for its rock-cut architecture and water conduit system, Petra is also called the Rose City due to the color of the stone out of which it is carved. It has been a UNESCO World Heritage Site since 1985. UNESCO has described it as “one of the most precious cultural properties of man’s cultural heritage“. (Wikipedia, 2019).
You convinced your partner about the destination and you would like enjoy the historical sight. In addition, you like to explore the country’s culture and try out new food. You looked up some information about the best time to travel there and April seems to be a good option, with temperatures between 16–25 degrees Celsius and a very low probability of rain. As both of you are working professionals, you picked up the dates for the next easter break: 9.-13th of April 2020. You will need light and functional clothing for your roundtrip. The local currency is Jordanian Dinar. You can easily get the Visa at the airport in Amman upon arrival. It costs around 60 Euros.
You need to look up a flight (roundtrip) from Berlin to Amman for the both of you. You prefer direct flights. Also, you need to look up an accommodation which is close to the sight for 4 nights. In this way, you will be able to take part in daily tours to see the different spots in Petra. You are not very luxury-oriented, however you would like to have a certain comfort and quality of the hotel as you are tourists. You are not sure about the public transport in Jordan. You consider to rent a car or pay a driver who will show you around.
Your budget for the flights as a couple is maximum 1200 Euros.
Your budget for the accommodation for 4 nights for the both of you is around 600 Euros.
Please download and use the app „hopper“ to find out about convenient flights and the accommodation.
What is the methodology?
I decided to interview some users and test my scenario. Initially, I was planning to interview 5 users. However, after the third interview, I noticed that nearly all the users faced similar problems. That’s why I decided to focus on those problems before conducting more tests.
Overall, none of my testers has heard about the app „hopper“ before. It was the first time that they used it. I briefed them that they should assume that a friend of theirs have recommended the app to them. During the tests, I tried to be as observant as possible without to much intervening with the user. They discovered all features by themselves without any help so that the scenario was as realistic as possible. During the tests, I tried to note down as many points as possible that caught my attention. Additionally, I wrote down some crucial direct quotes of the users. After the interviews, I grouped those observations and comments. Hereafter, I describe the three testers, their positive, negative and neutral comments. Based on this analysis, I come up with four improvements for the app „hopper“.
What are the main findings of the tests?
Tester 1:
Female, 33 years old, culture: South-Korean/German, working professional
Date and duration: 25.7.19 25 minutes
The testing was conducted via Zoom video conference. I watched her face expressions and noted down the important comments. She showed me her screen via webcam.
Positive comments:
Her first impression about the app was positive. She mentioned the nice and smooth colors that are used.
„Oh, the dates you selected are quite expensive“ She saw it on her screen (color scheme red).
„Ah, now I see the filter on the top.“ (Noticed it quite late in the process)
„I like that the reviews from Trip advisor are embedded in the hotel search.“
Negative comments:
She did not see where to tap on the „2“ people button before tapping „search“ (remember the scenario was to book a flight for a her and her partner). When she went back to the search screen, the information she entered about airports was deleted so she had do type it in again which she did not find convenient.
„I do not see whether the cheapest flight which is shown in the first place is non-stop.“
„The app only focuses on price. I would also be interested in more options: such as more airlines or more dates to compare.“
She was shown an error page when searching for her flight. She saw an error screen with an anime saying: „Shoot, not enough data“. The tester said quite annoyed: „Ok, at this point, I would stop using this app.“ Then she tapped „see flights“.
„Why do I have to select the outbound and return flight step by step? I thought the first price shown was only for the outbound flight, turns out that it is for both altogether“.
„I entered „Petra, Jordan“, now it shows me „Wadi Musa“. Is that the same place? I am confused.“
„The filter for the hotel search does not work properly. The pictures are low in quality.“
„I will definitely not book a hotel on this app.“ „If I click „watch this hotel“, the icon loads but it does not redirect me to any page.“
Neutral comments:
Looks like toys for children and like an Asian app.
What does „watch“ mean? What is the difference to search? Where to look up for the flight?
She did not want to log in for the app and provide it with her name and email address.
“What does the rabbit have to do with booking a flight? Expedia has an airplane while loading the site, but a bunny? Why this anime?”
She said several times: „Why do they have so many cartoons?“
„The running bunny is kind of weird.“ „By the way, it takes a long time to load the next screen.“
At the end of the testing I asked the tester what her overall impression of the app hopper is. She said: „ This app is not good. I had a feeling that is a beta version of the app. It was unprofessional. I will not use it in future.“
Tester 2:
Male, 35 years old, culture: German, working professional
Date and duration: 26.7.19 35 minutes
The testing was conducted face to face. I closely watched the tester’s face expressions, gestures and shadowed his screen. I noted down the important comments. First, I tried the „5-second-test“ hiding the screen after 5 seconds. I asked the tester what he thinks the app is about. The words „flights“ and „hotels“ were the only things that he could remember.
Positive comments:
He entered the „2“ at people count in the beginning.
„Oh, there are stops here. I will choose non-stop.“ (Discovered the filter on his own)
„The background is white and clean. I like the minimalistic design.“
„I think the hotel search looks more convenient. I prefer this calendar to enter my dates.“
Negative comments:
„Oh, they have a navigation bar at the bottom.“ He tapped on the different icons.
„Hmm, I did not understand what the different between „watch“ and „search“ is. I do not understand what „watch“ means.“
„Ok, now I have to choose the dates. 9–13th of April. Wait a second, the calendar is not user-friendly. It neither shows the year, nor the exact dates. Only when I zoom into a month.“
In the first part of the testing he said: „It’s going very fast. It’s not giving me any other button. I feel like I am not in control.“ (He said that because he would like to enter flexible dates, but the rabbit already started running and he could not enter flexible dates.)
„It’s a bit weird. I tap „watch“ and nothing really happens.“
„The word layover confuses me. The categories do not make sense to me either: nonstop, <4 hours, any.“
„It is not obvious what the flight price stands for. Outbound? Inbound?“
Then he continued the booking process and it said „sign in necessary for booking“.
„I feel that this interrupts the process. It makes it quite hard to buy the ticket. In the beginning, the process was rather smooth, now it getting harder and harder. I would expect an additional option „book flights without signing in“. At this point, I would switch to other apps to compare prices.“
„The flights and hotels calendar is not consistent.“
„I would prefer a dropdown list to choose for dates.“
„Error screen. Ok, as I do not have any previous experience with this app, I would stop using the app now.“
„Oh no, they did not save my data. I have to enter everything from the scratch again.“
„The price per hotel is unclear to me. Is this amount for each day or the whole trip?“
„I think this icon represents a map, but I am not sure. I would like to see how far away the hotels are from Petra. Oh, the map is not convenient. I cannot search for Petra. Now, I would switch to Google Maps.“
Neutral comments:
„Oh, it’s moving.“ (He meant the rabbit.)
„On what data do they base their predictions?“
„Oh, there is a bear. I think the rabbit is the hopper.“
„Ah, watch this hotel. It probably means that they will send me the price development of the hotel.“
At the end of the testing I asked the tester what his overall impression of the app hopper is. He said:
„It is ok. Some steps were confusing though. The further you go on with the booking process, the more hurdles you get. I am a bit skeptical. I would like to have more control over the steps. I do not understand what the uniques selling proposition (USP) of this app is. I know better ones to book flights and hotels. I think the company should work on their USP and advertise for it. This is a highly competitive market and there are lots of good alternatives such as booking.com and swoodoo out there.“
Tester 3:
Female, 26 years old, culture: German/Turkish, student
Date and duration: 27.7.19 12 minutes
Positive comments:
„I like the face of the rabbit.“
„The bunny is cute when it hops.“
„Hmm, the bear is kind of big. It was design similar to the bunny cartoons.“
Negative comments:
„I don’t like the calendar. I cannot see the dates properly. Where are the dates? I can just see the months. Ah ok, I clicked on April and then it zooms in and you see the dates.“
„I really cannot find where I can indicate that I am booking for 2 people.“ Even after a couple of tries and attempts the tester could not find the toll which was on the first page.
„Ok, when I choose the flight and would like to purchase the ticket, it tells me to sign in. But I don’t want to sign in. I already have thousands of accounts. I would stop the booking process now.“
Neutral comments:
„What does it mean: watching?“
„I cannot find any flight tickets that match my budget.“
„Where can I search for hotels? I do not have any hotel booking option.“ After we both had a careful look it turned out that the Android version of the app does not embed the hotel feature.
At the end of the testing I asked the tester what her overall impression of the app hopper is. She said:
„I mean the drawings are cute but it is too vague for me to watch the price of the ticket all the time whether it will become cheaper or not. I think it is only suitable for customers who are very patient and have time to wait. By the way they should offer options without signing in.“
After carefully reading my notes and grouping the points, four major problems became clear to me:
1) Unique selling proposition and logo of the app are not clear.
2) Users feels that they cannot control the steps properly.
3) Users lose trust due to plenty of error screens.
4) Users do not understand the meanings of words immediately.
How would I solve those problems?
1)Unique selling proposition and logo of the app are not clear.
Many users did not understand why the rabbit is the logo of the app. Also, the app is about big data and price predictions. Customers have the opportunity to track their favorite flights/accommodations and buy when the price is getting low. But non of the participants immediately understood this unique selling proposition as we can see from the following direct quotes:
„I do not understand what the uniques selling proposition (USP) of this app is. I know better ones to book flights and hotels. I think the company should work on their USP and advertise for it. This is a highly competitive market and there are lots of good alternatives such as booking.com and swoodoo out there.“ (Tester 2)
„What does the rabbit have to do with booking a flight? Expedia has an airplane while loading the site, but a bunny? Why this anime?“ (Tester 1)
„The running bunny is kind of weird.“ (Tester 1)
My solution for this would be first of all launching more ad campaigns to create brand awareness and brand knowledge within the target audience. Potential customers should know that hopper is a good way to save money. Besides, I would remind the customer of this unique selling proposition in the app as well. For instance, the first screen could tell the customer briefly about hopper’s goal as you can see in the wireframe hereafter.
2) Users feel that they cannot control the steps properly.
In the first part of the testing tester 2 said: „It’s going very fast. It’s not giving me any other button. I feel like I am not in control.“ (He said that because he would like to enter flexible dates, but the rabbit already started running and he could not enter flexible dates.)
To solve this problem, I suggest to enter a „Search for flights“ button after entering the dates. In this way, the user has more control in the process.
Additionally, all testers complained about the fact that they lost control on the calendar interface.
„Ok, now I have to choose the dates. 9–13th of April. Wait a second, the calendar is not user-friendly. It neither shows the year, nor the exact dates. Only when I zoom into a month.“ (Tester 2)
„I don’t like the calendar. I cannot see the dates properly. Where are the dates? I can just see the months. Ah ok, I clicked on April and then it zooms in and you see the dates.“ (Tester 3)
This problem can be fixed easily by inserting the numbers of the days and the year in the calendar view. Here comes my suggestion for improvement.
3) Users lose trust due to plenty of error screens.
„Error screen. Ok, as I do not have any previous experience with this app, I would stop using the app now.“ (Tester 2)
She was shown an error page when searching for her flight. She saw an error screen with an anime saying: „Shoot, not enough data“. The tester said quite annoyed: „Ok, at this point, I would stop using this app.“ Then she tapped „see flights“. (Tester 1)
The app developer team has to work on this. You can see some screenshots hereafter:
4) Users do not understand the meanings of words immediately.
In the bottom part of the app screen, testes read the icons „watch“ and „search“. None of them immediately understood what the difference was as the following quotes show.
„What does „watch“ mean? What is the difference to search? Where to look up for the flight?“ (Tester 1)
„Oh, they have a navigation bar at the bottom.“ He tapped on the different icons. „Hmm, I did not understand what the different between „watch“ and „search“ is. I do not understand what „watch“ means.“ (Tester 2)
„What does it mean: watching?“ (Tester 3)
To solve this problem, I suggest changing the wording of „watch“ to „watch list“. Also, I would change the binoculars icon to something more dynamic that indicates a price development. I think that this is a minor change but it will have a big impact on the understanding of the users. In addition I would change the order of the icons according to importance: „search“, „watch list“, „notifications“ and „tips“.
Additionally, tester 2 complained about the wording „layover“. He suggested to change this to make it clearer: „The word layover confuses me. The categories do not make sense to me either: nonstop, <4 hours, any.“
Hence, I suggest to change it.
Last but not least, the user should see the same place s/he entered for the hotel search in the result list as the following quote depicts: „I entered „Petra, Jordan“, now it shows me „Wadi Musa“. Is that the same place? I am confused.“
What did I learn throughout this process?
Usability testing is a method used to find out how “easy to use” something is by testing it with real users. Users are asked to complete tasks to pinpoint where they encounter problems and experience confusion. It was very interesting to conduct a usability analysis for an existing app. My major learnings are:
- Choose a suitable target audience to test the app
- Describe the scenario as precisely as possible
- It is better to conduct the interviews face-to-face in order to better interact with the user
- If you have the opportunity, record the usability test so that you can fully focus on the tester
Thanks for reading. Any comments welcome.
