Ironhack’s Challenge 3: Usability Evaluation and Site Redesign
In this challenge we were challenged to step into the shoes of a traveler. We were asked to choose between these 6 user types:
- World Traveler, Backpacker — 18–38 y/o (1)
- Young group — 20–40 y/o (4)
- Young couple — 20–40 y/o (2)
- Family w/ children — 30–50 y/o(4)
- Small group of friends — 40–60 y/o (3)
- Elder couple — 60–80 y/o (2)
According to my audience reach it was easiest for me to choose the third option: Young couple — 20–40 y/o (2).
With each focus group we were presented with a scenario and how each would respond to it. The scenario for my young couple is as follows:
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.
Before I could get started I needed to choose a location for my “young couple” to visit. I decided to go with Puerto Rico. Even though Puerto Rico is not “foreign” per say, it is a beautiful island, filled with culture, that is easy to get to and cheap to travel to. When you travel to Puerto Rico you will soon forget that you are in a US territory, and you will soon feel like you have been transported into a Latin Oasis.
Let’s find out the specifics on Puerto Rico:
- Nearest airport / most convenient airport:
The largest and most accessible one is the Luis Muñoz Marín International Airport, commonly known as the San Juan Airport (SJU). Located in Isla Verde — in the Carolina district — this airport is just minutes away from San Juan. More than 20 commercial airlines fly in and out of the city every day.
The other airport with international flights is the Rafael Hernández Airport (BQN) in Aguadilla, in the northwest region of Puerto Rico. Comparably smaller than the SJU, this hangar receives commercial flights from major airlines such as Jet Blue, National Airlines, Spirit Airlines, United Airlines, and private charters.
The currency used in Puerto Rico is the U.S. dollar.
- Medical needs: vaccination, visa, etc.
Since Puerto Rico is a territory of the United States, American citizens do not require a passport to enter the Island. However, they must always travel with a valid ID. And as of Tuesday, May 25, 2021, fully vaccinated domestic travelers can upload their Covid-19 vaccination card instead of showing proof of negative Covid-19 PCR molecular test results before entering. Also starting May 25, 2021: those who aren’t vaccinated or are arriving from other countries will be allowed to provide negative results from either a Covid-19 PCR molecular test or a rapid antigen test.
- Wardrobe recommendations:
Lightweight clothes! Puerto Rico’s weather is hot and very humid year round, so try to dress as comfortable and as light as possible. With an average of 85°F to 95°F, it is likely you will want to wear shorts every day.
- Days needed to visit attraction:
Now it was time compare and test some popular traveling apps: Skyscanner, Trip Advisor and Hopper. We were required to conduct Usability Heuristics evaluation with Nielsen’s Principles of the apps. I decided to choose Hopper for this case study report. I think that Hopper is the best option for a young couple who is trying to plan a trip on a budget.
A little background on the app. Hopper is a mobile app that helps you book flights and hotels at the right time to save you money — claiming 95% accuracy, up to 1 year in advance.
If you’re unfamiliar with Hopper, here’s how it works: You tell the app where you want to go, and it shows you a calendar with price breakdowns for round trip flights on different dates. You select the round trip flight you want, and you can either choose to book now or watch the trip.
When you choose to watch the trip, Hopper will alert you when the price is about to drop and let you know the date you should book by before the price goes up. Hopper told Tech Insider that it saves a typical user about $50 (and in some cases as much as $1,300) per flight.
#1: Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
I think Hopper does a good job at this. Between loading screens you can clearly tell that the app is loading because the screen grays out and blinks as the status bars refresh. They also use a red screen similar to their logo where you can see the Hopper bunny running across the screen as the next screen loads.
#2: Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Hopper does a good job at keeping things simple. No jargon. The language is pretty dumbed-down. They also have pop-up messages to warn you about things like non-refundable stays and flights.
#3: User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
Seems to me that Hopper makes it easy to cancel your mishap as long as you have not finalized the booking and you are still browsing the app.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
From what I can tell, they use language that is pretty standard across the industry. Their Terms & Conditions are easily accessible on the app.
#5: Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
Hopper does a good job prompting the user with cute and quick little pop-ups to warn you that you might be making the wrong selection.
#6: Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Hopper uses predictive text and remembers locations and dates that you have previously searched. It also color codes flight dates and hotel stays to help you identify the cheapest option quicker. I do think that all the colors and all the graphics on the screens are a bit distracting and might actually be taking away from the experience.
#7: Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
I wasn’t able to find any shortcuts myself. So maybe I would just be classified as a novice…or maybe they don’t have any. This would take a deeper dive.
#8: Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
This app is everything but minimalist. I like that they try to stay with the bunny theme, but I think it’s a bit childish and corny. Like I mentioned before, they use too many colors and too many graphics. Each screen is loaded with buttons and links and options. It’s a bit overwhelming to look at.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
They do a good job at this. No complaints here.
#10: Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
I would say that this is their biggest downfall. Even though they have help center within the app, it doesn’t give you a way to actually speak to a real person. Any requests must be made directly through the app and you can only chat with a bot. Upon doing some research, the biggest complaint with Hopper is that they are virtually unreachable.
Time to test the app with users within my selected focus group: Young couple — 20–40 y/o (2). All three couples that I interviewed were in their mid 30’s and traveled fairly often. They used Hopper very little or not at all. They actually were more accustomed to Google flights, Expedia and even Hotwire.
I performed the 5 second test of them. The things that stood out to them the most was the “Carrot bucks” at the very top/center of the screen, the flights button which is the first on the left of the booking options, and the city names in bubbles at the bottom of the screen, although most of them didn’t recall that they were last minute hotel bookings.
Insights and Findings
After conducting this 5 second test I allowed each couple to play with the app and then asked them what they thought of it. Their responses were similar to mine: the app is overwhelming and cluttered. Even though they are guaranteed to save some extra money using it, the consensus was that they would rather use the apps that they are comfortable with.
Fixing the Problem
It was clear to me what I needed to improve with the app to make it more inviting: we need to clean it up, less design, more organized content, and we need to add a button within the Help Center so that customers can speak to a customer service agent if they run into trouble. Time to grab a pencil and paper and come up with some simple design solutions.
Fixing Problem 1: Making the design simpler and more streamlined.
Fixing Problem 2: Adding a button for direct customer service help from an agent or preferred method.
I decided to stick to lo-fi renderings since they come naturally to me and we are in the beginning stages of testing out these solutions. If I was really redesigning these, I would take these ideas to Figma or Sketch and create mid-fidelity wireframes and prototypes. This early on, I find in inefficient to spend the time.
This process was definitely a learning experience in it’s entirety. I was able to learn a lot about Puerto Rico, a place I would love to explore. I learned a lot about different travel apps, and how much they vary. But the MOST interesting part of this case study was the 5-second test. Finding out what pops out to people and what they are able to gather in just five seconds was fascinating to me. This is a tool that I plan on implementing in UX/UI as well as my graphic design projects.