Travel planning UX/UI evolution: selecting the attraction types

Itini aims to create a trip that perfectly matches your travel preferences. In this article, I will cover the evolution of the screen that allows setting these preferences.

Which preferences are we talking about?

Good question! The personal travel preferences can be as generic as “I like nice beaches” and as specific as “On rainy mornings I prefer to find myself drinking flat-white coffee from medium-roasted beans while having enough Wi-Fi bandwidth to watch TED at the same time”.

For the start, we’ve decided to handle a more generic set of requirements:

• The trip dates
• Popularity: do you want to blend with locals or visit mainstream places?
• Pace: how fast would you like to travel? (e.g. get off the plane, grab a motorbike and visit everything in one day or explore slowly visiting an attraction or two each day)

The second set of parameters allows the traveler to select which types of attractions he prefers to visit in general (such as history, art, beaches, shopping, etc). Here comes the catch: we wanted a traveler to select his level of interest for each particular type of attraction.

As you can see, that’s quite an important step in creating a trip. And that’s where we’ve faced a challenge to make that step simple and clear.

v1

The very first sketch of the trip creation screen: there were cards with 3 levels of “weight” (which represented the level of interest in a particular attraction type). Right away we got a brutal problem: our first users simply couldn’t understand the cards are tappable. Probably you don’t get it either, that’s ok — keep reading :)

v2

The second version came along with the facelift of the entire app. We made the UI much cleaner and renamed the attraction categories. We also displayed the levels of interest for each attraction type in a more straightforward way (or so we believed) by adding 3 shades of concentric circles with growing diameters.

Guess what? Half of the people really liked the colorful “balloons” and started to tap on the circles! Yet, they still couldn’t understand what the different diameters represent. The other half couldn’t even the 3 degrees for each balloon.

v2.5

We thought that a hint (read: a quick patch) will solve the problem. A neat tutorial box showed up when the user opened the app for the first time:

The dialog didn’t help either, so we continued on our quest to find a more intuitive solution.

v3

To represent various levels of interest, we considered a few more options:

We settled on the first (upmost) idea and decided to increase the diameter and the icon size leaving the perimeter thin and contrast.

We also modified the message. Do you see how specific our directions were?

Yet no significant improvement was observed during the user labs (Sasha Abramovich couldn’t miss a traveler without offering him to try the app). The long text didn’t make the selector purpose much clearer.

v3

We kept brainstorming, we wanted to invent a representation that will be super-clear from the first glance. We decided to experiment out of the box showing animated numbers, displayed with every tap for a short time just before the circle became bitter. Imagine how cool these transitions were looking like!

Hooray! People finally noticed that the circle state changes with each click but they couldn’t get a clue what the numbers represent. “Is it a number of days allocated for each attraction type?” they were asking? 🤦‍♀️

v4

The quest continued. Suddenly I woke up with a solution proven intuitive for everyone: a three-sector pie chart, updated with each tap!

It made sense and became eye-pleasing to everyone. People became so happy to use this screen, that we’ve restored the old (short) description. The explanatory dialogue box also became redundant. Less is more.

We added an option to reset the screen to its default state:

We felt well-rewarded with a lot of good feedback from our users regarding the simpler and nicer trip creation flow. We’ve learned by that example the importance of small details. Especially when the story is about a travel app of a kind the world had never seen before.

Come discover Itini!

Download Itini app

сVisit our website

Join the early adopters’ group on Facebook

Follow our page on LinkedIn