Icons

2015 - Laterooms.com, iOS and Android apps

LateRooms is one of the UK’s leading hotel reservation sites, with a huge selections of UK hotels. The icon set used in the website and apps had grown but not audited. To the point where adding to or updating them was difficult.

Summary

I believe that icons are very important to a design. They have to convey meaning to a user and efficiently. An efficient design system can help with creation of new icons. New team members can then easily create new ones that feel part of a set.

The previous icons didn't do many of these things and suffered from several issues. They were from different icon sets and designed by different designers without rules. Some of the original vectors had been lost - leaving flattened pngs or screen-shots to work from. They were not designed at the right size - which meant they often blurred on older devices and computers.

If icons are designed to the size they're intended for and to a pixel grid they're clearer on all devices. So, if you icons are going to appear within a 20px high and 20px wide area - then that is the size they should be designed at. Sketch, Affinity Designer and Illustrator all support switching to a pixel view.

Here is an example of why this is important:

Examples of icons designed to pixel grid - and those that aren't.

The icons above that are designed to the pixel grid don't blur and lose definition as much as the ones that aren't.

Designs

The new icon set, designed for consistency and clarity:

Icon set, designed to fit within 20px by 20px area.

Using the new principles and having all icons in vector format we were able to update the icons on the apps:

Icons implemented in the iOS and Android apps.

Outcomes

Icons can be seen in the iOS app - awaiting roll out on Android app and web. Icons still need to be tested with users to validate the new designs.