It began with a demo.
Our mobile hotel search app was weeks away from shipping. The UI was tight, performance was shaping up and the punchlist was shrinking.
But there was a problem. Jacqueline, our press whisperer, did a hotel search in the new app. She couldn’t figure out which, from the dozens of hotels depicted on the map, was the one she actually wanted – and didn’t know where to start.
While seeing all those options from the comfort of a desktop’s huge screen wasn’t bad, now the results were unusable. We debated changes but my head wasn’t really in it. My ears were ringing.
For all our slick UI and data visualization, we were nowhere in terms of making it easy and fast to find a great hotel from your phone.
We’d failed.
Alongside this, I’d been devouring Edward Tufte’s Envisioning Information. The book is packed with styles and strategies for displaying data, along with analysis and cautionary tales. On the train one morning, I turned a page then violently emptied the contents of my forehead onto the seat in front of me.
For on that page, Tufte had helpfully supplied the solution to our problem.
This diagram combines two intricate layers of information: component illustrations and their identifying numbers. One is rendered in grayscale, the other red. Despite the complexity, the image comes apart quickly and cleanly. With this example in hand, redesigning the dots’ behavior and appearance went quickly.
We could fill the entire map with hotels, as we already were, but now we’d only color rooms whose stats made them worth recommending. The rest would appear grayer and smaller – easily ignored, but still illustrating the contours of an area’s hotels. When the user moves or zooms the map, we do all the math again, coloring only the best options in the new region.
The effect draws your eye to investigate the creme-de-la-creme. From there, UI mechanics take over to examine hotels without leaving the map. Before you know it, you’re making choices.
It was also important to make scanning hotel lists easier on the eye. Hotels are broken into three price buckets: cheap (green), average (blue) and pricey (red). Room prices were set in the color of their bucket. Because each price was different, interpreting bucket meant actually reading the colored text, which takes a little time. By setting the price in a simple badge that’s always the same size and position, the user only needs to glance to know a hotel’s bucket. A small detail, sure, but it makes a big difference with momentum scrolling.
The resulting experience was so quick and satisfying, we wanted it on the site, too. So go try out the new Hipmunk Hotel search for Android, iOS, and now, the web.
— Danilo
