ct-blog flight hotel local

[Design Nuances] Redesigning the hotel icon

In 1974, the United States Department of Transportation commissioned the American Institute of Graphic Arts to design a set of pictograms in the domain of public transportation, more commonly known as the DOT pictograms.

This system of 50 symbol signs was designed for use at the crossroads of modern life: in airports and other transportation hubs and at large international events. They are an example of how public-minded designers can address a universal communication need.

One of the most effective artifacts of communication today, these pictograms have over the years assisted millions of travellers of different ages and cultures. It’s an inspiration for anyone in the field of information design. The sheer simplicity of these pictograms is what makes them so timeless and universally accepted.

At Cleartrip, we draw a lot of inspiration from things that we find useful and the DOT set of pictograms has always had a huge influence on our fundamental approach to design. When it came time to pick icons for our core products we didn’t have to look elsewhere. It was like finding the perfect mate.

Here’s how we’ve been using the DOT pictograms across different Cleartrip products:

These pictograms were originally designed to be used in signage at large sizes, however, some of them take a hit on sharpness and fidelity when used in digital products. The problem gets more acute as the icons are scaled down to 24px or 16px. Of the lot, the one icon we’ve always struggled with is the icon used to represent hotels. Here’s how the original hotel icon scales down.

It looks fairly muddy at it’s smallest size. The only way to retain sharpness at smaller sizes was to find an icon with fewer details. While exploring alternatives, we first tried using a hotel icon from the cartographic symbols commissioned by the American National Park Service. We worked it into our icon navigation to see if it fared better than the DOT pictogram:

The visual weight of hotel icon is not entirely proportionate to the weight of the flight and train icons. Also, it didn’t have the character of the original DOT pictogram. We weren’t happy with this icon, but it planted a seed in our mind in terms of the direction we needed to take.

We started tweaking the original DOT pictogram. Inspired by the icon we sourced from The Noun Project, we got rid of all the unnecessary details — the foot board, the separation of the blanket and rounded corners at the bottom and designed our own icon. This is the new icon we created, scaled to various sizes:

For use in our primary navigation we sharpened all the icons up a little further by adding subtle gradients and inset shadows. This is a comparison of all the three icons in our navigation:

We’ve tried our best to adapt the original pictogram and optimise it for desktops and smaller mobile device screens, while retaining its character so it continues to be easily recognisable. We’re thrilled with the output — we think it looks and works great.

Note: At the time of going to press, the new hotel icon and visual treatment are only live on our blog; we will be rolling them out across the board over the next few days.