Usability Evaluation and Site Redesign: Travel App

As a new Ironhacker, I have to go through the challenge of the prework. In this case, it’s a usability evaluation and site redesign.

For this challenge, they told me to jump into the shoes of a world traveler. To be honest, I already am a world traveler. So I’m in one’s element.

User Type

They give me four user types, but finally, I selected the “Young Group” because is closer to me and the people that it would be available for testing.

But, Where are they going? Well, this young group has decided to go to San Francisco and stay in Castro for two weeks in summer. They’ve been saving the whole year, so their budget is around 2.000€ each one.

Research

The specifics of the destination:

  • Nearest airport: San Franciso Airport (SFO).
  • Currency in the USA: Dollars. Actual exchange: 1$ = 1,09€
  • Medical needs: Visa, medical Assurance, passport
  • Wardrobe recommendations: Light clothes, comfortable, some clothes to go party, alight jacket for cool nights
  • Days needed to visit attraction: 15 days

Benchmarking

For this challenge, I have to go to Kayak, Skyscanner, Trip Advisor, and Hopper — just for mobile and conduct a heuristic usability evaluation with Nielsen’s Principles.

A heuristic evaluation is an inspection method in which you systematically apply heuristics (qualitative guidelines) to find and explain problems.

I applied Jakob Nielsen’s heuristics:

  1. Visibility of system status
  2. Match between system and the real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize, diagnose, and recover from errors
  10. Help and documentation

My goal was to apply Nielsen’s heuristics to critique the user interface designs of app by performing detailed heuristic evaluations.

Heuristic usability evaluation with Nielsen’s Principles of SkyScanner App
Heuristic usability evaluation with Nielsen’s Principles of Kayak
Heuristic usability evaluation with Nielsen’s Principles of Hopper App
Heuristic usability evaluation with Nielsen’s Principles of Travel Advisor App

The result shows TripAdvisor as the best app. Also, I’ve considered other features that the other options don’t have, and it’s interesting for our user type, as:

  • Leisure options around ubication
  • Largest rating and opinions from users
  • Possibility to buy main touristic attractions tickets

TripAdvisor it’s a well-known site for reviews of different kinds of service when you are traveling, like a guidebook fed by users. Tripadvisor’s main selling point is helping people discover new restaurants and attractions reviewed by others. So they have become part of a travel organization for a million users.

Wisely, some years ago, they added new tools to help users to find flights or hotel bookings. Besides, they evolved to the point where you can buy attractions tickets without leaving the app. Furthermore, the travel organizer feature lets you organize the travel, day by day, and share it with other trip advisor users, in a public and private way.

Testing

To be able to detect user pain points I run the 5 second test, and I told them to do a task.

This task was to look for a flight and housing for this travel and share the results with their travel mates. And finally, simulate how they would buy it or book it.

The main problem that I find in my interviewed users is that they find all a little messy and they were confused. Too much information at once. Barely they could remember what they have seen. The common answer of what they have seen was: “I have seen a pool”.

In the task testing, observing the screen records, I’ve noticed that they don’t really know how to share their founds outs with their friends. In the case of flights, they don’t have the sharing option, so one of them, have to share the findings by a screenshot and send it by WhatsApp. So they find extremely difficult to organize the travel.

Furthermore, TripAdvisor has a feature that allows you to save your favorites places, and create “your travels”, invite users, organize by days, save places that you’d like to visit… I was thinking that it’s a cool feature, and it’s a pity that it has passed unnoticed by the users.

Another pain point, it’s it was the confusion created when you finally select a flight and redirect you to an external page and the user gets the big surprise that the prices are far away from the price displayed in the travel advisor site.

The third point was, for our user type, it’s really hard to pay 4 flights at once, or to organize the four people to buy at the same moment, with a difficult confirmation for each one, and not make mistakes in the process.

As a result, I’m planning to solve two of the pain points giving a new feature to “Travel planner”. Firstly, this new feature would gain visibility for the unnoticed travel planner. Secondly, It will be able to share payments without leaving the travel planning area. So It will complete what user needs to plan a travel. It will solve at the same time the sharing problem.

Solving pain points

There are many ways to solve the messy home page and to give more visibility to the “Travel planning”. To simplify this exercise I focus my attention on the new feature, and only I only suggest a little CTA to this feature. Well, I find interesting to add to Trip advisor some user learning when it’s user first time, but’s another idea.

I did some handmade prototype before going to mid-fid wireframes. It let see some mistakes and reformulate some things.

Low definition prototype on paper

Updating Travel Page

TripAdvisor already has a travel area. I’ve updated this page for restructuring the options and add “Common Wallet” and “Common Cart”.

Focusing on making the payment together, I’m adding a very interesting feature. The travel planner that already exists will be improved, and possibly will be noticed by adding the “Add to cart” CTA in all App element, as restaurants, activities, museums…

Travel page updated

I put together all the travel edit options, so it let me the space to add these new features as principal actions.

Common Cart new feature

This new feature has been thought to give the users a place where they can share their payments for the travel. I mean, a place where, for instance, one user does the flight search and want to share it with their travel mate.

Once is saved as a favorite option, all the members can choose if they want to buy it by adding it to the travel cart. In the travel cart page, all the users of the travel have to validate every option to continue to the order. That will works with any activity/service that Trip Advisor offers, as Hostels, activities, restaurant bookings, museum tickets…

The final order will be placed only if every user validates the common cart. For example, they are discussing about 3 hostel options. Each user will mark their favorite, they’ll be able to leave notes or comments in each one. But finally, they have a “common cart” that everyone has to validate to continue the order.

Cart approval by all travelers on this trip

So, how would be able to pay it together? The Wallet new feature will give the user a common wallet, where every user would put the money, paying by credit card or PayPal.

Travel Wallet. Shared with the travelers that have joined to the travel.

Every traveler will be able to add money. It will remain in the app but can always get it back.

The idea it’s that all will be connected. You will now how much the travel will cost thanks to Travel cart, so, every cost will be divided by each user. So, that allow to what exactly you need to give to the travel wallet.

If anyone puts more money, it will calculate how much each member debt is.

Each traveler will have their own payment method saved for futures travels.

It will be a Historic area where everyone can see movements, inputs, and outputs, carts already paid…

Add to Wallet

I put some attention in this feature because I think that it’d be interesting to display the cost of things you want to pay, so, to make it easy I’ll add a list of items added to cart and to suggest to add that amount to the input where you has to put the amount.

Putting money on common wallet for the travel

In a nutshell, I started out with researching four apps: TripAdvisor, Kayak, Skyscanner and Hopper. After determining the type of users I wanted to interview, I made the decision to go into detail with TripAdvisor since its features were the most suitable for my target audience. I determined that going through Nielsen evaluation.

Next step, I set up a questionnaire for four users I have selected and asked them to perform certain tasks. While TripAdvisor features a lot of functionality, users still found a lack of usability when performing the tasks. Based on those difficulties I made wireframes and ended up with medium-high fidelity designs.

Features flow

Things I’ve Learnt

Well, all the process mains learning every moment to me. I’ve never done before a usability evaluation, so I didn’t know any kind of evaluation. I’ve discovered a whole world! And it’s really interesting. It gives you a lot of data to make the best decisions.

When an app already exists I find so difficult to find new solutions and be able to find usability problems. I find difficult to run away (mentally speaking) for what already exists, and try to find improvements.

Hands are wise. A teacher told me this some years ago, and it’s totally true. Starting by doing prototypes on paper lets me see where I’m wrong an fix it quickly. So, I repeated it three times at least, as many as it will be needed to find the best solution.

Invision Link

Here you can read Spanish Version

Susana Real —

UX/UI Designer