Web 08

The user has arrived at the hotel's room service menu. They're likely to be hungry, so they select a category and tap the Add to Cart button on the item they want. If the item has options for the guest to choose from, a modal screen is animated into view where questions and answers are displayed, else they are forwarded directly the Cart summary screen. Hotel CMS admins can make some or all of the options required in order for the user to request it.


Web 08

The user is now presented with the Cart summary screen where they can review the options they've requested for each item. Here, the user can edit or delete items from the Cart, return to continue browsing the menu, or tap the CTA button labeled, Proceed to Checkout. The guest is prompted to authenticate using their last name and room number. Upon system verification, they are presented with a Checkout view to see a simple list of their requested item(s) and the grand total.


Web 08

The system defaults payment to a room charge but hotel admins can enable the feature for users to pay with cash or credit. Guests can also prepay gratuity in the Payment view. Hitting Submit will take the user to the Confirmation screen.


Web 08

The confirmation screen indicates the amount that will be charged and verifies the card type used. I created a fun animation to wrap up the experience. Check out the svg/javascript code on codepen.io or click below to play.


Web 08

On tablet size screens the user is presented with up to three layers of nested menu content: Breakfast > Quick > Yogurt. Also, the Cart is visible.


Web 08

The modal on tablet is animated in and centered in the viewport.


Web 08

With the persistantly visible Cart users can always check what they've added and make changes easily.


Web 08

As with mobile, when the user taps, Proceed to Checkout, they are prompted to authenticate as a hotel guest.


Web 08

In this example the hotel does not present alternative payment methods at checkout. The room service request is charged to the room and the guest user can find it later on the folio.


Web 08

Lastly, guests are presented with buttons, Message Staff or Review Order. Tapping Done will clear the confirmation screen and display an empty cart.


Web 08

UI mock-up of the initial view of the room service experience on tablet with the Radisson Blu branding applied.