Hotels.com Hotel Price Index Mini Site
January to February, 2013
I was really lucky to be asked by 33 Digital to join their Hotels.com Hotel Price Index project. Their designer was creating a beautiful printed book for the Hotel Price Index and I was to design the first ever web version, and make it responsive.
This project was full of unique challenges. Firstly, to keep the feel of the printed book. I was determined for the experience to be as similar as possible to that print quality, but without cheesy page-turn animations, un-selectable text and other poor experiences usually associated with printed work on the web. Secondly, we had a very tight deadline that could not be missed. This meant carefully prioritising what could be achieved.
I chose particular parts of the printed book to translate on to the web. The cover was a difficult choice. Websites just don’t have covers, but the cover of a printed book is a huge part of the reading experience. I decided to use the full cover image, but to trim it down on narrower viewports so that you still got the immersive big-image feel, rather than just a scaled-down skyline that could lose its impact.
A contents section was also a step away from conventional web navigation, but actually works out as a very reasonable solution for responsive web design. Each page header contains a link back to the contents list on the first page. This has the consistency with the printed book and also meant we didn’t have to spend time creating a fancy sliding, hiding or intrusive responsive navigation menu.
The graphs were a very time-consuming part of the project. Infographics and tabular data make up a huge part of the Hotel Price Index, and I wanted that content to remain as easy as possible to digest, no matter what the viewport width. This often meant getting creative with how the graphs adapted to viewport size. For some graphs, I swapped their axis, as if switching between landscape and portrait modes, to make the data easier to read. For maps, I split them across time zones, so all the data within the map was still readable on very narrow viewports.