Global Product Rebrand

The Hotels.com brand, carried through the mobile products.

Product design · iOS, Android and web

The products did not match

I led the refresh from the product side. The growth was with a newer kind of traveller, and the brand had to hold together on the phone, the site, email, and merchandising. It did not. Each surface had its own version.

The white Hotels.com wordmark and striped H over a pink sunset beach, framed by palm fronds.
An iMac, an iPad, and an iPhone on a desk, all showing the Hotels.com site and app.An iMac, an iPad, and an iPhone on a desk, all showing the Hotels.com site and app.
The site, the app, and a phone browser, side by side. The desktop is a search over Tower Bridge. The app is recent searches. The phone is a Berlin search on uk.hotels.com.
Emails and a booking note that do not match. A purple extra-night offer, a gold rewards email, a 48 hour sale, a phone search, and a long booking receipt.
A collage of Hotels.com ads and social posts. A YouTube card, banners in more than one language, and the striped H with the wordmark at the right.

The mark and the icon

The logo stayed recognisable. The wordmark and the stacked H had to sit in one system, in the brand type and the brand colours. We started with the app icon, then Rewards, then the other markets.

The H was cleaned up, and the wordmark moved to sit with the mark, including inside the icon shape.

Explorations of the app icon. The H on a phone home screen, flat versions of the mark, and a solid model of the H.
The Hotels.com H before and after the refresh, including a taller crossbar, and the wordmark set beside the mark and inside the app icon.
The H and the wordmark in red, white, and grey, beside Hotels.com Rewards lockups that add Chinese, including silver and gold.

Colour, type, and photography

Colour had to pass WCAG AA. The interface colours stayed, and were adapted, including a dark mode for Android Q and iOS 13. They were checked on the phone and on the desktop.

Type was the open question: a face of our own, or the system font. The trials ran on iOS, Android, and the web. The sheet sets Hotels Proxima Soft beside the system faces.

Photography was of destinations, with people in it. Hotel photography was not ours to change.

The sheets are the palette, a contrast check on a blue button, and an Android type trial. The trial’s own note says to stick with the system font for now, and to try a custom face only from a certain size.

Colour chips grouped as brand, UI, rewards, greyscale, alpha, and social. The brand row starts with the red H.
A sheet titled UI palette example, naming and accessibility. Red, blue, and green ramps with hex values, a blue button measured at 5.38 to 1, and an HSL colour picker.
A type sheet on black. Hotels Proxima Soft beside the system faces for the web, iOS, and Android, with sizes marked from a large title down to captions.
Example results of an Android spike. Two phones with rules drawn over the type, a Hungarian recent-search circled, and a conclusion that says stick to the system font for now.
Destination photographs with people in them: pools, cities, and travel, the kind of picture the brand wanted.
Three offer cards. Summer adventures, holiday homes, and on the road escapes.

Next

Product design

Mobile Key

Keyless entry, so the room opens from the phone.