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.
The HiltonHonors car codebase alone was approximately a few thousand lines of code altogether.
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.