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.

wide view of the cover section

wide view of the cover section

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.

narrow view of the cover section of the Hotels.com Hotels Price Index 2012

narrow view of the cover section

wide view of a page section

wide view of a page section

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.

narrow view of a page section

narrow view of a page section

wide view of a graph section

wide view of a graph section

Time meant sacrificing a lot with the infographics. If I had more time, I would have made the graphs into SVG so they were crisper at any width or screen resolution. I had even more time, I would have tried to find a javascript solution which rendered the infographics straight from the tabular data. I managed to create the graphs so that they replaced the tabular data via javascript. This meant that screen readers, or users without javascript, could easily access the raw data.

middling view of a graph section

middling view of a graph section

narrow view of a graph section

narrow view of a graph section