A Trip to Al Butra (Pétra), Jordan, with Hopper app for Android

El Khazneh (Pétra) par Bernard Gagnon, CC BY-SA 3.0

Third challenge of my journey : usability evaluation and site redesign. As assigned, I picked a profile in a list of different personas : the backpacker.

Empathize

I chose to work on a trip to Al Butra (Pétra in French), Jordan.

  • 18–38 years old
  • The backpacker has 6 months to plan
  • doesn’t need a very solid and thorough plan
  • instead, needs a cheap plan
  • doesn’t care if it’s a 35 hours bus ride and if it implies eating cheap dry food
  • and it’s even perfect because cheap transportation and housing imples collective transportation and housing, therefore : meeting people

In order to test a travel planning app, we have to plan a journey in 6 months, so departure around may the 29th. What would the backpacker need ?

  • A backpacker is an experienced traveler : he knows he has to search flights on multiple platforms to get the best prices. It’s very unlikely that he would use just one app to search flights. → We are not looking for the app with the most functionalities, as he won’t stick to one app anyway ; we are looking for the app that makes a difference budgeting.
  • A backpacker improvises and don’t need a precise plan : he will just book the hostels he knows he needs for strategic places (big touristic places he doesn’t want to miss) and keep the freedom of moving wherever he wants for the other parts of the trip.→ We are looking for the app that allows him to quickly mindmap prices by areas and select what kind of housing he wants, but the ability to book right away is not mandatory.
  • A backpacker is adventure-driven : planning is a means to get room for improvisation, and while he looks for experiences to live, he doesn’t want to have something mapped for him — he maps himself. → General advice and tips on places are useful, information about classic tours too, but the backpacker would rather look at other backpackers blogs, and hop on a tour is a last resort. Crucial info are visa, vaccines, restrictions, known dangers : not what are the nice restaurants around a spot.

I used my actual ways of planning a trip to know what I needed to look for in the apps — as I never use them to plan or search it seemed fair to stick with my habits, and confront my use of the app to those of other users. All the most important information for french citizens are on french diplomacy’s website in the “advice for travelers” section : visa, vaccines, known dangers, areas where you might have to stay vigilant, elements of culture that might be dangerous not to know (like transportation habits). All the information about going to Al Butra in particular are on official tourism websites. What I was looking for in the apps was :

  • Average best price, transport duration and way to get from Paris to either Amman (3 hours drive to Al Butra) or Aqaba (2 hours drive to Al Butra) around may 29th.
  • Average best price for housing in the area (Al Butra itself, or the main cities, as one can go from them to Al Butra for one day), top three of housing solutions for the first day and the touristic day.
  • Maybe other nice things to be done in Jordan and general advice on clothing and culture, but the main concern in the early stages of planning is doability in terms of budget and main means of travel.

Usability issues

Every app among the four I had to quickly review (Tripadvisor, Skyscanner, KAYAK, Hopper) had its own pain points and perks. The one that striked me as the most useful to a traveler on a budget is Hopper : the ability to watch the prices for flights and hotels, and to figure out when is the best time to buy them, is a unique and practical feature.

Hopper has room to grow : I was surprised to see that the iOS version was better designed than the Android version : it even had features you could not find on Android. But I conducted my first analysis on Android, so I stuck with this version to conduct usability tests. I have an excel spreadsheet full of remarks frame by frame but the main points are :

  • Discount in travel causes distrust and I tend to think, based on their reactions, that the users wouldn’t have stayed on the app if they were not testing it. Trust needs to be improved by :
  • Giving better explanations/translations about deals. A user said, in front of “Nous avons trouvé 44 Forfaits Lapin vous permettant d’économiser jusqu’à €17” (Bunny deal) : “I guess it wants me to subscribe to something” and clicked, then said “ah, no !”. Would the user click, in a spontaneous context ?
  • The same distrust-by-default state of mind combined with lack of visibility of system status and clear hierarchy and display of information conducted a user to avoid even consulting the main feature of the app : planning the rise and fall of prices.
  • A more polished and thorough but still minimalistic design would convey a feeling of both careness and freedom of use — the company cared enough about the user to craft him something enjoyable, but the design is not obtrusive so the user isn’t forced to buy anything.

Hopper nailed the “not obtrusive” part, as it doesn’t convey unnecessary feelings of emergency : it says you better book the trip now in small, grey letters with a busy rabbit image, not “Book quicky !! last deals !!” in bold red caps ; but the lack of color coding also make the early user miss the point. A balance has to be found.

Other usability issues include :

  • unconsistency of design
  • clickable areas that are too small
  • existing but undistinguishable features
  • false signals about what to click on or not

Some features could be added to match the industrial conventions or user habits in the specific field of travel apps (multi-destinations, save a flight in particular, “all airports” option for small countries, translation of country names for non english speaking users…) but for the assignment, I stuck with redesigning what already existed.

Redesign

This is the map of Hopper for Android in its current version. In green, the search engine ; in yellow, resources for the user ; in purple, shortcuts ; in orange & blue, the core functions of the app — watching prices.
We can already see some redundancies we could correct : the “plans” feature doesn’t work in this version ; the search-hotel/search homes could be the same page with a very visible choice to make instead ; “parameters” doesn’t distinguish between personalization, help and legal resources, even on display — while it is interesting to have them all on one screen, it would be better if they were categorized with titles.

The main problem I address is the fact that the users tested tend to not use the specific function the app offers : they go over the “Scenario” frame with a sense of confusion, and don’t get what the “watch” function does.

  • This unique feature should be announced when the user opens the app
  • The different steps and frames should be titled
  • The “watch” button should be clearer about what it does
  • Same thing with the “freeze” function

I will focus on the flow from “Home screen” to “freeze info”.

You can find the mid-fi wireframes alongside the screen caps on figma here.

I focused on quick fixes except for the home screen. For the home screen, I deleted unnecessary shortcuts and set all the necessary features to fit in one screen — it works for new smartphones, but I would have to see how that works on smaller screens. This emphasizes the need to have a frame dedicated to show the watchlist.

It solves the main issue — users not seeing the point of the app — with a short text, and enhances the hierarchization of information : the name of the app makes it clear that we are on the homescreen, so the text will directly be taken as the main information to know about the app.

Here, I did quick fixes to solve a confusion issue — when the user arrives on the “choose months” screen, he doesn’t get that he will later have the number of the days displayed and starts figuring out which small square is the day he wants to take his plane. The “round trip” or “one way” status / button wasn’t clear either. I put a clear, centered and bold sentence so the user knows what to do, a clear emergency exit on the screen title, and redesign buttons to display clearly which one is active.

The same thing happened on the following screen : title, centered bold sentence, more contrasted calendar, and clear status of the kind of trip you are choosing (one user was confused about if he had to click on “arrival” to set arrival date or not because status of the task was not clearly displayed).

Price information was more tricky to redesign : I applied the same principles — main information fitting in one screen, clear titles — but the watch button still isn’t very satisfying : I didn’t manage to come up with a good sentence yet and I’m not sure about putting it in the button even if it makes it more contrasted. I’m obviously not sure either about the back button, that may be too close to the emergency exit button ; I think any exit button on a travel app should imply a confirmation step in overlay anyway, because we don’t like to lose all the work. (And this confirmation step could display a watch button to save the trip before quitting !)

Freeze information is not that redesigned : I put a title, an alternative between continue and go back — the user should know it is not an overlay you can close since the exit button is the same as the other screens. The main issue I solved is the visibility of the “term of use” link : with the hopper-pink, it contrasts well with the freeze-blue. It allows the user to know he can find more information about the freezing process.

What now ?

A good thing could be adding a quick access to the help center at any step. Which leads me to the main challenge in redesigning : stick to the deadline — yes, you could do more, but you don’t have time anymore — and stick to the issue you have to fix — a quick access to help is a good idea but isn’t related to the issue, which was : clarifying what the app does that the others don’t.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Louise Filoche-Rommé

Louise Filoche-Rommé

A User researcher with a strong background in social sciences engineering, upcycled by Ironhack. Views expressed are my own, not my company’s.