Resfinity Hotel 2012

case study from front-end developer view

by Krzysztof Urbas more about the author

Brief

Our aim was to build the new Hotel Booking application based on Hotel API. The team consisted of one back-end and one front-end (that was me) developer, and of course we had contact with Product Owner. I had some experience in building UX for Hotel Booking applications and we as company have some data based on our current working in production application. So we quite well knew what we are going to do, had some statistics what works and what not, but we also wanted to add some new, fresh features to get ahead of the competition.

one of concept designs for Resfinity logo by external designer

Technology

Our current Hotel IBE (Internet Booking Engine) was build few years ago with redesign more than a two years ago. It was based on ASP.NET framework. In the new IBE we decided to use Rails as our backend framework together with a lot of helpfull frontend tools provided right out of the box: SASS (in fact I prefer SCSS syntax) with Compass, HAML and CoffeeScript with AssetPipeline. Next we decided to use jQuery (nothing special here), backbone.js (to keep client’s code organized) together with Handlebars as our client’s side templating engine. We also use Jasmine to test our front-end code.

jquery.tooltip.delegate in action

Front-end tools

  • AssetPipeline from Rails
  • HAML
  • SASS with Compass
  • CoffeeScript
  • jQuery
  • backbone.js & underscore.js
  • Handlebars.js
  • GoogleMaps API
  • Jasmine
  • a few self written jquery.plugins

Phase 1. Planning

img
I know that my sketches are a bit chaotic but they help me a lot

We would like to take what worked in our current IBE and change what not. I made a comprehensive analysis of our competition’s apps (total of 11) like booking.com or agoda.de. Most of them had similar features and layouts but there were also quite innovative solutions like Google Hotel Finder or hipmunk.com. We also knew, that despite the innovation, our target users (mainly Germans) are quite used to well known solutions for them. So we need to find a balance. We would like to push our users a bit forward but in the way they would still feel comfortable with our app.

So I started sketching and noting all ideas for features and solutions, all that could be helpfull in the future of our project. We had the basic idea, we already knew the flow and how many steps we need to prepare for user to finish its task with our app. The two main challenges were Hotels Page, with list of all available hotels, and Hotel Page, with all the details of selected hotel and room selection.

Phase 2. Prototyping

It was time to get our hands dirty with some coding. The first page of the flow was Start Page, consisting of search form, as minimal as possible. I pushed on removing all unnecessary fields because our goal here was to take users on Hotels Page as quick as possible.

As we were in prototyping phase I did minimal styling and basic layout, just to show functions of the elements.

next »
img
image of old and prototype of new start mask

The second page (Hotels Page) was huge challenge as we had a lot of features to present here. The main aim of users on this page was to find best hotel for them, that fulfills all their criteria. We started with displaying list of available hotels, then added some sorting and filtering posibilities. Each hotel has a lot of attributes by which it could be categorized like rating, special deals, facilities, location etc. And we also need to display all of them for the users to decide. The important part of this page was map with the hotels but I will get back to it later. From the technical point of view, page is mainly rendered on the client’s side to make the interaction more smooth.

next »
img
prototype of Hotels Page with map

The third page (Hotel page) was fully redesigned. I came to quite oposite idea than in our current IBE and in most of competition. Instead of displaying a lot of hotel’s detailed information in tabs, let’s display them one after the other in one long page and let’s add some handy page menu to navigate between the sections. I also redesigned the photo gallery.

next »
img
prototype of single Hotel Page

Ok, so we had prototypes of our two main challenges, we had approval of our Product Owner and some positive feedback from people not involved in project (as our low budget UX testing group). Next we decided to add some design, as the following steps were only a checkout process (I know that checkout steps are important but we decided to build them after first 3 steps would be ready).

img
screen of Hotel List Page from our old application

Phase 3. Design

img
one of early mockups with my comments, we were using invisionapp.com

I am not a graphic designer (rather CSS3 designer), and I did a lot of designing for our current IBE, so I convinced our Product Owner (and Manager in the same person) that we should involve someone from outside of the company, a well skilled graphic designer with fresh look at our application.

So one page after another we prepared beautiful and usable mockups. My cooperation with graphic designer began from specifying all requirements and contents of each page, then in short iteration we focused on single elements of pages, improving them till I was fully satisfied.

Phase 4. Implementation

We already had a lot of working code after prototyping phase. And we did not have much time till deadline. So while waiting for new designs from graphic designer, I was implementing the already accepted ones, changing prototypes into final product.

img
I couldn't find a photo of implementing the Hotel IBE but the one fits here as well :)

Highlights

img
Hotels Page waits for response from Hotel API
img
Map with hotels and hotel details on Hotels Page

Map displayed by default

Hotels Page is the one when users need to wait a bit for available hotels fullfilling their search query. We wanted to make the loading time less annoying and we used map to that. We are loading map for queried location under the spinner, making the feel that something is happening and there is some progress. In addition we show tips, trying to teach users, not just waste their time.

We also wanted push users to use map as this is perfect way to find their hotels. So we decided to show the map with hotels by default. We added search by location feature to easily take user to prefered city region, which also works as filter. Each step user takes on Hotels Page leads her to best fitted offer.

next »
img
Shortlist switcher on Top Bar follows you and gives you info about how many hotels are currently on your Shortlist

Shortlist

When browsing through list of hotels users often find some good looking offers. Now they can add them to Shortlist and compare them later. This feature works as filter and helps users to concentrate on selected offers.

next »
img
Step 1. Initial concept from graphic designer
img
Step 2a. After explaining how it should work :)
img
Step 2b. Concept of box with longer description
img
Step 3. Box with all posible features enabled! Finall design.
next »

Single hotel item on the list

This is simplified story of how we iterated with single hotel box design and what we achieved at the end.

next »
img
When you scroll down Hotel Page the navigation is always with you

Page navigation on Hotel Page

As I mentioned before Hotel Page was completely redesigned. I decided to build one, long template in a bit magazine layout. Each section is nicely composed with others. I added page navigation to easily scroll between sections and highlight current window position. I wrote jquery.on-page-navigator and jquery.positioner for this purpose.

next »
img
New photo gallery on Hotel Page in action

New photo gallery

I redesigned the photo gallery to be more usable. Users mostly want to get overview of the hotel as quick as possible and if it doesn’t fit their criteria switch to another one. The old gallery forces users to click on each photo. With new gallery user can have overview of the hotel just hovering over the thumbnails.

next »
img
At the bottom of Hotel Page user can find Similar Hotels section, on the screen you can see that backend hadn't supported this feature when the screenshot was taken :)

Similar hotels section

This is taken from e-commerce and fits here as well as booking hotel is similar to online shopping. I introduced Similar Hotels section at the end of Hotel Page to guide user to other interesting offers for her if she found something unsuitable in the browsed one.

next »
img
Payment details section on Payment Page

User friendly forms

I know how important is not to lose potential customer in last steps of checkout process so we guide users gently through short fieldsets. We clearly inform why we need such data and what user should expect on the next page. When validation fails the window is scrolled to first invalid field.

next »
this is what IE6 user sees when visiting Hotel application

IE6 not supported but still user friendly

We decided not to waste time for IE6 support as it was only 0.67% of our users in previous three months. So I just did screen with proper information.

All other popular browsers are supported including IE7+, Firefox 3+, Chrome, Safari and Opera. It also works great on tablets.

next »
img
Application is also usable on narrower screens

Fluid layout between 720 and 1100px

Responsive design wasn’t our goal, as we targeted only desktop users, but our application is used by different clients and needs to be adjusted to look and feel of client’s portals. Some of them even put our IBE in iframe. I had some issues with that in the past so now I decided to make the layout fluid to better fit different widths of our client’s sites.

Summary

The project took about 3 months. We designed some more features than we were able to implement during that period, mainly because of technical resons (like Hotel API had not been supporting the feature yet). We left them for future iterations but the main flow was finished. We could switch our first users to new IBE and start Phase 5: Testing.

page with confirmation and booking number means all went good
build on case.study.template by Krzysztof Urbas (@krzysu) | some icons by Alex Peattie (@alexpeattie)