Usability Evaluation and Site Redesign

Andrea Mairone
5 min readDec 11, 2019

--

Pre-work exercise for Ironhack UX / UI Design training in Amsterdam.

The next challenge proposed by Ironhack was to choose one of the 7 wonders of the new millennium and jumping on the feet of a traveler to see which web page (seen from the mobile version) is best suited when planning a trip to this wonderful place. The objective of this project is to analyze the areas of friction that users may face and propose a solution to these pain points through the following methodology:

User Type

In this case I selected 3 groups of friends (4 members per group). I proposed as a wonder destination to visit “The Roman Colosseum” in Rome, Italy.

Young group — 20–40 (4)

Research

The idea at this stage is to find out the specifics of final destination by asking questions regarding the currency and exchange from their own currency, wardrobe recommendations, days needed to visit attractions, nearest airport / most convenient airport to destination… among another series of questions to learn more about each group.

All this info will be helpful in the step 4

Benchmarking

The next step is to compare and analyze some apps for my selected user type/scenario.

The one that I chose was “Trip Advisor”.

I consider this one performs better for my selected user type “Young group”. In just one site they can find almost everything the need for their trip: book flights, hotels, restaurants and things to do around the place. It also provides access to other people’s point of view and recommendations.

Testing

On this step I’ll be performing usability testing to understand how it could get better and help this group and any other group to travel the world!

To do this, I asked one user per group the following:

— First, taking into account the characteristics and needs of their group, I asked them to see the site for a short period of time (mobile version).

— Second, I asked them to answer the following questions, without looking at the site: “What did you see? What can this tool do for you? Where would you search for a flight?”

The answers were quite positive. All agreed that visually it is very intuitive, simple, clear, with pleasant colors. It was easy for them to find where to look for a flight.

— Third, I asked them to try to book a flight according to their budget. The navigation on the site was easy and simple for all of them.

— Group 1 — They have a medium budget. So, they could find something within their expectations. It was not the best but it was enough for their needs.

— Group 2 — The problem came up after the search results for this group. While they were clear that they only had 4 days to be in Rome, they had no problem that these four days could be on any other time/period of the month. However, in the end the price did not fit their pocket, so they decided to postpone their trip.

— Group 3 — They have a high budget. So, booking a flight was without issues.

Something similar happened with the task of “making a reservation” in a restaurant. This time, they used the mobile App instead of the website. The first and third group had no issues, but the second one struggled since the App does not have a filter for budget or expected costs.

However, it is funny to note that, on the mobile website version, there actually is a filter for this.

In general the navigation process along the site happened without issues. Anyway, the users pointed out that the navigation bar was not always there when they scroll down and therefore the were forced to scroll up to come back to the top again to reach the menu.

Insight

After the test sessions, I decided to focus on the main problem: more options during and after the results when searching flight and restaurant.

I noticed that the main points of friction were the absence of a simple and specific option such as “spend as little as possible”, which is the most common situation in general for users.

I recognize that quality and efficiency are super important, but in this case, my type of user is a group of 4, with one in particular which had a low budget.

Redesign Wireframes

1 — Possible solutions for the flight case,

A — It would be good if the application would provide alternative, more affordable dates (but maintaining the total duration of the trip) around the ones entered by the user.

B — In the search calendar, have each day show the approximate cost of the flights, with colors representing how expensive they are (something like what Google Flight does).

2 — Possible solutions for the restaurant case,

My solution to this was to add a filter for budget restrictions in the App.

3 — Possible solutions for the navigation bar,

To solve this pain point I suggest to stick always the menu bar when scrolling down.

Mobile flight (case A) + navigation bar
Mobile flight (case B) + navigation bar
Reservation Restaurant case (App version)

Key Learnings

During this challenge I have realized even more the power that interviews have as a source of information, since they maximize the improvements that can be made to a site when we get to know the user more deeply.

I also highlight as important the structure and navigation on a site. Users felt comfortable and enjoyed the navigation on this particular website, so no major redesign was needed there.

I also think it is important to conduct usability evaluations often, as user needs change with time and it is important that the experience remains positive and satisfactory for the app to be successful.

--

--

Andrea Mairone

“I believe in generating a positive impact on society to make a difference in our daily lives and bring innovation to people.” www.andreamairone.com