Ironhack UX/UI Challenge 3: Tripadvisor Usability Test and Redesign
For my final project before starting the Ironhack UX/UI Bootcamp, I had to evaluate the usability of a travel app and redesign it. For this case study, I was required to work in accordance to a specific user type, benchmark different travel applications to identify the best product for my users’ needs, test said application with a specific flow and user journey and finally redesign the application through wireframing to improve its design.
Following the benchmarking stage in which I evaluated three applications’ (Tripadvisor, Kayak and Skyscanner) usability with Jakob Nielsen’s Heuristics, I decided on working on Tripadvisor because it was the application that was the most per the chosen user type’s needs.
The user type that I chose to work with, which was the most similar to my available sample demographic, is a group of 4 friends. These four friends are between the ages of 20 and 40 years old and have “ decided to invest and spend some quality time together. They are planning their trip one year in advance to really make it happen and accommodate everybody’s schedules and needs. They’d like to share as much time together and plan for a lot of fun. They’re interested in a mix of culture and leisure. They have all saved for the last year for the trip so, while they’re still price-conscious this is the opportunity to spoil themselves.”
Thus, Tripadvisor seemed to be the best bet for them. The user type that I will be working with is very experience focused. Tripadvisor not only lets you organise the logistics of the trip (so travel and accommodation) but also offers a choice of experience options to buy in-app or in a redirect and even offers package experiences of a couple of days.
The UI of the App did not do the best during my heuristic evaluation. There’s often an information overload and makes effective navigation hard. However, it was important to take into account the needs of the users and seeing their age and their probable knowledge of interfaces, I don’t think these minor flaws in the UX would hinder their use as it would a more inexperienced user group. Though the User Type isn’t looking for the cheapest prices but is still price-conscious, the TripAdvisor information on the best value applies perfectly to their needs. They will be able to compare prices but also value for money, which would be important for them seeing as though they want to treat themselves all while getting the most from their money.
After this research stage, it was time to find users to test.
User Tests
One of the most important pieces of feedback that I got from users following the testing stage was the fact that they felt overwhelmed by information which was one of the negative points I evaluated during the Usability Evaluation. The design of the application came back often as feeling outdated or cheap. When searching for bookings, the users had so much information to process that they sometimes didn’t even notice important features that they needed to use and then told me that it was a shame that they weren’t in the app. This was particularly the case for the Filter button that they needed to find rental accommodation when they all clicked on the hotel button.
In regards to the tasks that they needed to accomplish, they also noted that the Trips feature could be optimised not only by adding a collaborative feature where they could plan trips with other users but also make it feel more like a Travel Journal than a Like or Bookmark folder.
Thus, for my redesign, I chose to look into the Information Architecture for the User Experience aspect, as well as slightly update the look of the app in regards to User Interface.
My goal was to make the App look cleaner and more modern, as well as more usable and less busy in terms of quantity of information. I decided to focus on the Home Page, the Search Bookings Page as well as the Trips Feature.
Main problems and solutions
From the design aspect, it was important to me that I try to update and simplify the app. The Home Page and a lot of the other features in Tripadvisor were flat and thus looked somewhat outdated in the times of flat icons. Using Adobe Colors and the Tripadvisor Graphic Identity Colours, I decided to redesign the Home Page with regard to the current app, using slightly modified official colours to make it less abrasive, but I also decided to combine certain features.
During the testing phase, I asked my users to specifically find a Vacation Rental for their trip. Every user clicked on the Hotels button (which is the first one in the feature search spread) even though the Vacation Rental button was right underneath. Thus I combined both of those features under an Accommodation feature.
Most users also noted that they would have enjoyed being able to plan a complete trip and book everything under its own Package and were disappointed that the Trips feature seemed more like a Bookmark folder instead of a section of the App that let you look back on full trips. It also seemed important to them to be able to have a collaborative booking feature for Trips. This feedback led me not only to add a Book Trip feature to the Tripadvisor Home Page but also to redesign the My Trips in-app feature to include a Solo Trips feature with recaps of different bookings, changed My Saves to Likes to reflect the heart icon that is used in the Current App as well as a Group Trips tab all while leaving Recently Viewed as a History feature.
Tested users also expressed discontent and reported a sort of Information Overload while using the booking feature and comparing flights or accommodation. The current app lists hotels as well ratings, number of ratings, price, provenance along with a detail of the number of websites the price is compared from and an uncatchy CTA button to “View Deal”. It seemed important during this process to clear up this feature, make information clearer and focuses in on the most important information that users need to see straight away keeping in mind that clicking on a hotel will give them all of the information they need if the accommodation suits their taste.
As Tripadvisor is a community-oriented app, I decided to keep the rating and number of reviews, but remove small details like the rank of the best value and the number of comparators used. I updated the look of the page, all while keeping the price, the provenance of the best price and curved the CTA and changed its’ label from View Deal to Book for effectiveness. Finally, I moved the Like button to the card instead of the image so users can see and use it more easily.
Redesigning and wireframing
Though lo-fi wireframes would have sufficed, I was working on this last project at the same time as being a UX/UI intern at V-Cult in Lille. I decided to develop and design these wireframes a bit more to take the opportunity to not only play around with Figma than I would have otherwise but also to be able to talk about design trends and have input from my trainer Quentin Vialatte, who is the UX Designer at V-Cult.
Take-Aways
The most important realisation I had over this process was how complex Figma is as a tool. I had already somewhat played around with it but I hadn’t even scratched the surface of everything one can achieve with it, and I don’t think I have yet.
Though I spent a bit more time on UI than the UX process, it’s becoming clear how much of a rigorous process Usability and User Testing can be. It’s a time consuming and complex process and requires you to remove yourself from the equation. I had already experienced the later in the first project I had to undertake for CityMapper, but it was even more so the case in this context where I was redesigning for a very specific group of users that I was not a part of.
This project also gave me an insight into the thoroughness necessary to work on a site redesign. I found myself often getting carried away and wanting to do more than I had to, leading me to lose time. Thoroughness is also necessary from the very beginning of the project, which is something that I discovered when I realised I wasn’t organising and classing my different files and components in a correct fashion, which made me have to often restart or unnecessarily play around.
I think the main takeaway of this project is if you look at the words Plan Trip for long enough, they stop making sense.
