One of my most favorite projects that I’ve had a chance to work on was the HiltonHonors Cars Rental system. The system is a fully responsive, PHP and JavaScript based web application that was launched late 2012. The screenshots that I have to write this post is from being an actual member and logged on. It sure brings back memories – good and bad. My role in the project was a developer.

Responsive Design

I believe the system was running on the front end framework Bootstrap. We had to build it completely from scratch because this was a new feature. The pages weren’t entirely complicated – we had to keep it simple, because each page has a lot of moving parts.

For instance, the results page had a filtering system which in the desktop view – appeared as a matrix and a sidebar. The matrix alone was a complex set of information about the current result set.

From this matrix, you can narrow your search results down. The sidebar had a similar filter feature – just presented in a different way. Sorting was also also available in tabs right above the results.

When it came down to mobile, a lot of these filters where hidden and presented in a separate modal window due to lack of real estate. The results grid in a phone – I must say, is quite cool to look at because the thumbnails of the cars were bigger, and the car details and buttons were center aligned.

Modals, widgets and more

Back in desktop, you will see in the short movie below – the “modify search” form that is inside a modal window. The location inputs’ auto-suggest feature is customized to grab data from different APIs. The car company logos, along with the “airport” icon was also added for visual treat.

Date pickers had their own logic as well – which only lets you pick a pre-defined set of dates. The “Pick-up” and “Drop-off” are also aware of each other’s values – which has to adjust accordingly.

Pushing for Points

Since the system was designed on maximizing the user’s spend, you will notice that the UI follows that exact idea. There are steps for every step of the process, although wasn’t really a way for you to get back. Also, upgrading your selection is always more prominent than what you’ve already selected. In addition, all terms and regulations are required to be in the page, but is hidden until clicked.

Regardless, the pages are still well designed and easy to use.

There was a lot of JavaScript involved in the work, but the base is a PHP framework called “Zend Framework“. Zend is an MVC style system which makes it ideal for large complex applications.

The HiltonHonors car codebase alone was approximately a few thousand lines of code altogether.

Conclusion

As I’ve mentioned, this was one of my favorite projects that I worked on. Primarily because responsive design was still new. I constantly had to keep checking the various screen sizes every step of the way. Above all, the client was very happy with the output.

This project also allowed me to shift towards front end development. HTML5 and CSS3 had become more prevalent, as well as JavaScript was taking mainstream. Lastly, seeing and actually using the product to book a car was a cool experience.