Check Out Experience

The Check Out Experience on the Hotel Tonight iOS app had not been updated in years. Working with a Product Manager, we analysed where customers experienced friction and set out to modernise and improve the overall flow.
My Role

I designed the UI, the Interaction Design, and the overall User Experience.

Identify Friction

We began by printing out the current flow and identifying where there were issues gathered from customer data. We also identified areas where fields needed to be added or removed.
Responsive Figure
Whiteboard Design

Next we went to the whiteboards to start sketching out possible solutions.
Responsive Figure
Older Design Issues

Once a customer had selected their booking details, they were promoted to enter the check-out experience by pressing the Book Now button. A name and email were required as a first step. In this image of the older design, a Sign in button is visible on the top right but customers often missed it.

A lot of information is presented on this page and the space used for the Hotel photo is wasted real estate.
Responsive Figure
When inputting text, there was odd interaction in that the First and Last name fields were right aligned on text entry but the email address field was left aligned. Another distracting bug was that the entire page jumps when the keyboard retracts.
Older Payment Details Issues

The most important part of the check out flow that needed to be redesigned was the payment entry section. The interaction was a little frustrating as fields opened as the customer entered information. We also wanted to add support for Apple Pay.
Older HT Bed Logo Animation Issues

One of the points of friction came at the last step of the check out flow when customers were asked to trace the HT Bed Logo to confirm their purchase.

Tracing the HT Bed Logo was an engaging and fun idea but some customers did not understand the prompt and would leave the app without making a booking.

Tracing the HT Bed logo was important to reinforcing the brand so I began to design solutions which could communicate the desired interaction in a more comprehensive way.
Responsive Figure
Responsive Figure
New Design

In the revamped design, the fist page list the important details. A promo field has been added for our most loyal users. And the page feels less overwhelming.

The Guest Info and Payment Methods have been consolidated as sections. The purple colour communicates action is required.

When the Add Guest Info section is selected, the secondary information animates off the page - drawing focus to the task at hand. The most important information - the dates and total appear in the Hotel photo section as a reminder of the booking.

The Sign In option is highly visible if the customer already has an account.
Responsive Figure
Responsive Figure
Entering Payment Details

Updating the payment method was the highest priority. The previous design was slightly clunky and we wanted to add Apple Pay functionality as well as improve the flow of adding a new credit card.

I unified the payments options with credit card shaped icons and simplified the add card input fields. Instead of unseen fields opening up as information is input, the field is static and once the information is entered it is animated out of sight.
Responsive Figure
Responsive Figure
Tracing the HT Bed Logo

I added an animation the final step of tracing the HT Bed Logo to demonstrate the desired interaction.

I moved the HT Bed Logo up on the page and made it slightly larger to make it the focus of the design.

I used Core Animator to make the hand tracing animation and was able to hand the developers an encapsulated package which included the code and the assets. Magic!
Responsive Figure
Responsive Figure
Final Check Out Experience

This video shows the final Check Out Experience with the refined features mentioned above.

Responsive Figure