Wire-framing: Reverse engineering TripAdvisor

Jordin van Deyl
Oct 28 · 5 min read

My girlfriend and I were standing in the centre of Rome and we were hungry. But only spending a few days in this amazing city we did not want to waste a romantic dinner at a bad restaurant. How did TripAdvisor help us find a good place to eat?

Image by Jorge Zapata (Mérida, Mexico)

How does TripAdvisor help us pick a restaurant?

Often, when I am on holiday, I want to try local cuisine or just enjoy good food. However, with the wide range of restaurants available it can be hard to choose. Tripadvisor is our go-to app whenever we can’t decide. So what exactly does picking a restaurant with the app look like?

In this article I will be using wireframes to break down the structure of the TripAdvisor app. I will then look at the UI elements and make a task analysis of the process to find out what makes the app so easy to use.


We start with wire-framing

The easiest way to describe wireframes is by thinking of really simple, black and white, drawings of screens. Visual representations with just enough detail to be understood. They are meant to be quick and rough, so you have something to test that is easy to change. In this case, however, the main reason for making a wireframe is taking away all the design and unnecessary content of an existing application to focus on the process underneath.

In the wireframe below (see it live here with Invision) I have included the six screens I see when looking for a restaurant.

The first screen shows the app’s home. From here the user can choose to look for different things like; hotels, things to do, restaurants and more. Choosing the option ‘restaurants’ brings up the next screen. From here I put in ‘Utrecht’ (a city near my hometown).

Home and putting in destination

Focusing on the city of Utrecht I have several ways to navigate. I can search based on the map, based on recommendations or I could redefine my search from the start. I personally like using the map. This gives me options nearest to me. Clicking the map expands it for easier use.

Browsing options and opening the map

To see more information about the individual restaurants I can click their locations on the map. This brings out a small window with the most important information. Finally I press the picture of the restaurant, or the button, to bring up a complete overview of the restaurant. Buon appetito!

Getting simple and detailed restaurant information

What UI elements does Tripadvisor use?

I will distinguish the different User Interface elements, encountered in this screen-flow, into three groups:

→ Input controls: TripAdvisor really tries to simplify its process. They use ‘buttons’ and an occasional ‘text field’. Options such as ‘near to me’ or a list with ‘recent’ locations are meant to provide shortcuts that reduce the amount of input required from the user.

→ Navigational components: In my opinion the most prominent component is the use of ‘image carousels’. The first example is on the home screen. Instead of having a long, scrollable, list of restaurants you can swipe to the left to see more options. This keeps the screen shorter and easier to navigate. Other elements include the ‘search field’ and the use of ‘icons’. These icons are used both to navigate categories from the main menu, and also in the main navigation at the bottom of the screen.

→ Informational components: The strength of TripAdvisor is its user based reviews. They demonstrate these in a clear way. The overal rating, for example, is visualized using ‘icons’. They also provide a small ‘tag’ with the distance to the location and the ‘number’ of reviews that makes up a score.

Overall Tripadvisor has an easy way to navigate in which they try to provide shortcuts and summarize information visually. With a few taps you have an overview of restaurants close to you. The only thing left is to choose.

What tasks does a user complete?

The main goal a user is trying to complete is: ‘Try to find a restaurant nearby with good reviews.’ The app offers different ways no navigate and reach the goal, so a diagram would be a good way to visualize this. But the steps taken in the wireframe are straightforward and can also be shown with a list:

  1. Open the application on a mobile device
  2. Choose the category ‘restaurant’s from the shown icons
  3. Input a city/location or select ‘somewhere nearby’
  4. Tap the map
  5. Tap one of the restaurants on the map
  6. Inspect the reviews
  7. Go the restaurant/make a reservation, or return to step 5.

To aid in reaching the goal TripAdvisor helps the user navigate from ‘broad categories’ like restaurants or hotels, to more specific search queries. In this example we first restrict our search to a city or location, then further narrow our search by vicinity and finally we compare the ratings of restaurants. This is a ‘logical’ way to search. In contrast; Imagine starting with a list of top rated restaurants and hotels and then having to search by location. You would still be seeing a lot of hotels, which you are not really looking for!


Conclusion

We can learn a lot by reverse engineering existing applications. In this example I made wireframes of the screens I went through while finding a restaurant nearby. Doing this helped me identify the most important UI elements and identify a simple Task Analysis.

This showed TripAdvisor has an easy way to navigate (reducing the amount of input and visualizing information) and takes you along ‘step-by-step’ in a logical way. Together this makes for an easy experience that helps users quickly reach their goal.

Final note

During my research, and during my personal use of the app, I have experienced there are many ways to reach a goal (like finding a restaurant). For this reason I restricted the Task Analysis to the shown wireframe, or it would have gone way beyond the scope of the case-study. However, this also brings some risks. I have, on occasion, found myself somewhat lost and disoriented in the app. This meant I sometimes had to go back to the main screen and start my search again (using a different route). TripAdvisor does not use breadcrumbs, and sometimes has a little inconsistent design (like a missing ‘back’ option). Adding these might just make it even easier to find some good pizza!

If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!

Jordin van Deyl

Written by

I’m a UX designer with a background in work- and organizational psychology and an interest in all things neuro and behavioral www.jordinvandeyl.nl

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade