[Design nuances] Cleartrip Activities

Couple of weeks back, we announced our latest product — Cleartrip Activities. We sincerely hope that your weekends are never boring — ever! Today, we will share some of the nuances which went into designing the product.

We had 3 clear objectives with respect to design

• A big part of travel is inspiration. Only if we get inspired, we try out new things. We wanted the new product to be inspiring people to head out.

• At the same time, because of the lower ticket sizes involved, we wanted it to be light. No heavy duty consumption of content.

• Activities are fun, and we wanted the design to showcase it.

The result was a more informal design language, which we will talk about in detail in the post below.

Activities collection page

This mainly showcases all the types of activities one can experience in a city. We tried multiple options but most of them either looked very flat or too busy. The grid layout gives it a editorial look and also makes sure we have at least 3 to 4 collections shown upfront on smaller devices. We seldom use “The Sans” font, but in this case, we wanted to give it a magazine editorial character. The collections which have multiple activities inside it are indicated by a small subtext counter.

Activity listing page

This screen lists out activities of similar type. For eg. All cycle rides in Bangalore. Each card shows title, timings and price. The timings are represented in a such a way that, the exact day and time is shown if the activity runs less than 3 times a week. If it runs more than 3 times, we just show that it runs on multiple days and at multiple times. This keeps the layout clean and simple.

Activity details page

This was the most exciting and challenging screen of the product. We are really happy the way it has turned out. Initial iterations were more on the lines of Cleartrip hotel details page where the information is much structured and functional. Since activities have a smaller ticket size, we wanted to be a bit more experimental in the approach. Thus we have a lot of white space.

The first block covers up the most important information. Image, price, title, one line description, time & the activity location. This, we felt is enough for a user to get interested and read further. Time also has got tags for quick reference — morning, afternoon or all day long.

The second block mainly talks about audience fit for that activity, and also details about the pricing. The initial idea of representing prices was to make a table, but it seemed too structured. The revised look is meant towards the most often use case, and for other edge cases there is a fall back with titles. Inclusions and pick up points or meeting points are mentioned next.

The third section highlights one photo to break the monotony and talks in detail about the activity. “Read more” takes you to a modal which describes the entire activity details along with cancellation information and other highlights.

The fourth and the last section shows Organiser details, Address of the activity on a map, Things to carry and any specific notes from the organiser.

Once you’ve decided on an activity, you can choose the date, time slot, number of travellers and, then you enter the seamless Cleartrip booking experience with which you’re already familiar.

You can access all your booked activities in “My trips” on the app itself. They also show up on the desktop site incase if you wish to print invoices and do more.

The look and feel of this product has been intentionally designed to be different than the rest of the app. It doesn’t follow the conventional style, but yet it flows with the product in hand. The early feedback has been very encouraging, and gives us more motivation to experiment & explore new design patterns. Do let us know what you think of the new approach.

Originally published at blog.cleartrip.com on September 10, 2015.