Blog homeThe Travelocity innovation design team do what they say on the tin - they innovate.
However, you don’t often get to see what they have been working on. That is probably how they would prefer it to stay.
Following yesterday’s post about the Travelocity travel plan creator, I received an email from Travelocity PR taking me in another direction….. which lead me to finding these screenshots of a Flash based single screen checkout process for a hotel reservation. Here they are:
Product review
You can see the hotel name, rating, start and end date….. There is also a field for entering in a promotional code:
Failed login
Presumably the checking whether the user is valid (and they have the correct password) all takes place on one screen:
Terms & Conditions acceptance
If I were designing this in Flash, I would try to make this section printable. Looks like they have a print icon on the other pages - just not on this flash “popup”.
Payment entry
You can see the “accordion” style navigation in the top left…. showing the user pages that have been completed on the single screen. There is also a process flow status in the top right…. Search, select, review, reserve, confirm.
Complete the reservation
Nice that it suggests a log-in name on the left….. you can also choose to get email in either HTML or text only… not sure if users understand that question.
The confirmation page
Needs more work!
This booking process reminds me slightly of the hotel booking system from iHotelier (in that it is single screen) - however it looks cleaner. I only have the screen design mockups - not a full working system - so it is difficult to judge. Last time I tested the iHotelier system (for some competitor research) (we did a full usability test with external testers etc) - the iHotelier system came off really badly vs a well refined multi screen approach taken by, for example, Expedia.
The iHotelier system was particularly poor where the selection process between multiple properties was on a single screen (such as it would be on a destination portal). iHotelier works better when added to a single property website…. so its just a date / room type selection issue. This Travelocity system looks like the product selection takes place elsewhere…. so won’t have to resolve those design issues.
This design by Travelocity was done in March 2006. It is not live.
If you want to be notified next time something is published sign up for email alerts or subscribe to the RSS feed. Thank you for reading!
is that really single screen? looks like there are mutiple screens.
Hi Michal,
Thanks for your comment.
I guess the answer depends on how you define screens. As these are not “HTML” pages (because it is Flash based) the process takes place without page refresh - which I think is commonly considered to be “single screen”.
Travelocity have referred to this design as a single screen checkout path and I am happy to go with that
Hi Alex, a single screen checkout is NOT really new (leaving the flash-based part!) - you may want to check www.paguna.com which has been offering this for a few months now (guess where Travelocity got the ‘innovative’ idea from?)- but this is Ajax-based. I found it works fine and is really single screen, the layout and colors could do well with some tweaks though! Do have a look yourself!
Please have a look at the ClearTRip website - www.cleartrip.com. They have a great navigation too on similar lines.
hubX/SynXis has had this for the last 5 years. Way better than iHotelier.
https://reservations.synxis.com/opbe/rez.aspx?hotel=11719
I felt obligated to post an example of iHotelier since Ryan has a bias review… I read he was the developer for the hubX/SynXis checkout system. iHotelier has two checkout systems… Both award-winning. OneScreen has been around for six years and iStay is the next generation of OneScreen. Here’s the links for iHotelier. You can decide which is better.
OneScreen Example:
https://reservations.ihotelier.com/onescreen.cfm?hotelid=2655&languageid=1
iStay Example:
https://reservations.ihotelier.com/istay.cfm?hotelid=2681